Pumpkin-Blog/app/components/Nav.vue

<script setup lang="ts">
const colorMode = useColorMode();

const toggleTheme = () => {
    colorMode.preference = colorMode.value === "dark" ? "light" : "dark";
};
</script>

<template>
    <header
        class="flex flex-col space-y-3 sm:space-y-0 sm:grid grid-cols-2 md:flex md:flex-row items-center justify-center md:gap-0 md:justify-between px-8 py-4 bg-surface border-b-primary border-b-[3px] sticky top-0 z-50 transition-colors duration-200"
    >
        <NuxtLink
            to="/"
            class="flex items-center gap-2 no-underline font-extrabold text-2xl flex-shrink-0 text-foreground"
        >
            <NuxtImg class="w-10 h-10 flex-shrink-0" src="/images/icon.svg" alt="" aria-hidden="true" />
            <span>Pumpkin-Blog</span>
        </NuxtLink>
        <nav
            class="nav flex gap-1 lg:gap-2 md:order-0 order-2 col-span-2 justify-center"
        >
            <NuxtLink to="https://pumpkinmc.org/" external>Home</NuxtLink>
            <NuxtLink to="https://docs.pumpkinmc.org/" external>Docs</NuxtLink>
            <NuxtLink to="https://pumpkinmc.org/developers/" external
                >Developers</NuxtLink
            >
            <NuxtLink to="https://pumpkinmc.org/contributors/" external
                >Contributors</NuxtLink
            >
            <NuxtLink to="/">Blog</NuxtLink>
        </nav>
        <div class="flex items-center gap-2 justify-end">
            <button
                type="button"
                class="icon-btn cursor-pointer"
                :title="colorMode.value === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'"
                :aria-label="colorMode.value === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'"
                @click="toggleTheme"
            >
                <ClientOnly>
                    <Icon v-if="colorMode.value === 'dark'" name="fa7-solid:sun" />
                    <Icon v-else name="fa7-solid:moon" />
                    <template #fallback>
                        <Icon name="fa7-solid:moon" />
                    </template>
                </ClientOnly>
            </button>
            <a
                href="https://github.com/Pumpkin-MC/Pumpkin"
                class="icon-btn"
                title="GitHub"
            >
                <Icon name="fa7-brands:github" />
            </a>
            <a
                href="https://discord.com/invite/wT8XjrjKkf"
                class="icon-btn"
                title="Discord"
            >
                <Icon name="fa7-brands:discord" />
            </a>
            <a
                href="https://pumpkinmc.org/donate/"
                class="sponsor-btn"
                title="Sponsor"
            >
                <Icon name="fa7-solid:heart" />
            </a>
            <a
                href="https://pumpkinmc.org/download/"
                class="download-btn flex items-center justify-center h-10.5 px-5 bg-primary text-black font-bold text-[0.95rem] no-underline border-[3px] border-primary shadow-[3px_3px_0_var(--color-primary)] transition-all duration-100 ease-in-out hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[5px_5px_0_var(--color-primary)]"
                >Download</a
            >
        </div>
    </header>
</template>

<style scoped>
@reference "@/assets/css/main.css";

.nav {
    display: flex;
    gap: 0.5rem;

    a {
        padding: 0.6rem 1.25rem;
        text-decoration: none;
        @apply text-muted;
        font-weight: 600;
        font-size: 1rem;
        position: relative;
        transition: all 0.15s ease;
    }

    a::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 3px;
        @apply bg-primary;
        transition: width 0.15s ease;
    }

    a:hover {
        @apply text-foreground;
    }

    a:hover::after {
        width: 100%;
    }

    @media (width <= theme(--breakpoint-lg)) {
        a {
            padding: 0.4rem 0.6rem;
            font-size: 0.8rem;
        }

        a::after {
            display: none;
        }
    }

    @media (width <= theme(--breakpoint-md)) {
        a {
            padding: 0.3rem 0.4rem;
            font-size: 0.7rem;
        }
    }
}

.icon-btn {
    @apply flex items-center justify-center w-10.5 h-10.5 bg-background text-foreground text-xl no-underline border-[3px] border-foreground shadow-[3px_3px_0_var(--color-foreground)] transition-all duration-100 ease-in-out cursor-pointer;
}

.icon-btn:hover {
    @apply -translate-x-0.5 -translate-y-0.5 shadow-[5px_5px_0_var(--color-primary)] border-primary text-primary;
}

.sponsor-btn {
    @apply flex items-center justify-center w-10.5 h-10.5 bg-pink text-black text-[1.1rem] no-underline border-[3px] border-pink shadow-[3px_3px_0_var(--color-pink)] transition-all duration-100 ease-in-out;
}

.sponsor-btn:hover {
    @apply -translate-x-0.5 -translate-y-0.5 shadow-[5px_5px_0_var(--color-pink)];
}

@media (width <= theme(--breakpoint-lg)) {
    .download-btn {
        height: 34px;
        padding: 0 0.75rem;
        font-size: 0.8rem;
        box-shadow: none;
    }

    .icon-btn,
    .sponsor-btn {
        width: 34px;
        height: 34px;
        font-size: 1rem;
        box-shadow: none;
    }
}

@media (width <= theme(--breakpoint-md)) {
    .download-btn {
        height: 28px;
        padding: 0 0.4rem;
        font-size: 0.7rem;
    }

    .icon-btn,
    .sponsor-btn {
        width: 28px;
        height: 28px;
        font-size: 0.85rem;
    }
}
</style>