nav.site { background-color: #0e1120; overflow: auto; display: flex; flex-direction: column; justify-content: space-between; height: 100%; width: 290px; transition: width 200ms ease; a { color: white; text-decoration: none; font-size: 14px; font-weight: 100; white-space: nowrap; &:hover { text-decoration: none; } &.nav-page { font-size: 14px; font-weight: 100; white-space: nowrap; span { display: block; &:hover { background-color: rgb(42, 46, 67); } } } &.active { color: rgb(239, 137, 248); } } .nav-group { font-size: 14px; color: white; font-weight: bold; span.label { display: block; padding: 5px 0 0 25px; } .nav-page span { padding: 1px 0 1px 50px; display: block; } } .nav-root { flex-grow: 0; margin: 15px; } .nav-pages { flex-grow: 1; } .nav-session { flex-grow: 0; margin: 15px 0; padding: 0 15px; text-align: right; &:hover { background-color: rgb(42, 46, 67); } } } /* Collapsed sidebar: Stimulus toggles `collapsed` on ; the inline head script toggles `sidebar-collapsed` on before first paint (FOUC guard). Both rules describe the same state. */ body.collapsed nav.site, html.sidebar-collapsed nav.site { width: 0; overflow: hidden; } .nav-collapse { flex-grow: 0; margin: 0 0 15px; padding: 0 15px; text-align: right; } .nav-collapse-btn, .sidebar-expand-btn { background: none; border: none; cursor: pointer; font-size: 18px; line-height: 1; padding: 4px 8px; } .nav-collapse-btn { color: white; } .nav-collapse-btn:hover { background-color: rgb(42, 46, 67); } .sidebar-expand-btn { align-self: flex-start; color: #0e1120; position: sticky; top: 0; }