Navigation Layout

Overview

Optima Orbit allows you to completely customize how you move between modules and pages. Depending on your personal preference or screen size, you can choose between three distinct navigation layouts: Sidebar, Floating, and Dock.

What Is Navigation Layout?

Your navigation layout determines where the main Optima Orbit menu appears on your screen and how it behaves.

Changing your layout only changes how the application looks; it does not change what you have access to. All three modes provide access to the exact same modules, pages, and features based on your user permissions.

Sidebar, Floating and Dock at a Glance

Navigation Mode	What It Looks Like	Best For
Sidebar	A traditional left-aligned panel displaying categories, icons, and text labels.	Users who prefer a classic, always-visible menu with clear text descriptions.
Floating	A compact, floating bar on the left edge of the screen.	Maximizing screen real estate on smaller laptops while keeping navigation instantly accessible.
Dock	A bottom-aligned row of icons (similar to macOS).	Users who want a clean, icon-first, app-like experience with maximum horizontal space.

How to Change Your Navigation Layout

You can switch your navigation mode at any time. The change takes effect immediately without needing to reload the page.

1. Open your profile menu by clicking your User Avatar in the top right corner.
2. Scroll down to the Navigation section.
3. Click either Sidebar, Floating, or Dock.
4. The Optima Orbit interface will instantly instantly update to your chosen layout.

Sidebar Navigation

The Sidebar is the default navigation layout in Optima Orbit. It appears as a panel fixed to the left side of your screen.

How Sidebar Works

When active, the Sidebar displays all your available modules grouped by category (e.g., Organization, Customer Management). It includes a search bar at the top to quickly filter the menu, and clear text labels next to every icon.

How to Use Sidebar

1. Scroll up and down the left panel to browse categories.
2. Click on a category header (e.g., "Customer Management") to expand or collapse its sub-modules.
3. Use the Search menu... input at the top of the Sidebar to instantly filter available pages.
4. Click on any module name to navigate to that page.

Expanded and Collapsed Sidebar

To maximize your horizontal workspace without losing the Sidebar completely, you can collapse it.

• Click the Collapse Icon (a small left-pointing arrow) on the right edge of the Sidebar header.
• The Sidebar will shrink to a narrow vertical strip, hiding the text labels but keeping the module icons visible.
• Hovering over a category icon in collapsed mode will reveal a floating panel containing its sub-modules.

Floating Navigation

Floating navigation removes the permanent left sidebar and replaces it with a detached, floating control pad on the left edge of the screen.

How Floating Works

Instead of reserving a large column of fixed screen space, the Floating layout hovers slightly above the main application background. This allows your dashboard and tables to stretch much wider, which is especially useful on laptops or when viewing complex data.

Dock Navigation

The Dock layout removes all side navigation entirely and moves your primary modules to a floating bar at the bottom center of the screen, similar to the macOS Dock.

How Dock Works

The Dock is heavily icon-based. Because it sits at the bottom of the screen, it frees up the maximum amount of horizontal space for your work. It is designed for users who are highly familiar with Optima Orbit's icons and want an unobtrusive, app-like experience.

How to Use Dock

Hover your mouse over any icon in the Dock to reveal a tooltip identifying the module. Click the icon to instantly navigate to that page.

Sidebar vs Floating vs Dock

Feature	Sidebar	Floating	Dock
Navigation location	Fixed to the left edge	Floating on the left edge	Floating at the bottom center
Screen space used	High	Low	Very Low
Labels visible	Yes (when expanded)	Hidden until hovered/opened	Hidden until hovered
Icons visible	Yes	Yes	Yes
Expand/collapse	Yes	N/A	N/A
Best suited for	Desktop monitors, learning the platform	Laptop screens, balancing space and accessibility	Maximum workspace, icon-driven workflows

Which Navigation Mode Should I Choose?

• Choose Sidebar if you are new to Optima Orbit, rely on text labels to find your way around, or are working on a large high-resolution monitor where screen space is plentiful.
• Choose Floating if you are working on a 13" laptop, prefer your navigation on the left, but want your data tables and dashboards to stretch wider.
• Choose Dock if you know exactly what the icons mean and want the cleanest, most focused interface possible with absolutely nothing on the left or right borders.

