Appearance

Left Menu Component ​

File Information ​

  • Path: components/theme/global/LeftMenu.vue
  • Purpose: Left sidebar navigation menu with logo, menu items, and create actions
  • Type: Global Theme Component

Overview ​

The Left Menu component provides the main navigation sidebar for the application, including logo, workspace navigation, create actions menu, menu links, and bottom logo. It supports collapsed/mini mode and drag-and-drop functionality.

Key Features ​

  1. Logo and Branding

    • Application logo with favicon
    • Logo text
    • Link to dashboard
    • Collapsible logo area

  2. Create Actions Menu

    • "New" button with dropdown
    • Permission-based menu items
    • Create asset, folder, collage options
    • Storage full indicator

  3. Navigation Menu

    • Menu links based on permissions
    • Active route highlighting
    • Icon support
    • Nested menu support

  4. Collapsed/Mini Mode

    • Toggle between full and mini sidebar
    • Icon-only display in mini mode
    • Smooth transitions

  5. Drag and Drop

    • Supports file drop on sidebar
    • Drag over/enter/leave handlers

Props ​

This component does not accept props. It uses Vuex store and authentication for data.

Data Properties ​

javascript
{
  drawer: boolean,            // Sidebar open/close state
  mini: boolean,              // Mini/collapsed state
  contentLoading: boolean,    // Initial content loading
  isHovered: boolean,         // Logo hover state
  visibleCreateNewRoutes: array,  // Create menu items
  storageFull: boolean       // Storage full indicator
}

Computed Properties ​

auth ​

Access to authentication state:

  • User information
  • Workspace access
  • Permissions

visibleCreateNewRoutes ​

Filtered create menu items based on permissions:

  • Checks user access for each route
  • Filters out inaccessible items
  • Returns array of menu items with icons and routes

Methods ​

toggleDrawer() ​

Toggles sidebar open/close state:

  • Updates drawer state
  • Persists state if needed

onSidebarDrop(event) ​

Handles file drop on sidebar:

  • Prevents default behavior
  • Processes dropped files
  • Triggers appropriate action

Navigates to create route:

  • Checks storage limits
  • Navigates to route
  • Closes search bar if open

closeSearchBar() ​

Closes search bar if open:

  • Emits close event
  • Updates search state

Components Used ​

  • FaviconIcon - Favicon SVG component
  • LogoTextIcon - Logo text SVG component
  • ToggleIcon - Toggle icon SVG component
  • PlusIcon - Plus icon SVG component
  • v-navigation-drawer - Vuetify navigation drawer
  • v-list - Vuetify list component
  • v-menu - Vuetify menu component
  • v-skeleton-loader - Vuetify skeleton loader
javascript
{
  title: string,             // Menu item title
  routeName: string,          // Route name
  icon: Component,            // Icon component
  replace: boolean,           // Replace route
  access: boolean             // Permission check
}

Usage Examples ​

Basic Usage ​

vue
<template>
  <LeftMenu />
</template>

<script>
import LeftMenu from '~/components/theme/global/LeftMenu.vue'

export default {
  components: {
    LeftMenu
  }
}
</script>

In Layout ​

vue
<template>
  <v-app>
    <LeftMenu />
    <v-main>
      <!-- Page content -->
    </v-main>
  </v-app>
</template>

Styling ​

Uses CSS classes:

  • .leftSidebar - Main sidebar container
  • .leftSidebarMini - Mini/collapsed state
  • .logo-container - Logo area
  • .leftSidebarLink - Menu links container
  • .addBtn - Create button
  • .optionMenuList - Dropdown menu list

Integration Points ​

  • Layout Components: Used in main application layout
  • Vuex Store: Accesses user and workspace state
  • Auth: Checks permissions
  • Router: Navigation handling
  • EventBus: Search bar events

Notes for Development ​

  • Permission-based menu items
  • Supports drag and drop
  • Collapsible sidebar
  • Storage limit checking
  • Skeleton loaders for loading states