01c5880e37
Some checks failed
Deploy to Coolify / Code Quality (pull_request) Has been cancelled
Deploy to Coolify / Run Tests (pull_request) Has been cancelled
Deploy to Coolify / Deploy to Development (pull_request) Has been cancelled
Deploy to Coolify / Deploy to Production (pull_request) Has been cancelled
Deploy to Coolify / Deploy to Test (pull_request) Has been cancelled
Pull Request Checks / Validate PR (pull_request) Has been cancelled
- Install and configure Tailwind CSS (#9) - Install Nuxt UI component library (#10) - Create app layout with header/footer components (#11) - Implement Supabase client composable (#12) - Add TypeScript database types - Create placeholder pages (index, scan, settings) - Setup responsive navigation with mobile menu - Configure auth state management All Week 1 frontend foundation tasks complete.
123 lines
3.2 KiB
Vue
123 lines
3.2 KiB
Vue
<template>
|
|
<header class="bg-white border-b border-gray-200 sticky top-0 z-50">
|
|
<div class="container mx-auto px-4 max-w-7xl">
|
|
<div class="flex items-center justify-between h-16">
|
|
<!-- Logo / Brand -->
|
|
<NuxtLink to="/" class="flex items-center space-x-2">
|
|
<UIcon name="i-heroicons-squares-2x2" class="w-8 h-8 text-primary" />
|
|
<span class="text-xl font-bold text-gray-900">Pantry</span>
|
|
</NuxtLink>
|
|
|
|
<!-- Navigation -->
|
|
<nav class="hidden md:flex items-center space-x-6">
|
|
<NuxtLink
|
|
to="/"
|
|
class="text-gray-700 hover:text-primary transition-colors"
|
|
active-class="text-primary font-semibold"
|
|
>
|
|
Inventory
|
|
</NuxtLink>
|
|
<NuxtLink
|
|
to="/scan"
|
|
class="text-gray-700 hover:text-primary transition-colors"
|
|
active-class="text-primary font-semibold"
|
|
>
|
|
Scan
|
|
</NuxtLink>
|
|
<NuxtLink
|
|
to="/settings"
|
|
class="text-gray-700 hover:text-primary transition-colors"
|
|
active-class="text-primary font-semibold"
|
|
>
|
|
Settings
|
|
</NuxtLink>
|
|
</nav>
|
|
|
|
<!-- User Menu -->
|
|
<div class="flex items-center space-x-4">
|
|
<UButton
|
|
v-if="!user"
|
|
to="/auth/login"
|
|
color="primary"
|
|
variant="soft"
|
|
>
|
|
Sign In
|
|
</UButton>
|
|
|
|
<UDropdown v-else :items="userMenuItems" mode="hover">
|
|
<UAvatar
|
|
:alt="user.email"
|
|
size="sm"
|
|
:ui="{ background: 'bg-primary' }"
|
|
/>
|
|
</UDropdown>
|
|
</div>
|
|
|
|
<!-- Mobile Menu Button -->
|
|
<UButton
|
|
icon="i-heroicons-bars-3"
|
|
color="gray"
|
|
variant="ghost"
|
|
class="md:hidden"
|
|
@click="mobileMenuOpen = !mobileMenuOpen"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Mobile Navigation -->
|
|
<nav
|
|
v-if="mobileMenuOpen"
|
|
class="md:hidden py-4 space-y-2 border-t border-gray-200"
|
|
>
|
|
<NuxtLink
|
|
to="/"
|
|
class="block px-4 py-2 text-gray-700 hover:bg-gray-50 rounded"
|
|
@click="mobileMenuOpen = false"
|
|
>
|
|
Inventory
|
|
</NuxtLink>
|
|
<NuxtLink
|
|
to="/scan"
|
|
class="block px-4 py-2 text-gray-700 hover:bg-gray-50 rounded"
|
|
@click="mobileMenuOpen = false"
|
|
>
|
|
Scan
|
|
</NuxtLink>
|
|
<NuxtLink
|
|
to="/settings"
|
|
class="block px-4 py-2 text-gray-700 hover:bg-gray-50 rounded"
|
|
@click="mobileMenuOpen = false"
|
|
>
|
|
Settings
|
|
</NuxtLink>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { user, signOut } = useSupabaseAuth()
|
|
const mobileMenuOpen = ref(false)
|
|
|
|
const userMenuItems = [[
|
|
{
|
|
label: user.value?.email || 'User',
|
|
slot: 'account',
|
|
disabled: true
|
|
}
|
|
], [
|
|
{
|
|
label: 'Settings',
|
|
icon: 'i-heroicons-cog-6-tooth',
|
|
to: '/settings'
|
|
},
|
|
{
|
|
label: 'Sign Out',
|
|
icon: 'i-heroicons-arrow-right-on-rectangle',
|
|
click: async () => {
|
|
await signOut()
|
|
navigateTo('/auth/login')
|
|
}
|
|
}
|
|
]]
|
|
</script>
|