Sidebar and Mobile Navigation

How Navigation Works in Fixmo

Fixmo uses three navigation components: a fixed sidebar on desktop, a bottom navigation bar on mobile, and a header bar that appears on all screen sizes. The content of each component adapts based on your user role and your shop's subscription plan, ensuring you only see menu items relevant to your responsibilities and available features.

Desktop Sidebar

The sidebar is a 260px fixed panel on the left side of the screen, visible on large screens (1024px and above). It contains your shop logo, navigation menu, an optional upgrade prompt, and a footer with version and plan information.

• Shop logo — displayed at the top of the sidebar. If your shop has uploaded separate light and dark logos in Settings > Shop, the logo automatically switches to match the current theme. If no logo is uploaded, the shop name appears as text.
• Navigation menu — up to 15 menu items organized under a 'Menu' heading. Items include Dashboard, Repairs, Messages, Customers, Inventory, Services, Sales, Refunds, Invoicing, Finance, Suppliers, Agents, Team, Reports, and Settings.
• Collapsible child menus — Invoicing expands to show All Documents, Invoices, and Quotations. Finance expands to Dashboard, Payments, and Expenses. Suppliers expands to Suppliers and Purchase Orders. Settings expands to Shop, Billing, Services, Inventory, Repairs, Payment Methods, Messages, Email, Notifications, and Data Import.
• Upgrade CTA — appears at the bottom of the sidebar for Admin users on the Free or Pro plan. Links to Settings > Billing. Hidden for Business plan users and all non-Admin roles.
• Footer — displays the app version number and your current plan name (FREE, PRO, or BUSINESS) with a green status indicator.

Role-Based Menu Visibility

Each menu item in the sidebar is conditionally shown based on your user role. Items that are not available for your role are completely hidden, not disabled.

• Dashboard — visible to all roles.
• Repairs — visible to Admin, Manager, Technician, and Cashier.
• Messages — visible to Admin and Manager only. Also requires a paid plan (Pro or Business).
• Customers — visible to Admin, Manager, and Cashier.
• Inventory — visible to all roles (Technicians and Cashiers have read-only access).
• Services — visible to Admin and Manager only.
• Sales — visible to Admin, Manager, and Cashier.
• Refunds — visible to Admin, Manager, and Cashier.
• Invoicing — visible to Admin and Manager only.
• Finance — visible to Admin, Manager, and Cashier.
• Suppliers — visible to Admin and Manager only.
• Agents — visible to Admin and Manager only.
• Team — visible to Admin and Manager.
• Reports — visible to Admin and Manager only.
• Settings — visible to Admin only. Contains 10 sub-pages.

Plan-Based Menu Visibility

Some menu items are only available on paid plans. On the Free plan, these items are hidden entirely from the sidebar.

• Messages — requires a paid plan (Pro or Business). Hidden on the Free plan.
• Settings > Messages — the WhatsApp/Messages settings sub-page requires a paid plan. Hidden on the Free plan.
• All other menu items are available on all plans, though their usage may be subject to plan limits (e.g., repair or sales counts).

Mobile Bottom Navigation

On screens smaller than 1024px, the sidebar is replaced by a fixed bottom navigation bar. This bar provides quick access to the five most-used sections and a floating action button for creating new repairs.

• Home — navigates to the Dashboard.
• Repairs — navigates to the Repairs list.
• POS — navigates to the Point of Sale terminal. The POS button is displayed as a floating action button (FAB) that is visually raised above the navigation bar with a circular primary-colored design and a shadow effect.
• Inventory — navigates to the Inventory list.
• More/Settings — navigates to the Settings page. Only visible to Admin users.

Mobile Sidebar (Hamburger Menu)

On mobile, the full sidebar navigation is accessible through a hamburger menu icon in the header. Tap the menu icon to open a slide-out panel from the left side of the screen. This panel contains the same navigation items as the desktop sidebar, adapted for touch interaction. Tap any item to navigate, or tap outside the panel to close it.

Header Bar

The header bar is fixed at the top of every page and contains key actions and tools. It appears on both desktop and mobile.

• Hamburger menu — appears on mobile (below 1024px) to open the slide-out sidebar navigation.
• Global search — on desktop, a full search bar with placeholder text and a / shortcut hint. On mobile, a compact search icon. Opens the global search modal.
• POS button — navigates to the Point of Sale terminal. Visible to Admin, Manager, and Cashier roles.
• New Repair button — navigates to the new repair form. Visible to Admin and Manager roles only.
• Notifications bell — shows the count of unread notifications as a badge. Click to view alerts including plan usage warnings and system announcements.
• Dark mode toggle — a sun/moon icon that opens a dropdown with Light, Dark, and System theme options.
• User menu — displays your avatar initials and name. Click to open a dropdown with Profile, Billing (Admin only), and Log Out options.