Flex Nav Collapse Framework

A clean implementation focusing on the collapse button aesthetics and functionality

Smooth Transitions

The collapse button features smooth cubic-bezier transitions for a polished feel. Notice how the chevron rotates and the button scales on hover.

Precise Positioning

The button is absolutely positioned on the edge of the navigation, creating a seamless connection between the nav and content areas.

Visual Feedback

Hover states include color changes, shadow elevation, and subtle scaling. The active state provides immediate tactile feedback.

Icon Animation

The chevron icon smoothly rotates 180 degrees to indicate the collapsed/expanded state, providing clear visual communication.

State Persistence

The navigation state is saved to localStorage, maintaining user preference across sessions for a better experience.

Accessibility

The button includes proper ARIA labels and keyboard support, ensuring the interface is usable by everyone.

Layout Structure & Components

Fixed Header

  • .fixed-header - Main header container (56px height)
  • .header-container - Inner flex container
  • .mobile-menu-toggle - Hamburger menu (mobile only)
  • .search-bar - Central search input
  • .expand-user-drawer-button - User menu trigger

User Drawer

  • #userDrawer - Dropdown container
  • .drawer-header - User info section
  • .drawer-nav - Navigation items
  • #drawerOverlay - Click-outside overlay

Flex Navigation

  • #flexNav - Main navigation sidebar
  • .flex-nav-collapse-button - Collapse toggle
  • .nav-menu - Navigation items container
  • .nav-item - Individual nav links
  • .collapsed - State class (80px width)
  • .mobile-open - State class for mobile off-canvas menu

Main Content

  • .app-container - Main flex container
  • .main-content - Content area (1200px max)
  • .content-grid - Responsive card grid
  • .content-card - Individual content cards

Key Features & Interactions

Navigation States:
  • Expanded: 260px width
  • Collapsed: 80px width
  • Mobile: Off-canvas slide-in
Responsive Breakpoints:
  • Desktop: > 768px
  • Mobile: ≤ 768px
  • Content max-width: 1200px
JavaScript Functions:
  • toggleNav() - Nav collapse
  • toggleUserDrawer() - User menu
  • closeUserDrawer() - Close drawer

Recent Changes

  • Increased the top offset for the sticky right column to 80px to provide more space below the fixed header.
  • Made the right-hand column sticky using position: sticky; so it remains in view on scroll.
  • Restructured the .main-content area into a two-column layout (3/4 and 1/4 width) using CSS Grid.
  • Refactored JavaScript event handling by removing all inline onclick attributes from HTML and centralizing them in js/script.js. This fixed the non-functional .flex-nav-collapse-button.
  • Updated the dark theme color palette in style.css to a monochrome, gunmetal grey scheme for a more modern look.
  • Increased z-index of .flex-nav to 90 to ensure it appears above the main content.
  • Adjusted the right position of .flex-nav-collapse-button to 5px for better visibility.
  • Changed the height of .nav-header to 56px.
  • Modified .flex-nav to be position: fixed; top: 56px; height: calc(100vh - 56px); for fixed desktop navigation, starting below the header.
  • Added padding-top: 56px; to the body to prevent content from being hidden by the fixed header.
  • Updated .main-content to have margin-left: var(--nav-width); (and --nav-collapsed-width when collapsed) to accommodate the fixed navigation.
  • Implemented responsive design for mobile devices (@media (max-width: 768px)):
    • .mobile-menu-toggle is now displayed.
    • .flex-nav is positioned off-canvas (left: calc(-1 * var(--nav-width));) and slides in with .mobile-open class. On mobile, .flex-nav now starts from top: 0; and takes height: 100vh;.
    • .flex-nav-collapse-button is hidden.
    • .main-content has margin-left: 0; and adjusted padding.
  • Reverted .nav-header padding from 0 15px; back to 0 24px;.
  • Moved the #my-layout div to be inside the .main-content area and adjusted its internal padding.
  • Separated all CSS into a new file, style.css, and linked it in the HTML header.
  • Updated the stylesheet link from href="style.css" to href="css/style.css".
  • Separated JavaScript into a new file, js/script.js, and linked it in the HTML.

Aside Content

This is the right-hand column, taking up 1/4 of the main content area.