// Sidebar Navigation .sidebar-nav { display: none; margin: 0; padding-bottom: 20px; padding-left: 0; .sidebar-nav-active & { display: block; } li { border-bottom: 1px solid transparent; color: $sidebar-nav-color; cursor: pointer; display: inline-block; font-size: $font-size-small; &.sidebar-nav-overview { margin-left: 10px; } &:hover { color: $sidebar-nav-hover-color; } } } .sidebar-toc-active .sidebar-nav-toc, .sidebar-overview-active .sidebar-nav-overview { border-bottom-color: $sidebar-highlight; color: $sidebar-highlight; &:hover { color: $sidebar-highlight; } } // Need for Sidebar/TOC inner scrolling if content taller then viewport. .sidebar-panel-container { flex: 1; overflow-x: hidden; overflow-y: auto; } .sidebar-panel { display: none; } .sidebar-overview-active .site-overview-wrap { // Flexbox layout makes it possible to reorder the child // elements of .site-overview-item through the `order` CSS property @include flex-column(); } .sidebar-toc-active .post-toc-wrap { display: block; }