Skip to content

Sidebar menu

Main navigation for FleekDash

The sidebar is the main navigation for FleekDash.

Structure

  • Header – Logo (or brand image), optional site title, and a settings (gear) popover. The popover can include: sidebar behavior (e.g. bubble style, dark mode toggle, auto-hide), and Reset pinned items or Reset menu (clears cache and reloads menu from backend).

  • Search – A search bar filters menu items by name so you can jump to a section quickly. Clearing search or clicking "Reset Menu" (when no results) reloads the full list.

  • Pinned items – You can pin frequently used items so they appear at the top in a dedicated section. Pinned state is stored in localStorage. Use the pin control on each item (e.g. pin icon) to add or remove.

  • Menu items – Main items (Dashboard, Posts, Media, Users, Settings, etc.) and their submenus. Items come from the WordPress admin menu API; each has a label, icon, href (e.g. #/posts, #/wp/edit.php), and optional children. Clicking an item navigates (FleekDash route or WP iframe route). The selected item is highlighted based on the current URL.

  • User menu – At the bottom of the sidebar: your avatar, name, and a popover with profile, theme, language, notifications, and optionally Menu (opens Menu Management drawer) or Role management.

Behavior

  • Expand / collapse – Submenus expand and collapse when you click the parent. Expanded state is synced with the URL so the right section stays open.

  • Collapsed sidebar – On smaller widths or when "auto-hide" is on, the sidebar can collapse to icons only (or hide off-screen and show on hover). A trigger zone or hamburger reopens it.

  • URL sync – The selected item and expanded parents follow the current hash route. When you navigate (e.g. from Dashboard to Posts), the sidebar updates automatically.

  • Loading – While the menu is loading, a skeleton is shown. Menu data is cached (e.g. React Query and optional backend cache); "Reset Menu" clears cache and forces a fresh load.

Benefit: One place to reach every FleekDash and WordPress screen; search and pinning keep the menu manageable.