Making a header with Tailwind CSS

A key feature of any site is a header and a navbar. We need a way to get around, right?

Beyond that, any good site has style, and the header is one of the key places to define that style. It's usually visible on every page, it's present throughout each page, and offers key functionality for the website.

I wanted my header to have three elements:

1. A logo that links to the home page
2. A sleek navbar for getting around the site
3. An account manager button

Since my site is a SvelteKit app, I built each as a component that I can just drop into my main layout, as follows:

<!-- routes/+layout.svelte -->
<header>
	<Duck />
	<NavBar />
	<AuthRouter />
</header>

But, how did I implement them?

Let's start with the logo.

I chose a little duck. I like ducks. It's a sort of spirit animal for me. I'm often cool and collected on the surface but full of aspiration and desire for growth on the inside.

So, I'm a duck. Floating around on the surface as if blowing in the wind, pumping my feet rapidly under the water where you can't see me.

I wanted the logo to link back to the home page, as this is what they typically do and to be colored according to whether the user is at the homepage.

<script lang="ts">
    import Icon from "@iconify/svelte";
    import { page } from "$app/state";

    let isHome = $derived(page.url.pathname === "/");
    const textColor = $derived(isHome ? "text-secondary" : "text-primary");
</script>

<a  href="/"
    class="
    fixed top-4 left-4 w-12 h-12 rounded-full shadow-lg z-200
    flex items-center justify-center
    bg-highlight hover:bg-accent
    "
    aria-label="Auth Router"
>
    <Icon icon="mdi:duck" class="h-8 w-8 {textColor}" />
</a>

There's a few fun svelte things going on here. First, I'm importing the Icon class from Iconify to grab a nice duck. Thanks Iconify. Next, I'm using the page state from svelte to check the current url. The home page is at the root route ("/") so we know we're at the home page when that's what the url is set to.

Note: SvelteKit is all about reactivity... and although page doesn't necessarily look interactive (like the "$derived()" variables later), it always is by design! That's great because it means that anytime the page changes, we'll reprocess the dependent elements to make sure we're up to date.

To implement a state dependent text color, I set the variable textColor to be a derived value based on whether we're at the home page. That's some javascript weirdness for "if isHome is True, use "text-secondary", otherwise use "text-primary".

Since I've defined tailwind colors for "secondary" and "primary", we get a dynamic coloring of the duck based on whether we're at the home page. Nice!

Now, the navbar.

Full disclosure, I was inspired by this pretty home page. Thanks for the style ideas.