/* --------------------------------
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';
}
}
}
DISCLAIMER: The term “University” is used on this website ISNR University to indicate that the website is an education website. This website is not an accredited university, college or institute of higher learning and should not be construed as an accredited institute of higher education.