client initial commit

2025-07-15 13:35:27 -04:00
parent 5fc2a1eb24
commit b01e1cd586
25 changed files with 3217 additions and 0 deletions
--- a/client/src/components/Navbar.vue
+++ b/client/src/components/Navbar.vue
@ -0,0 +1,186 @@
+<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>