XiriGo Admin DocsNavigation & Layout
Understand the Admin Panel layout, sidebar navigation, and how to find your way around.
Navigation & Layout
The XiriGo Admin Panel uses a clean, structured layout with a collapsible sidebar, top header bar, and breadcrumb navigation. The interface is fully responsive and works on desktop, tablet, and mobile browsers.
Layout Overview
The panel is organized into three main areas:
| Area | Location | Purpose |
|---|---|---|
| Sidebar | Left side | Primary navigation to all modules, organized by functional group |
| Top Header | Top of page | User profile, logout, global search, notifications |
| Content Area | Center/right | Main workspace where module content is displayed |
Sidebar Navigation
The sidebar is the primary way to navigate between modules. It is organized into logical groups that reflect your workflow:
- Dashboard — Platform KPIs, trends, alerts, and recent activity
- Vendors — Vendor lifecycle management, plans, subscriptions
- Orders — All platform orders, returns, exchanges, claims
- Products — Product catalog, moderation, categories, brands
- Customers — Customer accounts, groups, activity history
- Commission — Commission rules, tiers, and reports
- Payouts — Vendor payout tracking and management
- Transactions — Full platform transaction ledger
- Disputes — Buyer-vendor dispute resolution
- Content — Banners and announcements management
- Reviews — Review moderation queue
- Q&A — Product Q&A moderation
- Campaigns — Promotional campaigns and analytics
- Coupons — Platform-wide coupon management
- Loyalty — XiriPoints, tiers, challenges, badges
- Performance — Sales, vendor, and customer analytics
- Reports — Exportable reports (CSV/Excel)
- Search — Search analytics and merchandising
- Settings — Platform configuration and API keys
- Audit — Audit logs, admin users, session management
Sidebar Behavior
- Collapse/expand — Click the toggle icon at the top of the sidebar to collapse it into icon-only mode, giving you more screen space for the content area.
- Active indicator — The currently active module is highlighted with the primary brand color and a left border accent.
- Group headers — Section headers (Marketplace, Finance, etc.) can be expanded or collapsed to reduce visual clutter.
Top Header Bar
The top header bar provides quick access to global actions:
| Element | Description |
|---|---|
| Breadcrumbs | Shows your current location in the navigation hierarchy (e.g., Marketplace > Vendors > Vendor Detail) |
| Global Search | Quick search across all modules — type to find vendors, orders, products, or customers by ID or name |
| Notifications Bell | Shows pending alerts: new vendor applications, unresolved disputes, failed payouts |
| User Avatar | Click to see your profile info, switch theme (light/dark), or log out |
Breadcrumb Navigation
Every page displays a breadcrumb trail at the top of the content area. Breadcrumbs let you:
- See exactly where you are in the module hierarchy
- Click any parent level to navigate back without losing context
- Quickly return to the module list from a detail page
Example path: Dashboard > Vendors > Acme Electronics > Performance
Responsive Design
The Admin Panel adapts to different screen sizes:
Desktop
Full sidebar visible. Content area uses multi-column layouts for data tables and dashboards.
Tablet
Sidebar collapses by default. Tap the hamburger menu to open it as an overlay. Tables scroll horizontally.
Mobile
Sidebar is hidden behind the hamburger menu. Single-column layout. Cards stack vertically.
Use keyboard shortcut Cmd+K (Mac) or Ctrl+K (Windows/Linux) to open the global search from anywhere in the panel.
Theme Support
The Admin Panel supports both light and dark themes. Toggle your preference by clicking your user avatar in the top header and selecting your preferred theme. Your choice is saved to your browser and persists across sessions.