Skip to main content

Main Navigation Structure

Learn about the Stripes navigation system, including the collapsible sidebar menu, role-based access, and navigation patterns.

Stripes uses a hierarchical navigation system designed to organize functionality according to operational workflows and user roles. The navigation adapts dynamically based on user permissions and current context.

Structure and Organization​

The main navigation is organized into three primary modules that reflect the operational phases of stocktaking:

📊 Dashboard
├── 🎯 Execution Module
│   ├── Project Dashboard
│   │   ├── Live Statistics
│   │   └── Dashboard Overview
│   ├── Planning
│   ├── Scans
│   ├── Export
│   ├── QM Module
│   │   ├── QM Scans
│   │   └── QM Zones
│   └── Project Management
│       ├── Project Close
│       ├── Project Reopen
│       └── Project Restore
├── 🔧 Preparation Module
│   ├── Import
│   ├── Database
│   ├── Registrations
│   ├── Zones
│   ├── Introduction
│   └── Project Opening
└── ⚙️ System Module
    ├── Teams
    ├── Users
    ├── Clients
    ├── Branches
    ├── Projects
    ├── Settings
    ├── Devices
    ├── Device Groups
    └── System Import

Collapsible Menu System​

Collapse Behavior​

  • Auto-collapse: Menu automatically collapses on smaller screens
  • Manual toggle: Users can collapse/expand the sidebar manually
  • State persistence: Collapse state is remembered across sessions
  • Responsive design: Menu adapts to different screen sizes

Visual Indicators​

  • Active states: Current page highlighted with distinct styling
  • Expanded sections: Icons indicate which sections are open
  • Breadcrumb support: Current location shown in page header
  • Loading states: Visual feedback during navigation

Role-Based Menu Display​

Dynamic Menu Items​

The navigation menu adapts based on user roles and permissions:

superAdmin View:

  • All modules and functions visible
  • System-wide access indicators
  • Global settings and management options

admin View:

  • Client-scoped module access
  • Limited system functions
  • Client-specific settings

teamAdmin View:

  • Team-focused functionality
  • Limited system access
  • Project management for assigned teams

Project Roles:

  • Context-sensitive navigation during active projects
  • Task-focused menu items
  • Simplified interface for operational users

Permission-Based Hiding​

  • Unauthorized items: Hidden completely from users without access
  • Disabled states: Some items shown but disabled with tooltips explaining why
  • Progressive disclosure: Advanced features revealed as users gain experience

Top Toolbar Navigation​

Toolbar Components​

Left Section​

  • Menu toggle: Collapse/expand sidebar navigation
  • Breadcrumb trail: Current location hierarchy
  • Context switcher: Quick project/client switching

Center Section​

  • Search functionality: Global search across accessible content
  • Quick actions: Frequently used functions
  • Context-specific tools: Tools relevant to current page

Right Section​

  • Notifications: Real-time alerts and updates
  • User menu: Profile, settings, and logout
  • Language selector: Multi-language support
  • Help access: Context-sensitive help and documentation

Notification System​

Notification Types​

  • Real-time alerts: Live updates from ongoing operations
  • System notifications: Important system messages
  • Task reminders: Personal task and deadline notifications
  • Error alerts: Critical issues requiring attention

Notification Behavior​

  • Badge indicators: Unread count display
  • Auto-dismiss: Some notifications automatically clear
  • Persistence: Important notifications remain until acknowledged
  • Categorization: Different types with distinct styling

Notification Management​

  • Mark as read: Individual or bulk actions
  • Filtering: View by type or importance
  • History: Access to previous notifications
  • Settings: Customize notification preferences

Context-Sensitive Navigation​

Project Context​

Active Project Navigation​

When working within a project, the navigation adapts to show:

  • Project-specific dashboard: Live project statistics
  • Active zones: Quick access to assigned work areas
  • Team members: Current project team and status
  • Project tools: Tools specific to current project phase

Project State Indicators​

  • Project status: Visual indicators of project state
  • Progress indicators: Completion percentage and milestones
  • Active sessions: Current user sessions and activities
  • Quality status: QM approval states and requirements

Module Context​

Execution Module Context​

  • Active operations: Currently running scans and verifications
  • Zone assignments: Personal and team zone allocations
  • Quality queue: Items requiring quality review
  • Export readiness: Available exports and completion status

