Implementation Notes

Submenu drawer

• Use a full-height drawer for submenus—not accordions or flyouts. Attach flush to the sidebar in collapsed and pinned modes.
• Compact: open on hover with a short close delay. Pinned: open on click. This mockup uses Bootstrap offcanvas clipped to the app frame.

Sidebar behavior

• Support compact (icon rail) and pinned views; persist per user.
• One pin toggle at the bottom of the sidebar—collapse icon, not Home. No duplicate in the topbar.
• Use Dashboard only—not Home and Dashboard together.
• ⌘/Ctrl+\ or [ toggles the sidebar. Default to pinned on large screens.
• Collapsed rail stays fixed width; child links open in the drawer, not an expanding label rail.

Layout

• Agenda Items and Documents are top-level—not under Meetings. Organization is top-level with pages in its submenu.
• Help Center and the user profile sit at the bottom; settings and logout in the profile menu.
• Sidebar = pages and filters. Put Create and Export in page toolbars.
• Listing pages: title, then Create below on the left; secondary actions on the right.
• Child drawers: secondary Create at the top (btn-outline-secondary). Listing page keeps btn-primary.
• Ship default filtered views in the sidebar (e.g. by status or type).

References

• Best UX Practices for Designing a Sidebar
• Side Drawer UI
• Related: App-wide Search

Behavior

• Center search in the topbar. Show all content types by default.
• Filter by content type with an inline dropdown. Group or icon results when names repeat.
• (Optional) Index routes and action labels (e.g. “Create Meeting”) for command-palette-style jumps.

Keyboard & focus

• Ctrl/Cmd+K focuses search; Enter submits; Esc closes; Up/Down moves results.
• Do not use Ctrl/Cmd+F—reserved for find-in-page.
• Show focus with shadow or overlay. Placeholder: “Search (Township name?)”

• Accessible combobox search, USWDS Search

Alternatives

• Future: sidebar search icon opens a modal if the topbar is collapsed. Avoid floating search FABs.
• Tables may also use a narrow “Filter by Name/Title” field above the grid.

Table Display

Column width

• Size columns to content; scroll horizontally. Pin columns from the Columns menu; defaults are Actions, Date, and Name.
• Title ellipsis + tooltip is optional. Never truncate Tags or other multi-value fields.
• Treat the table as a summary—full detail on the meeting page.

Filters, sort & columns

• Toolbar above the table: Filter, Sort, Columns—same button treatment, grouped together.
• Highlight active controls or show a badge count. Each opens a dropdown of active rules plus add-new (see Similar Patterns).
• Column heading click toggles sort priority and direction.
• Columns dropdown: show/hide, pin/unpin, and reorder. Pinned columns stay sticky while scrolling; drag-reorder only works within the pinned or unpinned group.

Save behavior

Saved views are templates. Load one, explore freely — your bookmark stays as you saved it. Re-click it anytime to start fresh from the template. Update it only when you mean to.

• Working state — filter, sort, column visibility, order, and pin changes apply immediately (no Apply button) and are continually remembered in the browser.
• Saved views (sidebar) — named templates via Save to sidebar. Refinements after loading a template update working state only; the template is never auto-overwritten.
• Clear / Reset — X on each filter or sort rule; Reset in each Filter, Sort, and Columns dropdown. Re-click a sidebar saved view to restore that template.
• Update — when the current view diverges from an active template, the Saved view menu offers Update saved view (explicit confirmation).
• Default — pinned first item in the sidebar Saved views section; returns to CiviDocs’ initial filters, sort, and columns.
• Copy view link / Share — explicit actions for customer support handoffs (current working state, not live address-bar sync).
• In the prototype, shared-view URLs use a #meetings-view= hash; mockup states for search and minutes use separate hashes—only one applies at a time.

Context & visibility

• Workflow status: colored pips in the Status column (above).
• Township, team, and role: topbar Switch Context offcanvas (bi-houses-fill). The meetings list does not include a public-visibility column.
• When public visibility is shown elsewhere, use bi-eye / bi-eye-slash—globe or lock icons are less clear. See icon conventions.

Toolbar & footer

• One Create Meeting button; Make Recurring lives in the dialog.
• Grid/List in the table footer. (Optional) row density toggle.

Global Create (topbar)

• Add topbar Create with menu for meeting, agenda item, document, etc.—like Asana.
• Move township/team controls elsewhere to make room.

Similar patterns

Layout

• Keep v2 motions table: motioned/seconded columns left of member names.
• Separate prev/next from the item title. Motion text above voting; presentation/docs collapsible above that.
• Two-column lower section: voting left, discussion right.

Voting controls

• Toolbar above voters: Clear Motion/Second, method, Record Vote, All Yes/No, bulk Y/N/Abstain for selection.
• Checkboxes to apply one vote to multiple members. Keep Nobody row. Collapse Conditional Voters by default.

Discussion & outcome

• Click voter name to insert into discussion. Show abstain rationale inline.
• Outcome panel: Approved, Rejected, Deferred (with date), No Action Taken—vote tally moves here.
• Secondary Motions in the outcome area. Rename Copy Votes to Apply to Another with multi-select + confirm.

Generate, edit & enhance

• Generate Minutes dropdown with ordering before preview.
• Enhance Minutes in a side drawer; edit and PDF stay in the tab toolbar.
• After enhancement: diff highlights, Show/Hide Edits, optional CiviBot chat (two columns on wide screens).