arthur/website
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/website.git synced 2026-01-20 15:01:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

wokring on article and logo

Browse Source
This commit is contained in:
Arthur Danjou
2023-10-29 22:35:26 +01:00
parent 036c5ef5b2
commit 0141962293
13 changed files with 944 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/header/Logo.vue
View File

@@ -1,15 +1,16 @@
<script lang="ts" setup>
const appConfig = useAppConfig()
const getColor = computed(() => `text-${appConfig.ui.primary}-500`)
const getTextColor = computed(() => `text-${appConfig.ui.primary}-500`)
function getGroupColor() {
return `group-hover:text-${appConfig.ui.primary}-500`
}
</script>
<template>
<UButton
class="flex items-center"
variant="ghost"
to="/"
:class="getColor"
>
ArthurDanj
</UButton>
<NuxtLink to="/" class="flex gap-1 items-center p-2 rounded-xl group text-xl !bg-transparent !dark:bg-transparent">
<span :class="getTextColor" class="font-black group-hover:text-black dark:group-hover:text-white duration-300">Arthur</span>
<span :class="getGroupColor()" class="font-bold text-gray-300 dark:text-neutral-600 duration-300">/</span>
<span :class="getTextColor" class="font-black group-hover:text-black dark:group-hover:text-white duration-300">Danjou</span>
</NuxtLink>
</template>

18
src/components/header/NavBar.vue
View File

@@ -16,19 +16,19 @@ const items = [
<template>
<nav class="hidden md:block z-50">
<div class="flex items-center h-10 rounded-md p-1 gap-1 relative bg-black/5 text-sm font-medium text-zinc-700 dark:bg-zinc-800/90 dark:text-zinc-300">
<UButton to="/" size="sm" variant="ghost" color="white" :class="{ 'router-link-exact-active': route.path === '/' }">
<UButton to="/" size="sm" variant="ghost" color="white" :class="{ 'link-active': route.path === '/' }">
Home
</UButton>
<UButton to="/about" size="sm" variant="ghost" color="white" :class="{ 'router-link-exact-active': route.path.includes('/about') }">
<UButton to="/about" size="sm" variant="ghost" color="white" :class="{ 'link-active': route.path.includes('/about') }">
About
</UButton>
<UButton to="/writing" size="sm" variant="ghost" color="white" :class="{ 'router-link-exact-active': route.path.includes('/writing') }">
<UButton to="/writing" size="sm" variant="ghost" color="white" :class="{ 'link-active': route.path.includes('/writing') }">
Articles
</UButton>
<UButton to="/work" size="sm" variant="ghost" color="white" :class="{ 'router-link-exact-active': route.path.includes('/work') }">
<UButton to="/work" size="sm" variant="ghost" color="white" :class="{ 'link-active': route.path.includes('/work') }">
Projects
</UButton>
<UButton to="/uses" size="sm" variant="ghost" color="white" :class="{ 'router-link-exact-active': route.path.includes('/uses') }">
<UButton to="/uses" size="sm" variant="ghost" color="white" :class="{ 'link-active': route.path.includes('/uses') }">
Uses
</UButton>
<UDropdown mode="hover" :items="items" :popper="{ placement: 'bottom' }">
@@ -36,9 +36,15 @@ const items = [
Other
</UButton>
</UDropdown>
<UButton to="/contact" size="sm" variant="ghost" color="white" :class="{ 'router-link-exact-active': route.path.includes('/contact') }">
<UButton to="/contact" size="sm" variant="ghost" color="white" :class="{ 'link-active': route.path.includes('/contact') }">
Contact
</UButton>
</div>
</nav>
</template>
<style lang="scss">
.link-active {
@apply bg-white/60 dark:bg-black
}
</style>