IYLaw-Site/client/src/components/Navbar.vue

<script setup lang="ts">
import {RouterLink} from 'vue-router'
import {ref} from 'vue'
import {session} from '@models/session.ts'
import {useLogin} from '@models/session.ts'

const {logout} = useLogin()
const mobileMenuOpen = ref(false)

const navItems = [
    {name: 'My Work', path: '/'},
    {name: 'About/Resume', path: '/about'},
    {name: 'Contact', path: '/contact'}
]
</script>

<template>
    <!-- Desktop Navbar -->
    <div style="position: sticky; top: 0; z-index: 1000" class="desktop-navbar">
        <nav class="navbar navbar-expand thick">
            <div class="navbar-brand">
                <RouterLink to="/" class="navbar-brand">
                    <img src="@img/scales-ph.jpg" alt="icon" class="d-inline-block align-text-top logo">
                </RouterLink>
            </div>

            <div class="justify-content-start">
                <ul class="navbar-nav">
                    <li v-for="link in navItems" :key="link.name" class="nav-item">
                        <RouterLink :to="link.path" class="nav-link" active-class="active-tab">
                            {{ link.name }}
                        </RouterLink>
                    </li>
                </ul>
            </div>
            <div v-if="!session.user" class="ms-auto d-flex align-items-center">
                <RouterLink to="/login" class="nav-link" active-class="active-tab" style="margin-right: 1.5rem;">
                    Login
                </RouterLink>
            </div>
            <div v-else class="ms-auto d-flex align-items-center">
                <RouterLink v-if="session.user?.role === 'admin'" to="/admin" class="nav-link" active-class="active-tab">
                    Admin
                </RouterLink>
                <button @click="logout" class="nav-link" style="margin-right: 1.5rem;">
                    Logout
                </button>
            </div>
        </nav>
    </div>

    <!-- Mobile Navbar -->
    <div class="mobile-navbar">
        <nav class="navbar thick">
            <button class="hamburger" @click="mobileMenuOpen = !mobileMenuOpen">
                <span :class="['hamburger-icon', { open: mobileMenuOpen }]"></span>
            </button>
            <div v-if="mobileMenuOpen" class="mobile-menu">
                <RouterLink v-for="link in navItems" :key="link.name" :to="link.path" @click="mobileMenuOpen = false"
                            class="nav-link" active-class="active-tab">
                    {{ link.name }}
                </RouterLink>
            </div>
        </nav>
    </div>
</template>

<style scoped>

.desktop-navbar {
    display: block;
}

.mobile-navbar {
    display: none;
}

/* Show mobile navbar, hide desktop on small screens */
@media (max-width: 767px) {
    .desktop-navbar {
        display: none;
    }

    .mobile-navbar {
        display: block;
    }

    .mobile-menu {
        background: var(--color-background);
        position: absolute;
        width: 100%;
        left: 0;
        top: 3.5rem;
        z-index: 1000;
        display: flex;
        flex-direction: column;
    }

    .hamburger {
        font-size: 2rem;
        height: 2.5rem;
        width: 2.5rem;
        background: none;
        border: none;
        cursor: pointer;
    }

    .hamburger-icon {
        display: inline-block;
        width: 2rem;
        height: 2rem;
        position: fixed;
        transition: all 0.3s ease;
    }

    .hamburger-icon,
    .hamburger-icon::before,
    .hamburger-icon::after {
        background: var(--color-nav-text);
        border-radius: 2px;
        content: '';
        display: block;
        height: 4px;
        position: absolute;
        width: 2rem;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .hamburger-icon {
        top: 50%;
        transform: translateY(-50%);
    }

    .hamburger-icon::before {
        top: -8px;
    }

    .hamburger-icon::after {
        top: 8px;
    }

    .hamburger-icon.open {
        background: transparent;
    }

    .hamburger-icon.open::before {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger-icon.open::after {
        transform: translateY(-8px) rotate(-45deg);
    }
}

.logo {
    height: 2.5rem;
    width: 2.5rem;
    margin-top: -5px;
    margin-left: 10px;
}

.navbar {
    background: var(--color-background);
}

.nav-link {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--color-nav-text);
    padding-right: 1.5rem !important;
}

.nav-link:hover {
    color: var(--color-nav-text-hover);
}

.thick {
    border-bottom: 2px solid var(--color-background-soft);
    box-shadow: 0 2px 6px -2px var(--vt-c-black);
}

.active-tab {
    color: var(--color-nav-text-active) !important;
    font-weight: bolder;
}
</style>