Skip to content

Commit 20d782e

Browse files
johnleiderjohnleider
committed
docs: add nav and footer, lucide icons
1 parent ba6fb62 commit 20d782e

File tree

11 files changed

+189
-133
lines changed

11 files changed

+189
-133
lines changed

‎apps/docs/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"dependencies": {
2020
"@vuetify/0": "workspace:*",
2121
"@vuetify/paper": "workspace:*",
22+
"lucide-vue-next": "^0.525.0",
2223
"markdown-it-attrs": "^4.3.1",
2324
"unplugin-vue-components": "^28.7.0",
2425
"unplugin-vue-markdown": "^29.1.0",

‎apps/docs/src/App.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
</script>
44

55
<template>
6-
<div id="app" class="grid grid-cols-[220px_1fr] v0-theme--slate">
6+
<div class="grid grid-cols-[220px_1fr] v0-theme--slate">
77
<div />
88
<router-view />
99
</div>

‎apps/docs/src/components.d.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@ declare module 'vue' {
1010
export interface GlobalComponents {
1111
AppBar: typeof import('./components/app/AppBar.vue')['default']
1212
AppDivider: typeof import('./components/app/AppDivider.vue')['default']
13+
AppFooter: typeof import('./components/app/AppFooter.vue')['default']
14+
AppIcon: typeof import('./components/app/AppIcon.vue')['default']
15+
AppMain: typeof import('./components/app/AppMain.vue')['default']
1316
AppNav: typeof import('./components/app/AppNav.vue')['default']
1417
AppNavLink: typeof import('./components/app/AppNavLink.vue')['default']
1518
RouterLink: typeof import('vue-router')['RouterLink']

‎apps/docs/src/components/app/AppBar.vue‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
<script setup lang="ts">
2+
// Components
23
import { Atom } from '@vuetify/0'
34
5+
// Icons
6+
import { Github } from 'lucide-vue-next'
7+
8+
// Types
49
import type { AtomProps } from '@vuetify/0'
510
611
const { as = 'header' } = defineProps<AtomProps>()
@@ -9,13 +14,15 @@
914
<template>
1015
<Atom
1116
:as
12-
class="bg-4 app-header text-[#e0e0e0] flex flex-col h-[100vh] fixed w-[220px] overflow-y-auto pb-4"
17+
class="app-header flex items-center justify-end h-[48px] fixed top-0 left-[220px] right-0 px-3"
1318
>
14-
<slot />
19+
<a href="https://github.com/vuetifyjs/0" rel="noopener noreferrer" target="_blank">
20+
<Github class="bg-gray-800 text-white pa-1 rounded opacity-90 hover:opacity-100" :size="26" />
21+
</a>
1522
</Atom>
1623
</template>
1724

1825
<style lang="sass">
19-
.app-nav
20-
background-color: var(--v0-surfaceVariant)
26+
.app-header
27+
background-color: var(--v0-surfaceTint)
2128
</style>

‎apps/docs/src/components/app/AppFooter.vue‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<script setup lang="ts">
2+
// Components
3+
import { Atom } from '@vuetify/0'
4+
5+
// Types
6+
import type { AtomProps } from '@vuetify/0'
7+
8+
const { as = 'footer' } = defineProps<AtomProps>()
9+
</script>
10+
11+
<template>
12+
<Atom
13+
:as
14+
class="app-footer flex items-center justify-end h-[24px] fixed bottom-0 left-[220px] right-0 px-3 text-xs"
15+
>
16+
&copy; 2016-2025 Vuetify, LLC
17+
</Atom>
18+
</template>
19+
20+
<style lang="sass">
21+
.app-footer
22+
background-color: var(--v0-surfaceTint)
23+
</style>

‎apps/docs/src/components/app/AppMain.vue‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<script lang="ts" setup>
2+
//
3+
</script>
4+
5+
<template>
6+
<div class="pa-4 mt-[48px]">
7+
<router-view />
8+
</div>
9+
</template>

‎apps/docs/src/components/app/AppNav.vue‎

Lines changed: 122 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,135 @@
44
import type { AtomProps } from '@vuetify/0'
55
66
const { as = 'nav' } = defineProps<AtomProps>()
7+
8+
const navs = [
9+
{
10+
name: 'Introduction',
11+
children: [
12+
{ name: 'Welcome', to: '/introduction/welcome' },
13+
{ name: 'Frequently Asked', to: '/introduction/frequently-asked' },
14+
{ name: 'Contributing', to: '/introduction/contributing' },
15+
],
16+
},
17+
{ divider: true },
18+
{
19+
name: 'Guide',
20+
children: [
21+
{ name: 'Installation', to: '/guide/installation' },
22+
{ name: 'Structure', to: '/guide/structure' },
23+
{ name: 'Framework core', to: '/guide/framework-core' },
24+
{ name: 'Composables', to: '/guide/composables' },
25+
{ name: 'Components', to: '/guide/components' },
26+
{ name: 'Utilities', to: '/guide/utilities' },
27+
{ name: 'Plugins', to: '/guide/plugins' },
28+
{ name: 'Theming', to: '/guide/theming' },
29+
{ name: 'Accessibility', to: '/guide/accessibility' },
30+
],
31+
},
32+
{ divider: true },
33+
{
34+
name: 'Composables',
35+
to: '/composables',
36+
children: [
37+
{
38+
name: 'Foundation',
39+
children: [
40+
{ name: 'createContext', to: '/composables/foundation/create-context' },
41+
{ name: 'createTrinity', to: '/composables/foundation/create-trinity' },
42+
{ name: 'createPlugin', to: '/composables/foundation/create-plugin' },
43+
],
44+
},
45+
{
46+
name: 'Registration',
47+
children: [
48+
{ name: 'useRegistrar', to: '/composables/registration/use-registrar' },
49+
{ name: 'useTokens', to: '/composables/registration/use-tokens' },
50+
],
51+
},
52+
{
53+
name: 'Selection',
54+
children: [
55+
{ name: 'useFilter', to: '/composables/selection/use-filter' },
56+
{ name: 'useGroup', to: '/composables/selection/use-group' },
57+
{ name: 'useSingle', to: '/composables/selection/use-single' },
58+
{ name: 'useStep', to: '/composables/selection/use-step' },
59+
],
60+
},
61+
{
62+
name: 'Forms',
63+
children: [
64+
],
65+
},
66+
{
67+
name: 'System',
68+
children: [
69+
{ name: 'useKeydown', to: '/composables/system/use-keydown' },
70+
{ name: 'useLogger', to: '/composables/system/use-logger' },
71+
],
72+
},
73+
{
74+
name: 'Plugins',
75+
children: [
76+
{ name: 'useBreakpoints', to: '/composables/plugin/use-breakpoints' },
77+
{ name: 'useHydration', to: '/composables/plugin/use-hydration' },
78+
{ name: 'useLocale', to: '/composables/plugin/use-locale' },
79+
{ name: 'useStorage', to: '/composables/plugin/use-storage' },
80+
{ name: 'useTheme', to: '/composables/plugin/use-theme' },
81+
],
82+
},
83+
],
84+
},
85+
{ divider: true },
86+
{
87+
name: 'Components',
88+
to: '/components',
89+
children: [
90+
{ name: 'Atom', to: '/components/atom' },
91+
{ name: 'Avatar', to: '/components/avatar' },
92+
{ name: 'Breakpoints', to: '/components/breakpoints' },
93+
{ name: 'Context', to: '/components/context' },
94+
{ name: 'Hydration', to: '/components/hydration' },
95+
{ name: 'Popover', to: '/components/popover' },
96+
{ name: 'Step', to: '/components/step' },
97+
{ name: 'Theme', to: '/components/theme' },
98+
],
99+
},
100+
{ divider: true },
101+
{
102+
name: 'Utilities',
103+
children: [
104+
{ name: 'toReactive', to: '/utilities/to-reactive' },
105+
],
106+
},
107+
]
7108
</script>
8109

9110
<template>
10111
<Atom
11112
:as
12113
class="bg-4 app-nav text-[#e0e0e0] flex flex-col h-[100vh] fixed w-[220px] overflow-y-auto pb-4"
13114
>
14-
<slot />
115+
<img
116+
alt="Vuetify0 Logo"
117+
src="https://cdn.vuetifyjs.com/docs/images/logos/vzero-logo-dark.png"
118+
>
119+
120+
<ul class="flex gap-2 flex-col">
121+
<template v-for="(nav, i) in navs" :key="i">
122+
<div v-if="nav.divider" class="px-4">
123+
<AppDivider />
124+
</div>
125+
126+
<AppNavLink
127+
v-else
128+
:children="nav.children"
129+
class="px-4"
130+
:to="nav.to"
131+
>
132+
{{ nav.name }}
133+
</AppNavLink>
134+
</template>
135+
</ul>
15136
</Atom>
16137
</template>
17138

‎apps/docs/src/layouts/default.vue‎

Lines changed: 5 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -1,132 +1,10 @@
11
<script lang="ts" setup>
2-
const navs = [
3-
{
4-
name: 'Introduction',
5-
children: [
6-
{ name: 'Welcome', to: '/introduction/welcome' },
7-
{ name: 'Frequently Asked', to: '/introduction/frequently-asked' },
8-
{ name: 'Contributing', to: '/introduction/contributing' },
9-
],
10-
},
11-
{ divider: true },
12-
{
13-
name: 'Guide',
14-
children: [
15-
{ name: 'Installation', to: '/guide/installation' },
16-
{ name: 'Structure', to: '/guide/structure' },
17-
{ name: 'Framework core', to: '/guide/framework-core' },
18-
{ name: 'Composables', to: '/guide/composables' },
19-
{ name: 'Components', to: '/guide/components' },
20-
{ name: 'Utilities', to: '/guide/utilities' },
21-
{ name: 'Plugins', to: '/guide/plugins' },
22-
{ name: 'Theming', to: '/guide/theming' },
23-
{ name: 'Accessibility', to: '/guide/accessibility' },
24-
],
25-
},
26-
{ divider: true },
27-
{
28-
name: 'Composables',
29-
to: '/composables',
30-
children: [
31-
{
32-
name: 'Foundation',
33-
children: [
34-
{ name: 'createContext', to: '/composables/foundation/create-context' },
35-
{ name: 'createTrinity', to: '/composables/foundation/create-trinity' },
36-
{ name: 'createPlugin', to: '/composables/foundation/create-plugin' },
37-
],
38-
},
39-
{
40-
name: 'Registration',
41-
children: [
42-
{ name: 'useRegistrar', to: '/composables/registration/use-registrar' },
43-
{ name: 'useTokens', to: '/composables/registration/use-tokens' },
44-
],
45-
},
46-
{
47-
name: 'Selection',
48-
children: [
49-
{ name: 'useFilter', to: '/composables/selection/use-filter' },
50-
{ name: 'useGroup', to: '/composables/selection/use-group' },
51-
{ name: 'useSingle', to: '/composables/selection/use-single' },
52-
{ name: 'useStep', to: '/composables/selection/use-step' },
53-
],
54-
},
55-
{
56-
name: 'Forms',
57-
children: [
58-
],
59-
},
60-
{
61-
name: 'System',
62-
children: [
63-
{ name: 'useKeydown', to: '/composables/system/use-keydown' },
64-
{ name: 'useLogger', to: '/composables/system/use-logger' },
65-
],
66-
},
67-
{
68-
name: 'Plugins',
69-
children: [
70-
{ name: 'useBreakpoints', to: '/composables/plugin/use-breakpoints' },
71-
{ name: 'useHydration', to: '/composables/plugin/use-hydration' },
72-
{ name: 'useLocale', to: '/composables/plugin/use-locale' },
73-
{ name: 'useStorage', to: '/composables/plugin/use-storage' },
74-
{ name: 'useTheme', to: '/composables/plugin/use-theme' },
75-
],
76-
},
77-
],
78-
},
79-
{ divider: true },
80-
{
81-
name: 'Components',
82-
to: '/components',
83-
children: [
84-
{ name: 'Atom', to: '/components/atom' },
85-
{ name: 'Avatar', to: '/components/avatar' },
86-
{ name: 'Breakpoints', to: '/components/breakpoints' },
87-
{ name: 'Context', to: '/components/context' },
88-
{ name: 'Hydration', to: '/components/hydration' },
89-
{ name: 'Popover', to: '/components/popover' },
90-
{ name: 'Step', to: '/components/step' },
91-
{ name: 'Theme', to: '/components/theme' },
92-
],
93-
},
94-
{ divider: true },
95-
{
96-
name: 'Utilities',
97-
children: [
98-
{ name: 'toReactive', to: '/utilities/to-reactive' },
99-
],
100-
},
101-
]
2+
//
1023
</script>
1034

1045
<template>
105-
<AppNav>
106-
<img
107-
alt="Vuetify0 Logo"
108-
src="https://cdn.vuetifyjs.com/docs/images/logos/vzero-logo-dark.png"
109-
>
110-
111-
<ul class="flex gap-2 flex-col">
112-
<template v-for="(nav, i) in navs" :key="i">
113-
<div v-if="nav.divider" class="px-4">
114-
<AppDivider />
115-
</div>
116-
117-
<AppNavLink
118-
v-else
119-
:children="nav.children"
120-
class="px-4"
121-
:to="nav.to"
122-
>
123-
{{ nav.name }}
124-
</AppNavLink>
125-
</template>
126-
</ul>
127-
</AppNav>
128-
129-
<div class="m-4">
130-
<router-view />
131-
</div>
6+
<AppNav />
7+
<AppBar />
8+
<AppMain />
9+
<AppFooter />
13210
</template>

‎apps/docs/src/plugins/zero.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ export default function zero (app: App) {
1818
warning: '#f59e0b',
1919
background: '#f9fafb',
2020
surface: '#f3f4f6',
21+
surfaceTint: '#ececec',
2122
surfaceVariant: '#212121',
2223
},
2324
},

‎apps/docs/src/typed-router.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ declare module 'vue-router/auto-routes' {
2222
'/components/atom': RouteRecordInfo<'/components/atom', '/components/atom', Record<never, never>, Record<never, never>>,
2323
'/components/avatar': RouteRecordInfo<'/components/avatar', '/components/avatar', Record<never, never>, Record<never, never>>,
2424
'/components/breakpoints': RouteRecordInfo<'/components/breakpoints', '/components/breakpoints', Record<never, never>, Record<never, never>>,
25+
'/components/components': RouteRecordInfo<'/components/components', '/components/components', Record<never, never>, Record<never, never>>,
2526
'/components/context': RouteRecordInfo<'/components/context', '/components/context', Record<never, never>, Record<never, never>>,
2627
'/components/hydration': RouteRecordInfo<'/components/hydration', '/components/hydration', Record<never, never>, Record<never, never>>,
2728
'/components/popover': RouteRecordInfo<'/components/popover', '/components/popover', Record<never, never>, Record<never, never>>,

0 commit comments

Comments
 (0)