Svelte Responsive Side Nav
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;
}
}