How Your Navigation Choice Is Saved

When you select a layout, Optima Orbit saves it automatically and instantly. There is no "Save" button to click.

This preference is tied to your user account and is synchronized with the Optima Orbit cloud.

What Happens After Refresh?

Your layout is safely stored. If you select "Dock" and refresh your browser, Optima Orbit will immediately load the Dock layout again.

What Happens After Sign Out?

Because your preference is synced to your profile, you can sign out of Optima Orbit, sign in from a completely different computer, and your chosen layout will follow you.

Navigation on Different Screen Sizes

Optima Orbit is responsive. If you are using a mobile device or a very narrow browser window, the platform will intelligently adapt your navigation to ensure the app remains usable.

On mobile devices, the Sidebar, Floating, and Dock layouts are temporarily suspended. Instead, navigation is placed behind a standard "hamburger" menu icon in the top header. Tapping it will open a mobile-optimized off-canvas drawer.

Knowing Which Page You Are On

Regardless of which layout you choose, Optima Orbit will always highlight your current location.

• In Sidebar: The active module is highlighted with your organization's primary brand color.
• In the Top Header: A breadcrumb-style context indicator sits in the top-left of the application header, constantly showing your current Category and Page Title.

Navigation and Permissions

Changing your navigation mode does not change your security or access rights. Sidebar, Floating, and Dock all use the exact same underlying menu data.

Why Another User May See Different Menu Items

If you look at a colleague's screen and notice they have more (or fewer) navigation options than you, it is not because they are using a different layout.

Menu visibility is controlled strictly by Permissions. The system dynamically filters the navigation menu before it reaches your screen. If your role does not have the authorization to access the "Leave Analytics" module, that module will be completely hidden from your Sidebar, Floating panel, and Dock.

---

Troubleshooting

Problem	Likely Cause	What To Do
I cannot find the Navigation selector.	You might be inside an isolated hub (like Organization Settings or the Experience Manager).	Click "Back to Dashboard" or exit the settings hub. The selector is in the main application profile menu.
I switched to Dock but nothing changed.	You may have experienced a brief network disconnect while saving the preference.	Refresh the page and try clicking the option again.
My navigation changed when I looked at it on my phone.	Optima Orbit automatically overrides desktop navigation on narrow screens.	This is expected behavior to keep the app usable on touch devices.
My colleague has a module in their Sidebar that I don't.	Your colleague has a different Security Role or Permission set than you.	Changing your layout to match theirs will not reveal the module. You must request access from an administrator.

Frequently Asked Questions

Does the page reload when I switch layouts? No. The interface updates instantly without interrupting your work.

What is the default layout? The Sidebar is the default layout for all new Optima Orbit users.

Does changing my layout hide modules? No. Every layout provides access to the exact same set of pages your account is authorized to see.

Is my choice remembered? Yes. Your preference is synced to the backend and will follow you across different browsers and devices.

---

Technical Reference

How nav_mode Works Internally

The navigation layout preference is managed completely dynamically by the frontend application shell.

1. User Selection: The user selects a mode inside <UserDropdown />.
2. Preference Store Update: The updatePreferences({ nav_mode: mode }) function is called.
3. Zustand & Persistence: The global usePreferenceStore (Zustand) is updated. This store uses the persist middleware, which immediately writes the state to localStorage (key: user-preferences-storage).
4. Backend Synchronization: Simultaneously, the store fires an asynchronous api.put('/user/preferences') request to persist the setting in the Optima Orbit backend.
5. Layout Decision: The master <DashboardLayout /> component subscribes to the store. Based on the navMode state, it conditionally renders either the <aside> (Sidebar), <FloatingNav />, or <MacDock /> component. The active menu items are passed down to these components via the /user/menu API response, which has already been securely filtered based on the user's backend permissions.

Implementation References

Component / Logic	Source Path
User Dropdown Component	src/components/DashboardLayout.tsx
Preference Store & Hook	src/store/preferenceStore.ts
Store Interface	nav_mode: 'sidebar' | 'floating' | 'dock'
Persistence Key	user-preferences-storage (localStorage)
Backend API Sync	api.put('/user/preferences')
Master Layout Component	src/components/DashboardLayout.tsx

Related Features

• Roles and Permissions
• Signing In