Layout Types

File Information

• Path: app/types/layouts.ts
• Purpose: TypeScript interfaces for layout composables and sidebar
• Exported From: ~/types (via index.ts)

Overview

This file contains TypeScript interfaces for layout-related functionality including sidebar menu routes and view mode caching. These types ensure type safety for layout composables.

Type Definitions

Sidebar Types

MenuRoute

Sidebar menu route structure.

interface MenuRoute {
  title: string
  name: string
  icon: string
  slug?: string
  requireAccess?: boolean
  visible?: boolean
}

Properties:

• title: string - Menu item title
• name: string - Route name
• icon: string - Icon identifier
• slug?: string - Optional route slug
• requireAccess?: boolean - Require access permission
• visible?: boolean - Visibility flag

Usage:

import type { MenuRoute } from '~/types'

const menuRoutes: MenuRoute[] = [
  {
    title: 'Dashboard',
    name: 'brand_name-index',
    icon: 'dashboardIcon',
    visible: true
  },
  {
    title: 'Folders',
    name: 'brand_name-folders',
    icon: 'folderIcon',
    requireAccess: true,
    visible: true
  }
]

View Mode Cache Types

CachedViewMode

Cached view mode type.

type CachedViewMode = string | 'grid' | 'list'

Values:

• 'grid' - Grid view mode
• 'list' - List view mode
• string - Custom view mode identifier

Usage:

import type { CachedViewMode } from '~/types'

const viewMode: CachedViewMode = 'grid'

UseCachedViewModeOptions

Options for useCachedViewMode composable.

interface UseCachedViewModeOptions {
  defaultMode?: CachedViewMode
  identifier?: string | null
}

Properties:

• defaultMode?: CachedViewMode - Default view mode (default: 'grid')
• identifier?: string | null - Cache identifier (for page-specific caching)

Usage:

import type { UseCachedViewModeOptions } from '~/types'

const options: UseCachedViewModeOptions = {
  defaultMode: 'list',
  identifier: 'folders-page'
}

const { viewMode, setCachedViewMode } = useCachedViewMode(options)

Usage Examples

Sidebar Menu

import type { MenuRoute } from '~/types'

function getMenuRoutes(): MenuRoute[] {
  return [
    {
      title: 'Dashboard',
      name: 'brand_name-index',
      icon: 'dashboardIcon',
      visible: true
    },
    {
      title: 'Folders',
      name: 'brand_name-folders',
      icon: 'folderIcon',
      requireAccess: true,
      visible: true
    },
    {
      title: 'Collages',
      name: 'brand_name-collage',
      icon: 'collageIcon',
      visible: true
    }
  ]
}

View Mode Caching

import type { UseCachedViewModeOptions, CachedViewMode } from '~/types'

// Default usage
const { viewMode, setCachedViewMode } = useCachedViewMode()

// With options
const options: UseCachedViewModeOptions = {
  defaultMode: 'list',
  identifier: 'search-page'
}

const { viewMode, setCachedViewMode } = useCachedViewMode(options)

// Change view mode
setCachedViewMode('grid')

// Get current view mode
const currentMode: CachedViewMode = viewMode.value

Related Types

• Used by layout composables
• Used by sidebar components
• Used by view mode toggle components

Import Example

import type {
  MenuRoute,
  CachedViewMode,
  UseCachedViewModeOptions
} from '~/types'

Notes

• All layout types are exported from ~/types
• MenuRoute is used for sidebar navigation
• CachedViewMode supports both predefined and custom modes
• View mode caching uses localStorage
• Options allow page-specific view mode caching