42 lines
1.1 KiB
Vue
42 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { Search } from 'lucide-vue-next';
|
|
import ModeToggle from './ModeToggle.vue';
|
|
import ThemeSelector from './ThemeSelector.vue';
|
|
|
|
const colorMode = useColorMode()
|
|
const logoPath = computed(() => {
|
|
return colorMode.value === 'dark' ? 'logo-dark.png' : 'logo.png'
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex items-center justify-center w-full p-4 gap-8 border-b">
|
|
<div>
|
|
<ClientOnly>
|
|
<NuxtImg :src="logoPath" width="48" height="48" />
|
|
</ClientOnly>
|
|
</div>
|
|
<div>
|
|
<Button variant="ghost">
|
|
Home
|
|
</Button>
|
|
<Button variant="ghost">
|
|
Social
|
|
</Button>
|
|
<Button variant="ghost">
|
|
Forum
|
|
</Button>
|
|
</div>
|
|
<div class="flex gap-4">
|
|
<InputGroup>
|
|
<InputGroupInput placeholder="Search..." />
|
|
<InputGroupAddon>
|
|
<Search />
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
<ModeToggle />
|
|
<ThemeSelector />
|
|
</div>
|
|
</div>
|
|
</template>
|