nuxt-ui/playgrounds/nuxt/app/composables/useNavigation.ts at 28cc3f1b759533781a88cc38a638a0b1d5f8dc8d · maximepvrt/nuxt-ui · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
import { upperName } from '../utils'

const components = [
  'accordion',
  'alert',
  'auth-form',
  'avatar',
  'badge',
  'banner',
  'blog-post',
  'breadcrumb',
  'button',
  'calendar',
  'card',
  'carousel',
  'chat-message',
  'chat-reasoning',
  'chat-shimmer',
  'chat-tool',
  'changelog-version',
  'changelog-versions',
  'checkbox-group',
  'checkbox',
  'chip',
  'collapsible',
  'color-mode',
  'color-picker',
  'command-palette',
  'content/content-navigation',
  'content/content-surround',
  'content/content-toc',
  'context-menu',
  'drawer',
  'dropdown-menu',
  'editor',
  'empty',
  'error',
  'field-group',
  'file-upload',
  'footer',
  'form-field',
  'form',
  'header',
  'input-date',
  'input-menu',
  'input-number',
  'input-tags',
  'input-time',
  'input',
  'kbd',
  'link',
  'listbox',
  'locale',
  'marquee',
  'modal',
  'navigation-menu',
  'page-anchors',
  'page-card',
  'page-cta',
  'page-feature',
  'page-header',
  'page-hero',
  'page-links',
  'page-logos',
  'page-section',
  'pagination',
  'pin-input',
  'popover',
  'pricing-plan',
  'pricing-table',
  'progress',
  'radio-group',
  'scroll-area',
  'select-menu',
  'select',
  'separator',
  'shortcuts',
  'sidebar',
  'skeleton',
  'slideover',
  'slider',
  'stepper',
  'switch',
  'table',
  'tabs',
  'textarea',
  'timeline',
  'toast',
  'tooltip',
  'tree',
  'user'
].map(component => ({ label: upperName(component.split('/').pop() as string), icon: 'i-lucide-box', to: `/components/${component}` }))

export const useNavigation = () => {
  const appConfig = useAppConfig()

  const items = [{ label: 'Home', icon: 'i-lucide-home', to: '/' }, { label: 'Chat', icon: 'i-lucide-message-circle', to: '/chat' }]
  const groups = computed(() => [
    { id: 'links', items },
    { id: 'components', label: 'Components', items: components },
    {
      id: 'dir',
      label: 'Direction',
      items: [{
        label: 'LTR',
        icon: 'i-lucide-arrow-right',
        active: appConfig.dir === 'ltr',
        onSelect: () => appConfig.dir = 'ltr'
      }, {
        label: 'RTL',
        icon: 'i-lucide-arrow-left',
        active: appConfig.dir === 'rtl',
        onSelect: () => appConfig.dir = 'rtl'
      }]
    }
  ])

  return {
    components,
    groups,
    items
  }
}