Skip to main content

Navigation Configuration

The Trading Assistant uses a role-based navigation system that adapts to different user types: Traders, Admins, and Subscribers.

User Roles​

Trader (Authenticated Users)​

Full access to trading features, portfolio management, and analysis tools.

Main Navigation:

  • Dashboard
  • Portfolio
  • Watchlist
  • Analysis
  • Trading
  • Research
  • Settings

Admin​

System administration and user management capabilities.

Admin Navigation:

  • Dashboard
  • Users
  • Config
  • Database
  • Billing
  • Usage
  • Deployment

Subscriber (Unauthenticated)​

Access to marketing pages and authentication flows.

Public Navigation:

  • Home
  • About
  • Pricing
  • Contact
  • Login
  • Sign Up

Route Structure​

/
├── (auth)/                 # Trader routes (requires auth)
│   ├── dashboard/
│   ├── portfolio/
│   ├── watchlist/
│   ├── analysis/
│   ├── trading/
│   ├── research/
│   └── settings/
│
├── (marketing)/           # Public routes
│   ├── home/
│   ├── about/
│   ├── pricing/
│   ├── contact/
│   ├── login/
│   └── signup/
│
└── admin/                # Admin routes (requires admin role)
    ├── dashboard/
    ├── users/
    ├── config/
    ├── database/
    ├── billing/
    ├── usage/
    └── deployment/

Layout Components​

Trader Layout​

  • Top navigation bar with app logo
  • User profile dropdown
  • Role indicator badge
  • Search functionality
  • Notification center

Admin Layout​

  • Admin-specific sidebar
  • System status indicators
  • Quick actions menu
  • User impersonation tools

Marketing Layout​

  • Simple header with CTA buttons
  • Footer with links and social media
  • Cookie consent banner
  • Newsletter signup

Route Guards​

Authentication and authorization are handled by SvelteKit hooks:

// Check authentication status
// Redirect to login if not authenticated
// Verify role permissions
// Handle unauthorized access

Navigation state is managed through:

  • URL parameters
  • Query strings
  • Session storage
  • Layout data

Mobile Navigation​

Responsive navigation adapts for mobile devices:

  • Hamburger menu for small screens
  • Bottom navigation bar on mobile
  • Swipe gestures for drawer navigation
  • Touch-optimized tap targets

Learn More​