danvics/Sink
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: optimize theme switcher and fix style issues

Browse source
This commit is contained in:
ccbikai 2024-06-02 20:11:57 +08:00
parent b87405abf7
commit 66f202d3d1
4 changed files with 11 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
components/SwitchTheme.vue
View file

@ -1,7 +1,5 @@
<script setup>
import { Icon } from '@iconify/vue'
import { Button } from '@/components/ui/button'
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
import { Sun, Moon } from 'lucide-vue-next'
const colorMode = useColorMode()
</script>
@ -10,18 +8,19 @@ const colorMode = useColorMode()
<DropdownMenu>
<DropdownMenuTrigger as-child>
<Button variant="ghost">
<Icon
icon="radix-icons:sun"
<Sun
class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
/>
<Icon
icon="radix-icons:moon"
<Moon
class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
/>
<span class="sr-only">Toggle theme</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuContent
align="end"
class="min-w-min"
>
<DropdownMenuItem @click="colorMode.preference = 'light'">
Light
</DropdownMenuItem>

8
components/layouts/Header.vue
View file

@ -36,7 +36,7 @@ const showMenu = ref(false)
@touchmove.prevent
>
<div
class="flex-col w-full h-auto overflow-hidden bg-background rounded-lg md:overflow-visible md:rounded-none md:relative md:flex md:flex-row"
class="flex-col w-full h-auto overflow-hidden rounded-lg bg-background md:overflow-visible md:rounded-none md:relative md:flex md:flex-row"
>
<a
href="/"
@ -59,13 +59,13 @@ const showMenu = ref(false)
class="flex flex-col items-start justify-end w-full pt-4 md:items-center md:w-1/3 md:flex-row md:py-0"
>
<a
class="w-full px-6 py-2 mr-0 text-gray-700 dark:text-gray-300 cursor-pointer md:px-3 md:mr-2 lg:mr-3 md:w-auto"
class="w-full px-6 py-2 mr-0 text-gray-700 cursor-pointer dark:text-gray-300 md:px-3 md:mr-2 lg:mr-3 md:w-auto"
href="/dashboard"
>Dashboard</a>
<a
href="https://github.com/ccbikai/sink"
target="_blank"
class="inline-flex items-center w-full px-6 py-3 text-sm font-medium leading-4 text-white bg-gray-900 md:px-3 md:mr-2 lg:mr-3 md:w-auto md:rounded-full hover:bg-gray-800 focus:outline-none md:focus:ring-2 focus:ring-0 focus:ring-offset-2 focus:ring-gray-800"
class="inline-flex items-center w-full px-6 py-3 text-sm font-medium leading-4 text-white bg-gray-900 md:px-3 md:w-auto md:rounded-full hover:bg-gray-800 focus:outline-none md:focus:ring-2 focus:ring-0 focus:ring-offset-2 focus:ring-gray-800"
>
<GitHubIcon
class="w-5 h-5 mr-1"
@ -79,7 +79,7 @@ const showMenu = ref(false)
</div>
<div
class="absolute right-0 flex flex-col items-center justify-center w-10 h-10rounded-full cursor-pointer md:hidden"
class="absolute right-0 flex flex-col items-center justify-center w-10 cursor-pointer h-10rounded-full md:hidden"
@click="showMenu = !showMenu"
>
<Ellipsis

2
package.json
View file

@ -37,8 +37,6 @@
},
"devDependencies": {
"@antfu/eslint-config": "^2.18.1",
"@iconify-json/radix-icons": "^1.1.14",
"@iconify/vue": "^4.1.2",
"@nuxt/eslint": "^0.3.13",
"@nuxt/eslint-config": "^0.3.13",
"@nuxthub/core": "^0.5.17",

23
pnpm-lock.yaml
View file

@ -63,12 +63,6 @@ importers:
'@antfu/eslint-config':
specifier: ^2.18.1
version: 2.18.1(@vue/compiler-sfc@3.4.27)(eslint@8.57.0)(typescript@5.4.5)
'@iconify-json/radix-icons':
specifier: ^1.1.14
version: 1.1.14
'@iconify/vue':
specifier: ^4.1.2
version: 4.1.2(vue@3.4.27(typescript@5.4.5))
'@nuxt/eslint':
specifier: ^0.3.13
version: 0.3.13(eslint@8.57.0)(nuxt@3.11.2(@opentelemetry/api@1.8.0)(@parcel/watcher@2.4.1)(@types/node@20.12.11)(@unocss/reset@0.60.0)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.11.2(rollup@4.17.2))(vue@3.4.27(typescript@5.4.5)))(ioredis@5.4.1)(optionator@0.9.4)(rollup@4.17.2)(terser@5.31.0)(typescript@5.4.5)(unocss@0.60.0(postcss@8.4.38)(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(terser@5.31.0)))(vite@5.2.11(@types/node@20.12.11)(terser@5.31.0))(vue-tsc@2.0.19(typescript@5.4.5)))(rollup@4.17.2)(typescript@5.4.5)(vite@5.2.11(@types/node@20.12.11)(terser@5.31.0))
@ -808,20 +802,12 @@ packages:
'@humanwhocodes/object-schema@2.0.3':
resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==}
'@iconify-json/radix-icons@1.1.14':
resolution: {integrity: sha512-AYBOyhnJ2hXlg3aIn8Ekphrr7zHRyz1l8x6bidM3PDUuTL+aRt8r6cpCvN3GeuTHy2JOhmihbVJRF0bt2FF7Ag==}
'@iconify/types@2.0.0':
resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
'@iconify/utils@2.1.23':
resolution: {integrity: sha512-YGNbHKM5tyDvdWZ92y2mIkrfvm5Fvhe6WJSkWu7vvOFhMtYDP0casZpoRz0XEHZCrYsR4stdGT3cZ52yp5qZdQ==}
'@iconify/vue@4.1.2':
resolution: {integrity: sha512-CQnYqLiQD5LOAaXhBrmj1mdL2/NCJvwcC4jtW2Z8ukhThiFkLDkutarTOV2trfc9EXqUqRs0KqXOL9pZ/IyysA==}
peerDependencies:
vue: '>=3'
'@internationalized/date@3.5.4':
resolution: {integrity: sha512-qoVJVro+O0rBaw+8HPjUB1iH8Ihf8oziEnqMnvhJUSuVIrHOuZ6eNLHNvzXJKUvAtaDiqMnRlg8Z2mgh09BlUw==}
@ -6617,10 +6603,6 @@ snapshots:
'@humanwhocodes/object-schema@2.0.3': {}
'@iconify-json/radix-icons@1.1.14':
dependencies:
'@iconify/types': 2.0.0
'@iconify/types@2.0.0': {}
'@iconify/utils@2.1.23':
@ -6635,11 +6617,6 @@ snapshots:
transitivePeerDependencies:
- supports-color
'@iconify/vue@4.1.2(vue@3.4.27(typescript@5.4.5))':
dependencies:
'@iconify/types': 2.0.0
vue: 3.4.27(typescript@5.4.5)
'@internationalized/date@3.5.4':
dependencies:
'@swc/helpers': 0.5.11