Skip to content

Commit e8e4cb7

Browse files
author
Adelino Ngomacha
committed
chore: WIP on feat/dashboard-settings-page
1 parent 4002fdd commit e8e4cb7

File tree

6 files changed

+230
-126
lines changed

6 files changed

+230
-126
lines changed

‎libs/components/Dashboard/SettingsSidebar.vue

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
1+
<script setup lang="ts">
2+
import {SettingsMenuOption} from "stacks/types";
3+
4+
const props = defineProps<{ menuOptions?: SettingsMenuOption[] }>()
5+
6+
const menuOptions = computed(() => props.menuOptions || [])
7+
</script>
8+
19
<template>
210
<header class="lg:w-64 border-b border-gray-200 dark:border-gray-600 p-4 sm:p-6 lg:p-8">
311

@@ -128,6 +136,21 @@
128136
</nav>
129137

130138
<nav class="flex flex-1 flex-col">
139+
<ul
140+
role="list"
141+
class="-mx-2 mt-2 space-y-1"
142+
>
143+
<li v-for="(menu, index) in menuOptions" :key="index">
144+
<RouterLink
145+
:to="menu.path"
146+
class="sidebar-links group"
147+
>
148+
<div class="i-heroicons-rocket-launch text-gray-500 w-5 h-5 dark:text-gray-200 group-hover:text-gray-700 transition duration-150 ease-in-out" />
149+
{{menu.label}}
150+
</RouterLink>
151+
</li>
152+
</ul>
153+
131154
<ul
132155
role="list"
133156
class="flex flex-1 flex-col gap-y-8"
@@ -413,5 +436,3 @@
413436
@apply text-blue-600 text-sm rounded-md !important
414437
}
415438
</style>
416-
<script setup lang="ts">
417-
</script>

‎resources/types/settings.ts

Lines changed: 0 additions & 123 deletions
This file was deleted.

‎resources/views/dashboard/settings/[name].vue

