PWA
This commit is contained in:
parent
9cde9b5cf7
commit
f3927b97a4
21 changed files with 8672 additions and 202 deletions
|
|
@ -1,11 +1,12 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { Menu, X } from 'lucide-vue-next'
|
||||
import ThemeToggle from '@/components/ThemeToggle.vue'
|
||||
import LanguageSwitcher from '@/components/LanguageSwitcher.vue'
|
||||
import { Menu, X, Sun, Moon, Zap } from 'lucide-vue-next'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { useTheme } from '@/components/theme-provider'
|
||||
|
||||
const { t } = useI18n()
|
||||
const { t, locale } = useI18n()
|
||||
const { theme, setTheme } = useTheme()
|
||||
const isOpen = ref(false)
|
||||
|
||||
const navigation = computed(() => [
|
||||
|
|
@ -17,62 +18,72 @@ const navigation = computed(() => [
|
|||
const toggleMenu = () => {
|
||||
isOpen.value = !isOpen.value
|
||||
}
|
||||
|
||||
const toggleTheme = () => {
|
||||
setTheme(theme.value === 'dark' ? 'light' : 'dark')
|
||||
}
|
||||
|
||||
const toggleLocale = () => {
|
||||
// Toggle between 'en' and 'es'
|
||||
const newLocale = locale.value === 'en' ? 'es' : 'en'
|
||||
locale.value = newLocale
|
||||
// Store the preference
|
||||
localStorage.setItem('locale', newLocale)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav class="bg-card border-b border-border">
|
||||
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex h-16 justify-between">
|
||||
<!-- Logo and Desktop Navigation -->
|
||||
<div class="flex">
|
||||
<div class="flex flex-shrink-0 items-center">
|
||||
<!-- Replace with your logo -->
|
||||
<router-link to="/" class="text-xl font-bold text-card-foreground">
|
||||
⚡️ {{ t('nav.title') }}
|
||||
</router-link>
|
||||
</div>
|
||||
<nav class="w-full">
|
||||
<div class="flex items-center justify-between">
|
||||
<!-- Logo and Desktop Navigation -->
|
||||
<div class="flex items-center gap-6">
|
||||
<router-link to="/" class="flex ml-4 items-center gap-2">
|
||||
<Zap class="h-6 w-6 text-orange-600 dark:text-orange-400" />
|
||||
<span class=" font-semibold">{{ t('nav.title') }}</span>
|
||||
</router-link>
|
||||
|
||||
<!-- Desktop Navigation -->
|
||||
<div class="hidden sm:ml-6 sm:flex sm:space-x-8">
|
||||
<router-link v-for="item in navigation" :key="item.name" :to="item.href"
|
||||
class="inline-flex items-center px-1 pt-1 text-sm font-medium" :class="[
|
||||
$route.path === item.href
|
||||
? 'border-b-2 border-primary text-card-foreground'
|
||||
: 'text-muted-foreground hover:border-b-2 hover:border-muted hover:text-card-foreground'
|
||||
]">
|
||||
{{ item.name }}
|
||||
</router-link>
|
||||
</div>
|
||||
<!-- Desktop Navigation -->
|
||||
<div class="hidden md:flex gap-4">
|
||||
<router-link v-for="item in navigation" :key="item.name" :to="item.href"
|
||||
class="text-muted-foreground hover:text-foreground transition-colors" :class="{
|
||||
'text-foreground': $route.path === item.href
|
||||
}">
|
||||
{{ item.name }}
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Theme Toggle -->
|
||||
<div class="flex items-center gap-2">
|
||||
<LanguageSwitcher />
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
<!-- Theme Toggle and Language -->
|
||||
<div class="flex items-center gap-2">
|
||||
<Button variant="ghost" size="icon" @click="toggleTheme">
|
||||
<Sun v-if="theme === 'dark'" class="h-5 w-5" />
|
||||
<Moon v-else class="h-5 w-5" />
|
||||
</Button>
|
||||
|
||||
<Button variant="ghost" class="text-muted-foreground hover:text-foreground transition-colors"
|
||||
@click="toggleLocale">
|
||||
{{ locale === 'en' ? '🇪🇸 ES' : '🇺🇸 EN' }}
|
||||
</Button>
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
<div class="flex items-center sm:hidden">
|
||||
<button type="button"
|
||||
class="inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500"
|
||||
@click="toggleMenu">
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<Menu v-if="!isOpen" class="block h-6 w-6" aria-hidden="true" />
|
||||
<X v-else class="block h-6 w-6" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
<Button variant="ghost" size="icon" class="md:hidden" @click="toggleMenu">
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<Menu v-if="!isOpen" class="h-5 w-5" />
|
||||
<X v-else class="h-5 w-5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu -->
|
||||
<div :class="[isOpen ? 'block' : 'hidden']" class="sm:hidden">
|
||||
<div class="space-y-1 pb-3 pt-2">
|
||||
<div v-show="isOpen"
|
||||
class="absolute left-0 right-0 top-14 z-50 border-b bg-background md:hidden
|
||||
[@supports(backdrop-filter:blur(24px))]:bg-background/95 [@supports(backdrop-filter:blur(24px))]:backdrop-blur-sm">
|
||||
<div class="container space-y-1 py-3">
|
||||
<router-link v-for="item in navigation" :key="item.name" :to="item.href"
|
||||
class="block border-l-4 py-2 pl-3 pr-4 text-base font-medium" :class="[
|
||||
$route.path === item.href
|
||||
? 'border-primary bg-primary/10 text-primary'
|
||||
: 'border-transparent text-gray-500 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-700'
|
||||
]" @click="isOpen = false">
|
||||
class="block px-3 py-2 text-base font-medium text-muted-foreground hover:text-foreground transition-colors"
|
||||
:class="{
|
||||
'text-foreground': $route.path === item.href
|
||||
}" @click="isOpen = false">
|
||||
{{ item.name }}
|
||||
</router-link>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue