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;
  }
}

Readme

Keywords

Package Sidebar

Install

npm i toolassisted-side-nav

Weekly Downloads

2

Version

0.1.0

License

none

Unpacked Size

39.2 kB

Total Files

7

Last publish

Collaborators

  • remofischer