- Use a full-height drawer for submenus rather than accordions or flyout menus. Spanning the full viewport height creates a generous “safe area” so users can move the cursor from the sidebar icon into the drawer without accidentally closing the menu.
- The drawer should attach flush to the sidebar edge—whether the sidebar is collapsed (icon rail) or pinned (full width). In collapsed mode, child links appear in the hover drawer without widening the sidebar or revealing parent labels.
- Avoid cascading flyout menus. In compact mode, open submenus on hover (with a short close delay so users can move into the drawer). In pinned mode, open on click. This mockup uses Bootstrap offcanvas clipped to the app frame.
Interaction Recommendations
- Many apps provide both a Compact view and Full (pinned) view of the sidebar. The compact/full state should persist across page loads, saved per user.
- Use a single wide/narrow toggle at the bottom of the sidebar to pin the state—not a duplicate control in the topbar. Use a collapse-sidebar icon, not a Home icon.
- Home and Dashboard should not both appear as menu options; they are too similar. This mockup uses Dashboard only.
- Recommended keyboard shortcuts: ⌘/Ctrl+\ or [ to expand/collapse the sidebar. Most apps default to the full, pinned sidebar on larger displays.
- When collapsed, the sidebar should not expand on hover to show labels—the icon rail stays fixed width. Child navigation is the drawer that appears on hover.
Layout / Information Architecture
- Agenda Items and Documents are top-level icons alongside Meetings, not children of Meetings.
- Organization is a top-level icon; its child pages live in the submenu.
- Help Center and the logged-in user’s name with profile icon are aligned to the bottom of the sidebar. Settings and logout can live in a profile menu opened from the user item.
- Sidebars should focus on navigation (pages, filters, nouns) rather than actions (Create, Export). Actions belong in page toolbars or contextual menus.
- On listing pages, place the page title first, then Create directly below it on the left so the title rail stays readable. Secondary actions such as Export stay on the right. Meeting detail tabs follow the same left/right split—see Enhance Meeting Minutes.
- At the top of each child navigation drawer, add a secondary Create button for that section (for example Create Agenda Item) so users can start new content from the nav drawer. Style drawer create actions as
btn-outline-secondary; the primary create on the listing page stays btn-primary.
- Provide default filtered views as sidebar navigation items—for example meetings by status or type—so users do not need to create these views themselves.
Next Steps
- Drawer pattern is the preferred direction; accordion and flyout alternatives are deprioritized.
- Icons and precise sizing/margins for the topbar and sidebar can be refined in a follow-up pass.
- A polish pass on topbar/sidebar navigation may be warranted once other SOW tickets are complete.