Nondeterministic Postrequisite Metaprotocol

    toolassisted-side-nav

    0.1.0 • Public • Published

    fire-responsive-nav

    Svelte Responsive Side Nav

    Usage

    Include the following css variables in your global.css and change the variables as you like.

    :root {
      --navBackground: hsl(210, 10%, 27%);
      --navColor: rgb(212, 212, 212);
      --navItemHoverBackgroundColor: rgb(196, 103, 16);
    }
    
    /* Small Screens */
    @media only screen and (max-width: 600px) {
      :root {
        --navIconWidth: 4rem;
        --navFullWidth: 100%;
        --navWidth: 100%;
        --navHeight: var(--navIconWidth);
        --navItemHeight: var(--navIconWidth);
        --navSlideoutTime: 0ms;
        --navFlexDirection: row;
        --navItemJustify: space-around;
        --navLabelDisplay: none;
        --navPush: 0;
      }
    }
    
    /* Large Screens */
    @media only screen and (min-width: 600px) {
      :root {
        --navIconWidth: 4rem;
        --navFullWidth: calc(var(--navIconWidth) + 200px);
        --navWidth: var(--navIconWidth);
        --navHeight: 100%;
        --navItemHeight: 2.5rem;
        --navSlideoutTime: 50ms;
        --navItemJustify: flex-start;
        --navFlexDirection: column;
        --navLabelDisplay: initial;
        --navPush: auto;
      }
    }

    Install

    npm i toolassisted-side-nav

    DownloadsWeekly Downloads

    1

    Version

    0.1.0

    License

    none

    Unpacked Size

    39.2 kB

    Total Files

    7

    Last publish

    Collaborators

    • remofischer