Navigation Basics - Getting Started

App Layout

TotalApp uses a three-region layout that stays fixed across every screen. Understanding where each region lives saves you time every day.

mode chip · lang · notifications

(fixed)

PAGE CONTENT AREA (scrollable) Active screen renders here

Fixed Sidebar (left)

Displays the navigation items for the current App Mode. Collapses to icon-only when you click the expand/collapse toggle at the bottom. On mobile it slides in as an overlay.

Fixed Header (top, h-12)

Always visible regardless of scroll position. Shows the current page title on the left and global controls (mode switcher, language, notifications, settings) on the right.

Page Content Area

The remaining space after the header and sidebar. Each screen occupies this area. Most screens center their content to a maximum width (64 rem or 80 rem) for readability.

Pro Tip

The sidebar and header use glassmorphism — they are semi-transparent and blur the content behind them. This means your page content stays visible even when overlapping menus or panels slide in.

The Sidebar

The sidebar is your primary navigation tool. It shows only the screens that belong to the currently active App Mode, keeping the list short and focused.

Navigation Items

Click any item to immediately switch to that screen — no page reload required.
The active screen is highlighted with a primary-coloured left border.
Items are grouped by module (e.g. PM, HR, Finance). Groups can be collapsed.

The "+" Manage Screens Button

At the top or bottom of the sidebar you will find a "+" icon button. Clicking it opens the Manage Screens modal, which lets you add or remove screens from the current mode's sidebar. See the Manage Screens section below for full details.

Expand / Collapse

A small toggle at the bottom of the sidebar switches between full-width (icon + label) and icon-only mode. In icon-only mode, hovering over an item shows a tooltip with the screen name.

Mobile Sidebar

On screens narrower than the sm breakpoint (640 px), the sidebar is hidden. Tap the hamburger icon () in the header to slide it in as a full-height overlay. Tap anywhere outside the sidebar to dismiss it.

Sidebar Filtering

Switching App Modes instantly refilters the sidebar. If a screen is pinned to multiple modes it appears in each. This is controlled per-mode in Settings → My Apps.

The Header

The 48 px (h-12) header strip runs the full width of the viewport and is always visible. It contains global controls that work regardless of which screen is active.

Mode Switcher Chip

A pill-shaped chip showing the current App Mode name and colour. Click it once to cycle to the next mode. The chip colour changes to match the mode's identity.

Language Toggle

Switches the entire UI between English and Turkish (TR) instantly. All labels, placeholders, and navigation items update immediately — no page reload needed.

Notification Bell

Shows in-app notifications for completed AI jobs, workflow executions, and background tasks. A badge count appears when there are unread notifications.

AI / Settings Access

Quick-access buttons for AI Assistant settings and the main Settings page. Clicking the gear icon takes you directly to Settings without navigating via the sidebar.

Current Page Title

The left side of the header displays the title of the active screen. This updates automatically whenever you navigate to a different screen, so you always know where you are in the app.

Manage Screens

The Manage Screens modal gives you full control over which screens appear in each App Mode's sidebar. Open it by clicking the "+" button in the sidebar.

How It Works

Screens are grouped into categories that mirror the landing page (Workspace, PM, HR, Finance, Developer, Creator, Marketing, etc.).
Each screen has a toggle — flip it on to add the screen to the current mode's sidebar, off to remove it.
Changes take effect immediately; no save button is required.
Screens marked Soon are greyed out and cannot be toggled — they are planned but not yet implemented.

Reordering Screens

Within a mode you can reorder the sidebar items by dragging them in the Manage Screens modal. The new order is persisted across sessions.

Mode-Exclusive Screens

Some screens are exclusive to a specific mode (e.g. HR screens are only available in HR mode). Attempting to add them to an incompatible mode will have no effect — the toggle is disabled with an explanatory tooltip.

Note on "Soon" Items

Greyed-out "Soon" tiles are visible in the modal so you can see what is coming. They cannot be toggled on and will not appear in the sidebar until the feature ships.

The Landing Page

The Landing Page (home screen) is your visual overview of every feature in TotalApp. Navigate to it by clicking the logo in the top-left corner of the header or sidebar.

Feature Cards

Each implemented screen has a colourful card showing its icon, name, and a short description. Click any card to jump directly to that screen — TotalApp switches to the correct mode automatically if needed.

Category Sections

Cards are grouped into sections matching the App Mode categories: Call Center, Workspace, Automation, Creator Tools, Developer Tools, Analytics, PM, HR, Finance, Marketing, and more. Scroll down to browse all available modules.

Mode Filter

At the top of the landing page a row of mode filter chips lets you narrow the display to a single category. Click "All" to reset. The filter is useful for quickly locating tools in a large deployment.

Compact vs Detailed View

A LayoutList / LayoutGrid toggle in the landing page header switches between a detailed card view (icon + title + description) and a compact icon-grid view. The compact view fits many more tools on screen at once.

Mobile Navigation

TotalApp is designed mobile-first. On small screens the layout adapts so the interface remains fully functional without a physical keyboard or large display.

Sidebar Hidden on Mobile

Below the sm breakpoint (640 px) the sidebar is completely hidden to preserve screen real estate. Tap the hamburger icon in the header to open the sidebar overlay.

Mobile Nav Dropdown

Screens that have their own internal left navigation (HR, Finance, Accounting, Project Management) show a compact dropdown at the top of the content area on mobile. This dropdown lists all the sub-views of that screen so you can switch between them without the sidebar.

Responsive Grid

All grids start at mobile column counts (e.g. grid-cols-2 or grid-cols-3) and expand on wider breakpoints. Nothing requires horizontal scrolling on a phone.

Filter Bars Wrap

Category and filter button bars use flex-wrap so pills wrap to multiple rows on small screens rather than scrolling off-screen.

Internal Sidebars

Module-internal left sidebars (HR, Finance, Accounting) are hidden on mobile and replaced with a styled <select> dropdown that contains the same navigation options.

Tip — Full Feature Access on Mobile

Every feature available on desktop is also accessible on mobile. The layout adapts but no screens are disabled on small devices.

Frequently Asked Questions

Why does the sidebar only show some of the screens I know TotalApp has?

The sidebar is filtered to the screens assigned to your currently active App Mode. Switching modes via the header chip instantly refilters the list. If a screen you expect is missing, open the "+" Manage Screens modal and check whether it's toggled on for the active mode, or switch to the mode it's exclusive to (e.g. HR-only screens only appear in HR mode).

I toggled a screen on in Manage Screens but it disappeared again later — why?

Some screens are mode-exclusive. If you add a screen to a mode it isn't compatible with, the toggle has no effect and reverts, with an explanatory tooltip on hover. Also double-check you're viewing the correct App Mode — the Manage Screens modal edits the sidebar for whichever mode is currently active, not all modes at once.

What does a greyed-out "Soon" item in Manage Screens mean?

"Soon" items are features that are planned but not yet implemented. They're shown so you know what's coming, but their toggle is disabled — you cannot add them to your sidebar until the feature ships and the badge is removed.

How do I navigate TotalApp on my phone without a sidebar?

Below the 640px breakpoint the sidebar hides automatically. Tap the hamburger icon in the header to slide it in as a full-height overlay, then tap outside it to dismiss. Screens with their own internal navigation (HR, Finance, Accounting, Project Management) additionally show a compact dropdown at the top of the content area so you can switch sub-views without needing the main sidebar at all.