feat: add fixed sidebar navigation with hover expand and mobile hamburger
Implements Task 3: fixed left sidebar (70px collapsed → 250px on hover) with 9 nav items, social links, active-state detection, and mobile hamburger toggle that matches the existing sidebar-nav.js selectors. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -280,3 +280,203 @@ body.sidebar-overlay::after {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
z-index: 199;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Sidebar navigation
|
||||
========================================================================== */
|
||||
|
||||
/* Base sidebar */
|
||||
.sidebar-nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: var(--sidebar-width-collapsed);
|
||||
height: 100vh;
|
||||
background: var(--color-white);
|
||||
border-right: 1px solid var(--color-gray-light);
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: width 0.25s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidebar-nav:hover {
|
||||
width: var(--sidebar-width-expanded);
|
||||
}
|
||||
|
||||
/* Logo area */
|
||||
.sidebar-nav__logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 60px;
|
||||
border-bottom: 1px solid var(--color-gray-light);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sidebar-nav__logo a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Menu / navigation area */
|
||||
.sidebar-nav__menu {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.sidebar-nav__list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Individual links */
|
||||
.sidebar-nav__link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 12px 23px;
|
||||
color: var(--color-black);
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
transition:
|
||||
background-color var(--transition-base),
|
||||
color var(--transition-base);
|
||||
}
|
||||
|
||||
.sidebar-nav__link:hover,
|
||||
.sidebar-nav__link:focus {
|
||||
background-color: var(--color-gray-light);
|
||||
color: var(--color-black);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Active item */
|
||||
.sidebar-nav__item--active .sidebar-nav__link {
|
||||
color: var(--color-primary);
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
/* Icon */
|
||||
.sidebar-nav__icon {
|
||||
flex-shrink: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
/* Label — hidden when collapsed, visible when sidebar hovered */
|
||||
.sidebar-nav__label {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
font-size: 0.9375rem; /* 15px */
|
||||
}
|
||||
|
||||
.sidebar-nav:hover .sidebar-nav__label {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Social links at the bottom */
|
||||
.sidebar-nav__social {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
border-top: 1px solid var(--color-gray-light);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sidebar-nav__social-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--color-black);
|
||||
opacity: 0.6;
|
||||
transition: opacity var(--transition-base);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.sidebar-nav__social-link:hover,
|
||||
.sidebar-nav__social-link:focus {
|
||||
opacity: 1;
|
||||
text-decoration: none;
|
||||
color: var(--color-black);
|
||||
}
|
||||
|
||||
/* Content shift on desktop — push main content right of the sidebar */
|
||||
.site-content,
|
||||
.site-header,
|
||||
.site-footer {
|
||||
margin-left: var(--sidebar-width-collapsed);
|
||||
}
|
||||
|
||||
/* Hamburger / toggle button */
|
||||
.sidebar-nav__toggle {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
z-index: 1100;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
padding: 0;
|
||||
background: var(--color-white);
|
||||
border: 1px solid var(--color-gray-light);
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.sidebar-nav__toggle:focus-visible {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.sidebar-nav__toggle-bar {
|
||||
display: block;
|
||||
width: 24px;
|
||||
height: 2px;
|
||||
background-color: var(--color-black);
|
||||
transition: transform 0.2s ease, opacity 0.2s ease;
|
||||
}
|
||||
|
||||
/* Mobile styles */
|
||||
@media (max-width: 767px) {
|
||||
/* Hide sidebar off-screen by default */
|
||||
.sidebar-nav {
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.25s ease, width 0.25s ease;
|
||||
width: var(--sidebar-width-expanded);
|
||||
}
|
||||
|
||||
/* Show sidebar when open */
|
||||
.sidebar-nav--open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
/* Always show labels on mobile when open */
|
||||
.sidebar-nav .sidebar-nav__label {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Show hamburger button on mobile */
|
||||
.sidebar-nav__toggle {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* Remove content margin on mobile */
|
||||
.site-content,
|
||||
.site-header,
|
||||
.site-footer {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user