Account Settings Left Menu Component

File Information

• Path: components/theme/settings/AccountSettingsLeftMenu.vue
• Purpose: Left navigation menu for workspace settings pages
• Type: Settings Theme Component

Overview

The Account Settings Left Menu component provides navigation for workspace settings pages, including workspace selector (for multi-workspace users), general settings menu, subscription settings, and skeleton loaders for loading states.

Key Features

1. Workspace Selector

   • Dropdown for workspace selection
   • Only shown for multi-workspace users
   • Updates route on change

2. Settings Menu

   • General settings menu items
   • Permission-based visibility
   • Active route highlighting
   • Nested menu support

3. Loading States

   • Skeleton loaders for workspace select
   • Skeleton loaders for menu items
   • Conditional rendering

4. Permission Handling

   • Checks user access for each menu item
   • Filters inaccessible items
   • Respects workspace permissions

Props

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

Data Properties

{
  contentLoading: boolean,        // Initial content loading
  internal_workspace_id: number, // Selected workspace ID
  generalSettings: array,        // General settings menu items
  fetchingInstances: boolean      // Instance fetching state
}

Computed Properties

workspaceList

List of accessible workspaces:

• Filters user's accessible workspaces
• Formats for dropdown display
• Returns array with id and text

user

Current user from authentication:

• User permissions
• Workspace access
• Settings access flags

damInstanceId

Current DAM instance ID:

• From route params or store
• Used for route generation

routeInstanceId

Instance ID from route:

• Extracted from route params
• Used for conditional menu display

Methods

updateRouteWp(workspaceId)

Updates route when workspace changes:

• Navigates to same route with new workspace ID
• Preserves route name and other params
• Updates internal workspace ID

getRouteParams(menu)

Generates route params for menu item:

• Includes workspace ID
• Includes instance ID if needed
• Returns route object

Components Used

• v-card - Card container
• v-select - Workspace selector
• v-list - Menu list
• v-list-item - Menu item
• v-skeleton-loader - Skeleton loader

Menu Item Structure

{
  name: string,              // Menu item name
  routeName: string,         // Route name
  access: boolean,           // Permission check
  routeName: string          // May include instance_id placeholder
}

Usage Examples

Basic Usage

<template>
  <AccountSettingsLeftMenu />
</template>

<script>
import AccountSettingsLeftMenu from '~/components/theme/settings/AccountSettingsLeftMenu.vue'

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

In Settings Layout

<template>
  <div class="settings-layout">
    <AccountSettingsLeftMenu />
    <div class="settings-content">
      <!-- Settings pages -->
    </div>
  </div>
</template>

Styling

Uses CSS classes:

• .general-setting-menu - Main menu container
• .general-setting-menu-select - Workspace selector area
• .optionMenuList - Menu list
• .optionMenuLink - Menu item link
• .link-hover-active - Hover/active states

Integration Points

• Settings Pages: Used in workspace settings layout
• Vuex Store: Accesses user and workspace state
• Auth: Checks permissions
• Router: Navigation handling

Notes for Development

• Permission-based menu items
• Multi-workspace support
• Instance-aware routing
• Skeleton loaders for loading states
• Responsive design

Related Documentation

• Workspace Settings Pages - Settings pages
• Left Menu Component - Main navigation menu