Navigation & Layout
Every page in the staff panel shares the same layout: a sidebar on the left and the page content on the right. This layout is consistent across all pages.
Desktop sidebar
Section titled “Desktop sidebar”On wider screens, a fixed sidebar runs along the left edge of the viewport. It contains:
| Element | Position | Behavior |
|---|---|---|
| Stenbee logo | Top of sidebar | Links to the chat page |
| Nav items | Center of sidebar | Links to each page |
| Logout button | Bottom of sidebar | Ends your session |
Nav items by role
Section titled “Nav items by role”All roles see:
- Dashboard
- Chat
- Contacts
Admin additionally sees:
- Documents
- Products
- Settings
- Staff
- Channels
The active page is highlighted in the sidebar with the gold accent color.
Mobile layout
Section titled “Mobile layout”On smaller screens:
- The sidebar is hidden by default
- A menu button appears at the top-left corner
- Tapping it opens a slide-out drawer with the same navigation items
- A dark overlay appears behind the drawer; tap it to close
Shared UI components
Section titled “Shared UI components”These components are available on every authenticated page:
Toast notifications
Section titled “Toast notifications”Toasts are brief popup messages that appear at the top-right corner of the screen. They automatically disappear after a few seconds.
| Type | Color | When it appears |
|---|---|---|
| Success | Green | Action completed (saved, created, deleted) |
| Error | Red | Action failed (network issue, validation error, permission denied) |
Confirmation dialogs
Section titled “Confirmation dialogs”Some actions (deleting a session, removing a staff member, deleting a document) require confirmation. A centered dialog appears with:
- A title and description of the action
- Cancel button to abort
- Confirm button to proceed
For destructive actions like permanent deletion, the confirm button turns red with a warning icon. You can also dismiss the dialog by clicking the backdrop or pressing Escape.