⚠️ Path Warning:
Make sure you're running this from shared/sidebar/ directory.
Or use a local server from the project root.
Sidebar Controls
Global Functions:
• window.toggleVisionSidebar() - Toggle sidebar open/closed
• window.openVisionSidebar() - Open sidebar
• window.closeVisionSidebar() - Close sidebar
• window.triggerSidebarLogin() - Show login form
Note: Functions are set up after sidebar component loads (check console for timing).
Responsive Behavior
Breakpoints:
• Mobile (≤768px): Overlay sidebar, opens via hamburger
• Regular (769px-1599px): Collapsible sidebar
• Wide (≥1600px): Always unfolded
Current viewport:-
Auth State
Current State:
• Logged In: Checking...
• Member ID: -
To test logged in state: Uncomment the logged-in mock data in the script tag.
Component Status
Loading...
Checking component initialization...
Test Scenarios
Note: These buttons trigger sidebar features. Check console for logs.
Instructions
1. Test Responsive: Resize browser window to see different behaviors
2. Test Mobile: Use browser dev tools mobile emulation (≤768px) to see bottom menu
3. Test Wide: Resize to ≥1600px to see always-unfolded state
4. Test Auth: Toggle logged in/out state in script tag
5. Test Interactions: Click hamburger buttons, menu items, etc.
6. Test Bottom Menu: Resize to ≤768px to see glass design bottom navigation
If functions don't work: Wait a moment for components to load, then try again.