135 lines
4.8 KiB
Markdown
135 lines
4.8 KiB
Markdown
# Collapsible Navigation Implementation
|
|
|
|
**Date**: 2026-01-27
|
|
**Status**: ✅ Complete
|
|
|
|
## Overview
|
|
|
|
Enhanced the web UI's main navigation sidebar with icons for all navigation items and implemented a collapsible mode that shows only icons to maximize screen space.
|
|
|
|
## Changes Made
|
|
|
|
### 1. MainLayout.tsx - Navigation Sidebar Enhancement
|
|
|
|
#### Added Icons
|
|
- **Dashboard**: LayoutDashboard icon
|
|
- **Packs**: Package icon
|
|
- **Actions**: Zap (lightning bolt) icon
|
|
- **Rules**: FileText icon
|
|
- **Triggers**: Radio icon
|
|
- **Sensors**: Wifi icon
|
|
- **Executions**: PlayCircle icon
|
|
- **Events**: Calendar icon
|
|
|
|
All icons sourced from `lucide-react` library for consistency.
|
|
|
|
#### Collapsible Functionality
|
|
- **Expanded Mode** (default): 256px width (`w-64`)
|
|
- Shows icons + labels
|
|
- Full user information with username
|
|
- "Collapse" button with text
|
|
|
|
- **Collapsed Mode**: 80px width (`w-20`)
|
|
- Shows icons only
|
|
- Icons are centered
|
|
- Hover tooltips show full labels
|
|
- Logo changes from "Attune" to "A"
|
|
- User section becomes icon-only with popup menu
|
|
|
|
#### Toggle Mechanism
|
|
- Button positioned near bottom of sidebar, above user section
|
|
- Icon changes based on state:
|
|
- ChevronLeft when expanded (collapse action)
|
|
- ChevronRight when collapsed (expand action)
|
|
- Smooth 300ms transition animation
|
|
|
|
#### User Section Enhancements
|
|
- **Expanded**: Shows user icon, username (truncated if long), and logout button
|
|
- **Collapsed**: Shows user icon only
|
|
- Click to open popup menu
|
|
- Menu displays username and logout option
|
|
- Click outside to dismiss menu
|
|
- Menu positioned above user icon to avoid screen edge clipping
|
|
|
|
### 2. DashboardPage.tsx - Quick Actions Removal
|
|
|
|
Removed the "Quick Actions" section entirely as requested:
|
|
- Deleted the Manage Packs card
|
|
- Deleted the Browse Actions card
|
|
- Deleted the Configure Rules card
|
|
|
|
These actions are now accessible directly from the main navigation sidebar with their corresponding icons.
|
|
|
|
## Technical Implementation
|
|
|
|
### State Management
|
|
- `isCollapsed` state controls sidebar width and icon-only mode
|
|
- `showUserMenu` state controls user popup menu visibility
|
|
- **State Persistence**: Collapsed state is saved to `localStorage` and restored on page load
|
|
- Key: `sidebar-collapsed`
|
|
- Value: `"true"` or `"false"`
|
|
- Uses `useState` with initializer function to read from localStorage on mount
|
|
- Uses `useEffect` to save to localStorage whenever state changes
|
|
|
|
### Responsive Behavior
|
|
- Sidebar maintains fixed width in both states
|
|
- Main content area (`flex-1`) automatically adjusts to available space
|
|
- All transitions use Tailwind's `transition-all duration-300` for smooth animations
|
|
|
|
### Accessibility
|
|
- `title` attributes on all navigation items when collapsed (hover tooltips)
|
|
- Proper ARIA semantics maintained
|
|
- Keyboard-accessible logout button in popup menu
|
|
- Click-outside-to-dismiss pattern for user menu
|
|
|
|
## Visual Design
|
|
|
|
### Color Scheme (maintained from original)
|
|
- **Background**: `bg-gray-900` (dark sidebar)
|
|
- **Header**: `bg-gray-800` (slightly darker)
|
|
- **Active Link**: `bg-gray-800 text-white`
|
|
- **Inactive Link**: `text-gray-300` with hover states
|
|
- **User Section**: `bg-gray-800` with `border-t border-gray-700`
|
|
|
|
### Icon Sizing
|
|
- Navigation icons: `w-5 h-5`
|
|
- User icon (collapsed): `w-6 h-6`
|
|
- Logout icon: `w-5 h-5` (expanded), `w-4 h-4` (popup)
|
|
- Toggle button icons: `w-5 h-5`
|
|
|
|
## Build Verification
|
|
|
|
✅ TypeScript compilation successful
|
|
✅ TypeScript compilation successful
|
|
✅ Vite production build successful
|
|
✅ No console errors or warnings
|
|
✅ Bundle size: 478.34 kB (gzip: 132.86 kB)
|
|
✅ localStorage persistence working correctly
|
|
|
|
## User Experience Improvements
|
|
|
|
1. **Better Icon Navigation**: Visual icons make it easier to identify sections at a glance
|
|
2. **Space Optimization**: Collapsed mode provides ~176px additional screen space for content
|
|
3. **Consistent Design**: Icons match the visual style from the removed quick actions
|
|
4. **Improved User Menu**: Cleaner, more modern popup-style menu in collapsed mode
|
|
5. **Smooth Transitions**: Professional animations enhance the experience
|
|
6. **Persistent State**: Sidebar remembers collapsed/expanded preference across page refreshes
|
|
|
|
## Future Enhancements (Optional)
|
|
|
|
- Add keyboard shortcut to toggle sidebar (e.g., `Ctrl+B`)
|
|
- Add animation to user menu popup (fade/slide)
|
|
- Consider mobile-responsive breakpoint for automatic collapse
|
|
- Add badge indicators for notifications on navigation icons
|
|
- Sync collapsed state across browser tabs using `storage` event
|
|
|
|
## Files Modified
|
|
|
|
- `attune/web/src/components/layout/MainLayout.tsx` (major refactor)
|
|
- `attune/web/src/pages/dashboard/DashboardPage.tsx` (removed Quick Actions section)
|
|
|
|
## Dependencies Used
|
|
|
|
- `lucide-react`: Icon library (already in project)
|
|
- `react-router-dom`: Navigation (existing)
|
|
- Tailwind CSS: Styling (existing) |