$navHeight: 4.5rem; $menuBreakPoint: 750px; .app { display: flex; flex-direction: column; min-height: 100%; &__logo { font-weight: 700; font-size: 1.4rem; } &__link-group { margin-bottom: 2rem; } &__link-group-title { font-weight: 700; letter-spacing: 0.025rem; font-size: 0.75rem; text-transform: uppercase; color: rgba($colorBlack, 0.3); margin-bottom: 0.5rem; } &__link-list &__link-list { display: none; padding-left: 1rem; margin-top: 0.5rem; margin-bottom: 1.5rem; border-left: 2px solid rgba($colorBlack, 0.1); } .active + &__link-list { display: block; } &__link { display: block; padding: 0.1rem 0.5rem; border-radius: 5px; font-weight: 500; color: rgba($colorBlack, 0.6); margin-bottom: 0.2rem; margin-left: -0.5rem; &:hover { color: $colorBlack; } &.active { color: $colorBlack; background-color: rgba($colorBlack, 0.05); } &--draft { color: rgba($colorBlack, 0.2); } &--with-children::after { content: '→'; color: rgba($colorBlack, 0.2); } } &__header { align-self: center; position: fixed; top: 0; z-index: 2; display: flex; align-items: center; justify-content: center; width: 100%; height: $navHeight; flex: 0 0 auto; background-color: rgba($colorBackground, 0.8); border-bottom: 1px solid rgba($colorBlack, 0.05); backdrop-filter: blur(10px); } &__header-inner { width: 100%; display: flex; align-items: center; justify-content: space-between; max-width: 62rem; margin: 0 auto; padding: 0 1rem; @media (min-width: $menuBreakPoint) { padding: 0 2rem; } } &__content { position: relative; z-index: 1; flex: 1 1 auto; display: flex; width: 100%; max-width: 62rem; margin: 0 auto; padding-left: 1rem; padding-right: 1rem; @media (min-width: $menuBreakPoint) { padding-left: 2rem; padding-right: 2rem; } } &__menu-icon, &__close-icon { border: none; padding: 0; background-color: transparent; margin-left: 1rem; @media (min-width: $menuBreakPoint) { display: none; } } &__sidebar-wrapper { position: fixed; z-index: 2; top: $navHeight; bottom: 0; left: 0; right: 0; background-color: $colorBackground; padding-left: 1rem; padding-right: 1rem; visibility: hidden; opacity: 0; &.is-mobile-visible { visibility: visible; opacity: 1; } @media (min-width: $menuBreakPoint) { visibility: visible; opacity: 1; position: sticky; flex: 0 0 auto; align-self: flex-start; top: 0; width: 18rem; height: 100vh; padding-left: 0; padding-right: 0; padding-right: 3rem; padding-top: $navHeight; } } &__sidebar { overflow: auto; height: 100%; padding-top: 2rem; padding-left: 0.5rem; margin-left: -0.5rem; } &__main { flex: 1 1 auto; min-width: 0; padding-top: $navHeight + 2rem; } }