Link 1 Link 2 Link 3
... page content ...
/* -------------------------------- File#: _1_side-navigation-v2 Title: Side Navigation v2 Descr: Collapsible Side Navigation Usage: codyhouse.co/license -------------------------------- */ // >>> style affecting both all (collapsed + static) versions 👇 .sidenav-v2 { &::after { content: ""; display: table; clear: both; } } .sidenav-v2__control { // control button - all versions width: 100%; padding: var(--space-sm); display: flex; align-items: center; justify-content: space-between; } .sidenav-v2__control-text { // text inside control button - all versions position: relative; > * { display: inline-block; transition: opacity .4s, transform .4s var(--ease-out); } > *:last-child { position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; transform: translateY(-10px); } } .sidenav-v2__icon-arrow { // arrow icon .icon__group { will-change: transform; transform-origin: 8px 8px; transition: transform .3s var(--ease-out); > * { transform-origin: 8px 8px; stroke-dasharray: 17; transform: translateY(3px); transition: transform .3s, stroke-dashoffset .3s; transition-timing-function: var(--ease-out); } > *:first-child { stroke-dashoffset: 8.5; } > *:last-child { stroke-dashoffset: 8.5; } } } .sidenav-v2__list:not(:last-child) { // list - all versions margin-bottom: var(--space-sm); } .sidenav-v2__label { // label/separator - all versions margin-bottom: var(--space-xxxxs); > * { color: var(--color-contrast-medium); font-size: var(--text-sm); } } .sidenav-v2__link { // link - all versions display: flex; align-items: center; text-decoration: none; color: var(--color-contrast-high); transition: .2s; &:hover { background-color: alpha(var(--color-contrast-higher), 0.05); } &[aria-current="page"] { background-color: var(--color-contrast-higher); color: var(--color-bg); } } .sidenav-v2__link-text { // text inside links - all versions white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: var(--space-xxxs); } .sidenav-v2__counter { // notification counter - all versions display: inline-flex; background-color: alpha(var(--color-contrast-higher), 0.15); font-size: var(--text-xs); padding: var(--space-xxxxs) var(--space-xs); border-radius: 50em; margin-left: auto; } // <<< end style affecting all versions // >>> collapsed version only (mobile) 👇 .sidenav-v2:not(.sidenav-v2--static) { border-radius: var(--radius-md); background-color: var(--color-bg); box-shadow: var(--shadow-sm); transition: .3s; &:hover { box-shadow: var(--shadow-md); } .sidenav-v2__nav { // navigation - collapsed version only display: none; margin: var(--space-xxs) 0; } .sidenav-v2__label { // label - collapsed version only padding-left: var(--space-sm); } .sidenav-v2__link { // link - collapsed version only padding: var(--space-xxs) var(--space-sm); } &.sidenav-v2--expanded { .sidenav-v2__control-text { > *:first-child { transform: translateY(10px); opacity: 0; pointer-events: none; } > *:last-child { opacity: 1; pointer-events: auto; transform: translateY(0); } } .sidenav-v2__nav { display: block; animation: sidenav-v2-entry-animation .4s var(--ease-out); } .sidenav-v2__icon-arrow .icon__group { // animate arrow icon transform: rotate(-90deg); > *:first-child, *:last-child { stroke-dashoffset: 0; transform: translateY(0px); } } } } // <<< end collapsed version // >>> static version only (desktop) 👇 .sidenav-v2--static { .sidenav-v2__control { // control - static version only display: none; } .sidenav-v2__link { // link - static version only padding: var(--space-xxs) var(--space-xs); border-radius: var(--radius-md); &[aria-current="page"] { box-shadow: var(--shadow-sm); } } } // <<< end static version @keyframes sidenav-v2-entry-animation { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0px); } } // no-js support html:not(.js) .sidenav-v2 { .sidenav-v2__nav { display: block; } } // used in JS - detect when the side navigation needs to switch from a collapsed to a static version [class*="sidenav-v2--static"]::before { display: none; content: 'collapsed'; } @each $breakpoint, $value in $breakpoints { @include breakpoint(#{$breakpoint}) { .sidenav-v2--static\@#{$breakpoint}::before { content: 'static'; } } }
Created with
Link 1 Link 2 Link 3
... page content ...