Skip to content

Commit bfa950a

Browse files
chrisbbreuerchrisbbreuer
committed
chore: wip
chore: wip
1 parent 85683a2 commit bfa950a

File tree

1 file changed

+54
-35
lines changed

1 file changed

+54
-35
lines changed

‎resources/components/Dashboard/Sidebar.vue

Lines changed: 54 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,20 @@
11
<script setup lang="ts">
2+
import { ref } from 'vue'
23
// import IconButton from './Buttons/IconButton.vue'
34
// import Dropdown from './Elements/Dropdown.vue'
5+
6+
// State for each section's collapse status
7+
const sections = ref({
8+
library: true,
9+
app: true,
10+
models: true,
11+
management: true
12+
})
13+
14+
// Toggle function for sections
15+
const toggleSection = (section: keyof typeof sections.value) => {
16+
sections.value[section] = !sections.value[section]
17+
}
418
</script>
519

620
<template>
@@ -30,34 +44,20 @@
3044
</li>
3145

3246
<li>
33-
<!-- <Dropdown
34-
label="Library"
35-
open
36-
:elements="[
37-
{ to: '/', label: 'Components' },
38-
{ to: '/', label: 'Functions' },
39-
{ to: '/', label: 'Composability' },
40-
{ to: '/', label: 'Publishing' },
41-
]"/> -->
42-
</li>
43-
44-
<li>
45-
<div class="flex items-center justify-between">
47+
<!-- Library Section -->
48+
<div class="flex items-center justify-between cursor-pointer" @click="toggleSection('library')">
4649
<div class="text-xs text-gray-400 font-semibold leading-6">
4750
Library
4851
</div>
4952

5053
<div
51-
class="i-hugeicons-arrow-down-01 h-4 w-4 text-gray-300 transition duration-150 ease-in-out dark:text-gray-200 group-hover:text-gray-700" />
54+
:class="[
55+
'i-hugeicons-arrow-down-01 h-4 w-4 text-gray-300 transition duration-150 ease-in-out dark:text-gray-200 group-hover:text-gray-700',
56+
{ 'transform -rotate-90': !sections.library }
57+
]" />
5258
</div>
5359

54-
<ul role="list" class="mt-2 -mx-2 space-y-1">
55-
<li>
56-
<!-- <IconButton to="/functions">
57-
Functions
58-
</IconButton> -->
59-
</li>
60-
60+
<ul role="list" class="mt-2 -mx-2 space-y-1 section-content" :class="sections.library ? 'expanded' : 'collapsed'">
6161
<li>
6262
<RouterLink to="/components" class="sidebar-links group">
6363
<div
@@ -92,16 +92,20 @@
9292
</li>
9393

9494
<li>
95-
<div class="flex items-center justify-between">
95+
<!-- App Section -->
96+
<div class="flex items-center justify-between cursor-pointer" @click="toggleSection('app')">
9697
<div class="text-xs text-gray-400 font-semibold leading-6">
9798
App
9899
</div>
99100

100101
<div
101-
class="i-hugeicons-arrow-down-01 h-4 w-4 text-gray-300 transition duration-150 ease-in-out dark:text-gray-200 group-hover:text-gray-700" />
102+
:class="[
103+
'i-hugeicons-arrow-down-01 h-4 w-4 text-gray-300 transition duration-150 ease-in-out dark:text-gray-200 group-hover:text-gray-700',
104+
{ 'transform -rotate-90': !sections.app }
105+
]" />
102106
</div>
103107

104-
<ul role="list" class="mt-2 -mx-2 space-y-1">
108+
<ul role="list" class="mt-2 -mx-2 space-y-1 section-content" :class="sections.app ? 'expanded' : 'collapsed'">
105109
<li>
106110
<RouterLink to="/deployments" class="sidebar-links group">
107111
<div
@@ -152,16 +156,20 @@
152156
</li>
153157

154158
<li>
155-
<div class="flex items-center justify-between">
159+
<!-- Models Section -->
160+
<div class="flex items-center justify-between cursor-pointer" @click="toggleSection('models')">
156161
<div class="text-xs text-gray-400 font-semibold leading-6">
157162
Models
158163
</div>
159164

