Appearance

SideBar Component ​

File Information ​

  • Path: app/components/global/SideBar.vue
  • Purpose: Left sidebar navigation with menu items, collapsible functionality, and responsive design
  • Type: Global Component

Overview ​

The SideBar component provides the main left navigation sidebar for the application. It includes main menu items, browse menu items, and supports collapsible/mini mode for space optimization.

Features ​

  • Main Menu: Primary navigation items (Dashboard, Search, etc.)
  • Browse Menu: Secondary navigation items (Folders, Collages, etc.)
  • Collapsible: Toggle between full and mini sidebar
  • Responsive: Temporary drawer on mobile, persistent on desktop
  • Loading States: Skeleton loaders during content load
  • Active State: Highlights active route
  • Tooltips: Shows menu item names in mini mode
  • Permission-Based: Menu items visibility based on user permissions

Props ​

This component does not accept props. It uses composables to access data and state.

Composables Used ​

  • useCollageSidebar() - Sidebar logic, state, and menu routes

Key Functionality ​

  • Main menu routes (Dashboard, Search, Sharing, Profile)
  • Browse menu routes (Folders, Collages, etc.)
  • Routes visibility controlled by permissions
  • Active route highlighting

Toggle Functionality ​

  • Desktop: Toggle button appears on hover
  • Mobile: Toggle button always visible
  • Mini mode: Shows only icons, hides text
  • Smooth transitions
  • Handles route navigation
  • Supports external links
  • Active state management
  • Context menu prevention

Loading States ​

  • Skeleton loaders for menu items
  • Shows during initial content load
  • Prevents layout shift

Usage Example ​

vue
<template>
  <SideBar />
</template>

<script setup lang="ts">
// SideBar is auto-imported in Nuxt
// No explicit import needed
</script>

Styling ​

Uses global SCSS classes:

  • .leftSidebar - Main sidebar container
  • .leftSidebarMini - Mini/collapsed state
  • .sidebar-menu - Menu list container
  • .main-menu - Main menu section
  • .menu-list-item - Menu item styling
  • .toggleMenu - Toggle button

Responsive Behavior ​

Desktop (min-width: 1280px) ​

  • Persistent sidebar (300px width)
  • Mini mode (92px width)
  • Toggle button on hover

Mobile (max-width: 1280px) ​

  • Temporary drawer
  • Overlay on open
  • Toggle button always visible