Preparation Module Context​

  • Import status: Current import operations and history
  • Configuration state: Setup completion indicators
  • Validation results: Data quality and integrity checks
  • Readiness indicators: Project launch preparation status

System Module Context​

  • Administrative tasks: Pending approvals and configurations
  • User management: Active sessions and user status
  • System health: Performance and operational indicators
  • Maintenance status: System updates and maintenance windows

Mobile Navigation​

Responsive Design​

Breakpoints​

  • Desktop (>1200px): Full sidebar with expanded menu items
  • Tablet (768px-1200px): Collapsed sidebar with icons
  • Mobile (≤768px): Hidden sidebar with hamburger menu

Mobile-Specific Features​

  • Touch-optimized: Larger touch targets for mobile devices
  • Swipe gestures: Navigate between sections with swipes
  • Bottom navigation: Quick access to primary functions
  • Pull-to-refresh: Update data with pull gesture

Mobile Menu Patterns​

Hamburger Menu​

  • Three-line icon: Standard mobile menu indicator
  • Slide-out panel: Full-screen menu overlay
  • Quick access: Most important functions prominently displayed
  • Search integration: Search functionality in mobile menu

Tab Navigation​

  • Bottom tabs: Primary navigation for mobile users
  • Icon-based: Clear visual indicators for each section
  • Badge support: Notification indicators on tabs
  • Active state: Clear indication of current location

Search and Quick Access​

Search Scope​

  • Content search: Find information across all accessible modules
  • Entity search: Locate specific projects, users, clients, etc.
  • Action search: Find functions and features by name
  • Help search: Locate documentation and help content

Search Features​

  • Auto-complete: Suggestions as user types
  • Filters: Refine results by type, date, or location
  • Recent searches: Quick access to previous searches
  • Bookmarks: Save frequently accessed items

Quick Access Features​

Favorites System​

  • Bookmark pages: Save frequently accessed pages
  • Custom shortcuts: Create personal navigation shortcuts
  • Recent items: Access recently visited content
  • Quick actions: One-click access to common tasks

Keyboard Navigation​

  • Keyboard shortcuts: Quick navigation with key combinations
  • Focus management: Proper keyboard focus indicators
  • Accessibility: Screen reader and keyboard-only support
  • Custom hotkeys: User-configurable shortcuts

Loading Optimization​

Progressive Loading​

  • Critical path: Load essential navigation first
  • Lazy loading: Load secondary menu items on demand
  • Caching: Cache navigation structure for faster access
  • Preloading: Anticipate user navigation patterns

Performance Indicators​

  • Loading states: Visual feedback during navigation
  • Progress indicators: Show loading progress for slow operations
  • Error states: Clear indication when navigation fails
  • Retry mechanisms: Options to retry failed navigation

Accessibility Features​

Screen Reader Support​

  • ARIA labels: Proper accessibility labels for all navigation elements
  • Landmark roles: Structural navigation for assistive technology
  • Skip links: Quick navigation to main content
  • Focus management: Logical tab order and focus indicators

Visual Accessibility​

  • High contrast: Support for high contrast themes
  • Zoom support: Navigation scales properly with zoom
  • Color independence: Navigation doesn't rely solely on color
  • Text alternatives: Alt text for all navigation icons

User Experience Guidelines​

Consistency​

  • Predictable patterns: Navigation behaves consistently across modules
  • Visual consistency: Similar elements styled consistently
  • Interaction consistency: Similar actions work the same way everywhere
  • Location consistency: Important functions always in same location

Clarity​

  • Clear labeling: Navigation items have descriptive, understandable names
  • Visual hierarchy: Important items are visually prominent
  • Grouping: Related functions grouped logically
  • Status indication: Clear indication of current location and state

Performance Guidelines​

Efficiency​

  • Minimal clicks: Common tasks accessible with few clicks
  • Shortcuts: Keyboard and mouse shortcuts for power users
  • Bulk actions: Efficient handling of multiple items
  • Quick switching: Fast context switching between projects/clients

Reliability​

  • Error handling: Graceful handling of navigation errors
  • Fallback options: Alternative access methods for failed navigation
  • Session management: Navigation state preserved across sessions
  • Offline support: Basic navigation available offline