Lines changed: 190 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,197 @@
11
<script setup lang="ts">
2+
const settingsMenuOptions = [
3+
{
4+
label: 'AI',
5+
path: 'ai',
6+
icon: {
7+
name: 'cpu-chip',
8+
source: 'heroicons',
9+
},
10+
},
11+
{
12+
label: 'Analytics',
13+
path: 'analytics',
14+
icon: {
15+
name: 'square-3-stack-3d',
16+
source: 'heroicons',
17+
},
18+
},
19+
{
20+
label: 'App',
21+
path: 'app',
22+
icon: {
23+
name: 'square-3-stack-3d',
24+
source: 'heroicons',
25+
},
26+
},
27+
{
28+
label: 'Cache',
29+
path: 'cache',
30+
icon: {
31+
name: 'square-3-stack-3d',
32+
source: 'heroicons',
33+
},
34+
},
35+
{
36+
label: 'CLI',
37+
path: 'cli',
38+
icon: {
39+
name: 'square-3-stack-3d',
40+
source: 'heroicons',
41+
},
42+
},
43+
{
44+
label: 'Cloud',
45+
path: 'cloud',
46+
icon: {
47+
name: 'square-3-stack-3d',
48+
source: 'heroicons',
49+
},
50+
},
51+
{
52+
label: 'Database',
53+
path: 'database',
54+
icon: {
55+
name: 'square-3-stack-3d',
56+
source: 'heroicons',
57+
},
58+
},
59+
{
60+
label: 'DNS',
61+
path: 'dns',
62+
icon: {
63+
name: 'square-3-stack-3d',
64+
source: 'heroicons',
65+
},
66+
},
67+
{
68+
label: 'Email',
69+
path: 'email',
70+
icon: {
71+
name: 'square-3-stack-3d',
72+
source: 'heroicons',
73+
},
74+
},
75+
{
76+
label: 'File System',
77+
path: 'file-system',
78+
icon: {
79+
name: 'square-3-stack-3d',
80+
source: 'heroicons',
81+
},
82+
},
83+
{
84+
label: 'Hashing',
85+
path: 'hashing',
86+
icon: {
87+
name: 'square-3-stack-3d',
88+
source: 'heroicons',
89+
},
90+
},
91+
{
92+
label: 'Languages',
93+
path: 'languages',
94+
icon: {
95+
name: 'square-3-stack-3d',
96+
source: 'heroicons',
97+
},
98+
},
99+
{
100+
label: 'Library',
101+
path: 'library',
102+
icon: {
103+
name: 'square-3-stack-3d',
104+
source: 'heroicons',
105+
},
106+
},
107+
{
108+
label: 'Native',
109+
path: 'native',
110+
icon: {
111+
name: 'square-3-stack-3d',
112+
source: 'heroicons',
113+
},
114+
},
115+
{
116+
label: 'Mail',
117+
path: 'mail',
118+
icon: {
119+
name: 'square-3-stack-3d',
120+
source: 'heroicons',
121+
},
122+
},
123+
{
124+
label: 'Queue',
125+
path: 'queue',
126+
icon: {
127+
name: 'square-3-stack-3d',
128+
source: 'heroicons',
129+
},
130+
},
131+
{
132+
label: 'Search Engine',
133+
path: 'search-engine',
134+
icon: {
135+
name: 'square-3-stack-3d',
136+
source: 'heroicons',
137+
},
138+
},
139+
{
140+
label: 'Search Engine',
141+
path: 'search-engine',
142+
icon: {
143+
name: 'square-3-stack-3d',
144+
source: 'heroicons',
145+
},
146+
},
147+
{
148+
label: 'Security',
149+
path: 'security',
150+
icon: {
151+
name: 'square-3-stack-3d',
152+
source: 'heroicons',
153+
},
154+
},
155+
{
156+
label: 'Services',
157+
path: 'services',
158+
icon: {
159+
name: 'square-3-stack-3d',
160+
source: 'heroicons',
161+
},
162+
},
163+
{
164+
label: 'Storage',
165+
path: 'storage',
166+
icon: {
167+
name: 'square-3-stack-3d',
168+
source: 'heroicons',
169+
},
170+
},
171+
{
172+
label: 'Team',
173+
path: 'team',
174+
icon: {
175+
name: 'square-3-stack-3d',
176+
source: 'heroicons',
177+
},
178+
},
179+
{
180+
label: 'UI',
181+
path: 'ui',
182+
icon: {
183+
name: 'square-3-stack-3d',
184+
source: 'heroicons',
185+
},
186+
},
187+
]
188+
2189
const router = useRouter()
3190
// get the [name] of current route
4191
const name = computed(() => router.currentRoute.value.params.name)
5192
193+
// const sideMenuOptions = computed(() => settingsMenuOptions)
194+
6195
// set the title of the page
7196
useHead({
8197
title: `Dashboard Settings - ${name.value}`,
@@ -12,7 +201,7 @@ useHead({
12201
<template>
13202
<main>
14203
<div class="flex gap-x-4">
15-
<SettingsSidebar />
204+
<SettingsSidebar :menu-options="settingsMenuOptions" />
16205

17206
<div class="container mx-auto">
18207
Generic Page here for settings {{ name }}

‎storage/framework/core/types/src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ export * from './scheduler'
5050
export * from './search-engine'
5151
export * from './security'
5252
export * from './services'
53+
export * from './settings-config.ts'
5354
export * from './sms'
5455
export * from './ssg'
5556
export * from './storage'

‎storage/framework/core/types/src/settings-config.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export type SettingsMenuOption = {
2+
label: string
3+
path: string
4+
icon?: MenuIcon
5+
}
6+
7+
export type MenuIcon = {
8+
name?: string
9+
source?: string
10+
}

0 commit comments

Comments
 (0)