11<script setup lang="ts">
2- import { ref, watch } from 'vue'
3-
4- import { useDark, useToggle } from '@vueuse/core'
5-
62const profileModal = ref(false)
73const isDark = useDark()
84const theme = ref(isDark.value ? 'dark' : 'light')
@@ -24,31 +20,21 @@ watch(theme, (currentVal) => {
2420
2521<template>
2622 <div class="sticky top-0 z-10 flex h-16 shrink-0 items-center gap-x-4 border-b border-gray-200 dark:border-gray-600 dark:border-gray-600 bg-white dark:bg-blue-gray-900 px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:px-8">
27- <button
28- type="button"
29- class="-m-2.5 p-2.5 text-gray-700 lg:hidden"
30- >
23+ <button type="button" class="-m-2.5 p-2.5 text-gray-700 lg:hidden">
3124 <span class="sr-only">Open sidebar</span>
32-
3325 <div class="i-heroicons-bars-3 h-6 w-6" />
3426 </button>
3527
3628 <!-- Separator -->
37- <div
38- class="h-6 w-px bg-gray-200 lg:hidden"
39- aria-hidden="true"
40- />
29+ <div class="h-6 w-px bg-gray-200 lg:hidden" aria-hidden="true" />
4130
4231 <div class="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
4332 <form
4433 class="relative flex flex-1"
4534 action="#"
4635 method="GET"
4736 >
48- <label
49- for="search-field"
50- class="sr-only"
51- >Search</label>
37+ <label for="search-field" class="sr-only">Search</label>
5238
5339 <div class="i-heroicons-magnifying-glass pointer-events-none absolute inset-y-0 left-0 h-full w-5 text-gray-400" />
5440 <input
@@ -65,21 +51,11 @@ watch(theme, (currentVal) => {
6551 class="-m-2.5 p-2.5 text-gray-400 hover:text-blue-gray-500"
6652 >
6753 <span class="sr-only">View Health Page</span>
68- <RouterLink
69- to="/health"
70- class="sidebar-links group"
71- >
54+ <RouterLink to="/health">
7255 <div class="i-heroicons-heart w-6 h-6 transition duration-150 ease-in-out" />
7356 </RouterLink>
74- <!-- <div class="i-heroicons-heart w-6 h-6" /> -->
75- </button>
76- <button
77- type="button"
78- class="-m-2.5 p-2.5 text-gray-400 hover:text-blue-gray-500"
79- >
80- <span class="sr-only">View Documentation</span>
81- <div class="i-heroicons-document-text w-6 h-6" />
8257 </button>
58+
8359 <button
8460 type="button"
8561 class="-m-2.5 p-2.5 text-gray-400 hover:text-blue-gray-500"
@@ -95,118 +71,51 @@ watch(theme, (currentVal) => {
9571 />
9672
9773 <!-- Profile dropdown -->
98- <div class="relative">
99- <button
100- id="user-menu-button"
101- type="button"
102- class="-m-1.5 flex items-center p-1.5"
103- aria-expanded="false"
104- aria-haspopup="true"
105- @click="toggleProfileModal()"
106- >
107- <span class="sr-only">Open user menu</span>
108- <img
109- class="h-8 w-8 rounded-full bg-gray-50"
110- src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
111- alt=""
112- >
113- <span class="hidden lg:flex lg:items-center">
114- <div class="i-heroicons-chevron-down w-5 h-5 ml-2 text-gray-400" />
115- </span>
116- </button>
117-
118- <!--
119- Dropdown menu, show/hide based on menu state.
74+ <div class="relative ml-3">
75+ <div>
76+ <button id="user-menu-button" type="button" class="relative flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800" aria-expanded="false" aria-haspopup="true">
77+ <span class="absolute -inset-1.5" />
78+ <span class="sr-only">Open user menu</span>
79+ <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
80+ </button>
81+ </div>
12082
121- Entering: "transition ease-out duration-100"
122- From: "transform opacity-0 scale-95"
123- To: "transform opacity-100 scale-100"
124- Leaving: "transition ease-in duration-75"
125- From: "transform opacity-100 scale-100"
126- To: "transform opacity-0 scale-95"
127- -->
128- <div
129- v-if="profileModal"
130- class="absolute right-0 z-10 mt-2.5 w-64 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none dark:bg-blue-gray-700"
131- role="menu"
132- aria-orientation="vertical"
133- aria-labelledby="user-menu-button"
134- tabindex="-1"
135- >
136- <!-- Active: "bg-gray-50", Not Active: "" -->
83+ <!--
84+ Dropdown menu, show/hide based on menu state.
85+
86+ Entering: "transition ease-out duration-100"
87+ From: "transform opacity-0 scale-95"
88+ To: "transform opacity-100 scale-100"
89+ Leaving: "transition ease-in duration-75"
90+ From: "transform opacity-100 scale-100"
91+ To: "transform opacity-0 scale-95"
92+ -->
93+ <div class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
94+ <!-- Active: "bg-gray-100", Not Active: "" -->
95+ <a id="user-menu-item-0" href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1">Your Profile</a>
96+ <a id="user-menu-item-1" href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1">Settings</a>
97+ <a id="user-menu-item-2" href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1">Sign out</a>
13798 <a
138- id="user-menu-item-0 "
99+ id="user-menu-item-4 "
139100 href="#"
140- class="block px-3 py-1 text-sm leading-6 text-gray-500 dark-hover:bg-gray-600 hover:bg-blue-gray-50 hover:text-blue-gray-600 dark:text-gray-300 "
101+ class="flex justify-between px-4 py-2 text-sm my-1 leading-6 text-gray-500 dark-hover:bg-gray-600 hover:bg-blue-gray-50 hover:text-blue-gray-600"
141102 role="menuitem"
142103 tabindex="-1"
143104 >
144- <p class="font-bold ">
145- John Doe
146- </p>
147- <p>
148- johndoe@email.com
149- </p>
150- </a>
105+ <label for="small" class="self-center mr-2 text-sm text-gray-500 dark:text-gray-300">
106+ Theme
107+ </label>
151108
152- <a
153- id="user-menu-item-0"
154- href="#"
155- class="block px-3 py-1 text-sm leading-6 text-gray-500 dark-hover:bg-gray-600 hover:bg-blue-gray-50 hover:text-blue-gray-600 dark:text-gray-300"
156- role="menuitem"
157- tabindex="-1"
158- >
159- Dashboard
160- </a>
161- <a
162- id="user-menu-item-0"
163- href="#"
164- class="block px-3 py-1 text-sm leading-6 text-gray-500 dark-hover:bg-gray-600 hover:bg-blue-gray-50 hover:text-blue-gray-600 dark:text-gray-300"
165- role="menuitem"
166- tabindex="-1"
167- >Teams</a>
168- <RouterLink
169- to="/settings/billing"
170- class="block px-3 py-1 text-sm leading-6 text-gray-500 dark-hover:bg-gray-600 hover:bg-blue-gray-50 hover:text-blue-gray-600 dark:text-gray-300"
171- role="menuitem"
172- tabindex="-1"
173- >
174- Billing Settings
175- </RouterLink>
176- <a
177- id="user-menu-item-0"
178- href="#"
179- class="flex px-3 py-2 border-t border-b text-sm my-1 leading-6 text-gray-500 dark-hover:bg-gray-600 hover:bg-blue-gray-50 hover:text-blue-gray-600"
180- role="menuitem"
181- tabindex="-1"
182- >
183- <label
184- for="small"
185- class="self-center mr-2 text-sm text-gray-500 dark:text-gray-300"
186- >Theme</label>
187109 <select
188110 id="small"
189111 v-model="theme"
190112 class="text-sm text-gray-500 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-blue-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
191113 >
192114 <option value="light">Light</option>
193-
194- <option
195- value="dark"
196- >Dark</option>
197-
198- <option
199- value="light"
200- >Auto</option>
115+ <option value="dark">Dark</option>
116+ <option value="light">Auto</option>
201117 </select>
202118 </a>
203- <a
204- id="user-menu-item-1"
205- href="#"
206- class="block px-3 py-1 text-sm leading-6 text-gray-500 dark-hover:bg-gray-600 hover:bg-blue-gray-50 hover:text-blue-gray-600 dark:text-gray-300"
207- role="menuitem"
208- tabindex="-1"
209- >Log out</a>
210119 </div>
211120 </div>
212121 </div>
0 commit comments