160165
<div
161-
class="i-hugeicons-arrow-down-01 h-4 w-4 text-gray-300 transition duration-150 ease-in-out dark:text-gray-200 group-hover:text-gray-700" />
166+
:class="[
167+
'i-hugeicons-arrow-down-01 h-4 w-4 text-gray-300 transition duration-150 ease-in-out dark:text-gray-200 group-hover:text-gray-700',
168+
{ 'transform -rotate-90': !sections.models }
169+
]" />
162170
</div>
163171

164-
<ul role="list" class="mt-2 -mx-2 space-y-1">
172+
<ul role="list" class="mt-2 -mx-2 space-y-1 section-content" :class="sections.models ? 'expanded' : 'collapsed'">
165173
<li>
166174
<RouterLink to="/models/users" class="sidebar-links">
167175
<span
@@ -189,19 +197,22 @@
189197
</li>
190198

191199
<li>
192-
<div class="flex items-center justify-between">
200+
<!-- Management Section -->
201+
<div class="flex items-center justify-between cursor-pointer" @click="toggleSection('management')">
193202
<div class="text-xs text-gray-400 font-semibold leading-6">
194203
Management
195204
</div>
196205

197206
<div
198-
class="i-hugeicons-arrow-down-01 h-4 w-4 text-gray-300 transition duration-150 ease-in-out dark:text-gray-200 group-hover:text-gray-700" />
207+
:class="[
208+
'i-hugeicons-arrow-down-01 h-4 w-4 text-gray-300 transition duration-150 ease-in-out dark:text-gray-200 group-hover:text-gray-700',
209+
{ 'transform -rotate-90': !sections.management }
210+
]" />
199211
</div>
200212

201-
<ul role="list" class="mt-2 -mx-2 space-y-1">
213+
<ul role="list" class="mt-2 -mx-2 space-y-1 section-content" :class="sections.management ? 'expanded' : 'collapsed'">
202214
<li>
203215
<RouterLink to="/dns" class="sidebar-links">
204-
<!-- <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border text-[0.625rem] font-medium bg-white text-gray-400 border-gray-200 dark:border-gray-600 group-hover:border-blue-600 group-hover:text-blue-600">U</span> -->
205216
<div
206217
class="i-hugeicons-global-search h-5 w-5 text-gray-500 transition duration-150 ease-in-out dark:text-gray-200 group-hover:text-gray-700" />
207218
<span class="truncate">DNS</span>
@@ -210,7 +221,6 @@
210221

211222
<li>
212223
<RouterLink to="/emails" class="sidebar-links">
213-
<!-- <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border text-[0.625rem] font-medium bg-white text-gray-400 border-gray-200 dark:border-gray-600 group-hover:border-blue-600 group-hover:text-blue-600">U</span> -->
214224
<div
215225
class="i-hugeicons-at h-5 w-5 text-gray-500 transition duration-150 ease-in-out dark:text-gray-200 group-hover:text-gray-700" />
216226
<span class="truncate">Emails</span>
@@ -285,17 +295,14 @@
285295
@apply text-blue-gray-600 dark:text-blue-gray-200 hover:text-blue-gray-800 duration-150 ease-in-out transition dark-hover:bg-gray-700 hover:bg-blue-gray-50 flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold;
286296
}
287297
288-
/* Add styles for active state */
289298
.router-link-active {
290299
@apply bg-blue-gray-50 text-blue-600 dark:bg-gray-700 dark:text-blue-400;
291300
}
292301
293-
/* Style for the icons when link is active */
294302
.router-link-active div[class^="i-hugeicons"] {
295303
@apply text-blue-600 dark:text-blue-400;
296304
}
297305
298-
/* Style for the model section letters when active */
299306
.router-link-active span.h-6 {
300307
@apply border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400;
301308
}
@@ -317,4 +324,16 @@
317324
.active-bottom-link div {
318325
@apply text-blue-600 dark:text-blue-400 !important;
319326
}
327+
328+
.section-content {
329+
@apply overflow-hidden transition-all duration-300 ease-in-out;
330+
}
331+
332+
.collapsed {
333+
@apply max-h-0;
334+
}
335+
336+
.expanded {
337+
@apply max-h-96;
338+
}
320339
</style>

0 commit comments

Comments
 (0)