padreug/web-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add color theme with dark and light mode!

Browse source
This commit is contained in:
padreug 2025-02-02 18:44:05 +01:00
parent 08b505c145
commit 23081d8685
5 changed files with 184 additions and 127 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/components/layout/Navbar.vue
View file

@ -1,6 +1,7 @@
<script setup lang="ts">
import { ref } from 'vue'
import { Menu, X } from 'lucide-vue-next'
import ThemeToggle from '@/components/ThemeToggle.vue'
const isOpen = ref(false)
@ -16,14 +17,14 @@ const toggleMenu = () => {
</script>
<template>
<nav class="bg-white shadow-sm">
<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">
<router-link to="/" class="text-xl font-bold text-card-foreground">
⚡️ Lightning Directory
</router-link>
</div>
@ -37,8 +38,8 @@ const toggleMenu = () => {
class="inline-flex items-center px-1 pt-1 text-sm font-medium"
:class="[
$route.path === item.href
? 'border-b-2 border-primary text-gray-900'
: 'text-gray-500 hover:border-b-2 hover:border-gray-300 hover:text-gray-700'
? 'border-b-2 border-primary text-card-foreground'
: 'text-muted-foreground hover:border-b-2 hover:border-muted hover:text-card-foreground'
]"
>
{{ item.name }}
@ -46,6 +47,11 @@ const toggleMenu = () => {
</div>
</div>
<!-- Theme Toggle -->
<div class="flex items-center">
<ThemeToggle />
</div>
<!-- Mobile menu button -->
<div class="flex items-center sm:hidden">
<button