Header.vue
6.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<template>
<header class="sticky top-0 z-50">
<!-- Frosted glass effect background -->
<div class="backdrop-blur-xl bg-white/70 shadow-sm">
<div class="container mx-auto px-4">
<div class="flex items-center justify-between h-16">
<!-- Logo and Title -->
<div class="flex items-center">
<router-link to="/" class="flex items-center">
<span class="text-2xl font-bold bg-gradient-to-r from-green-500 to-blue-400 bg-clip-text text-transparent">
读书会
</span>
</router-link>
</div>
<!-- Navigation - Desktop -->
<nav class="hidden md:flex items-center space-x-6">
<router-link to="/" class="text-gray-600 hover:text-green-500 font-medium">
首页
</router-link>
<router-link to="/activities" class="text-gray-600 hover:text-green-500 font-medium">
全部活动
</router-link>
<router-link to="/create-activity" class="text-gray-600 hover:text-green-500 font-medium">
创建活动
</router-link>
</nav>
<!-- User Profile and Actions -->
<div class="flex items-center">
<!-- Messages Icon -->
<router-link to="/messages" class="relative p-2 mr-4 text-gray-600 hover:text-green-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
</svg>
<span class="absolute top-1 right-1 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white transform translate-x-1/2 -translate-y-1/2 bg-red-500 rounded-full">
2
</span>
</router-link>
<!-- User Profile -->
<div class="relative">
<button @click="toggleProfileDropdown" class="flex items-center space-x-2">
<div class="h-8 w-8 rounded-full overflow-hidden border-2 border-green-500">
<img :src="currentUser?.avatar || '/src/assets/images/avatars/default_avatar.svg'" alt="User Avatar" class="h-full w-full object-cover" />
</div>
<span class="hidden lg:block text-sm font-medium text-gray-700">{{ currentUser?.name || 'User' }}</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
<!-- Profile Dropdown -->
<div v-if="isProfileDropdownOpen" class="absolute right-0 mt-2 w-48 py-2 bg-white rounded-md shadow-lg backdrop-blur-xl bg-white/90 z-20">
<router-link to="/profile" class="block px-4 py-2 text-sm text-gray-700 hover:bg-green-50 hover:text-green-500">
个人资料
</router-link>
<router-link to="/my-activities" class="block px-4 py-2 text-sm text-gray-700 hover:bg-green-50 hover:text-green-500">
我的活动
</router-link>
<router-link to="/settings" class="block px-4 py-2 text-sm text-gray-700 hover:bg-green-50 hover:text-green-500">
设置
</router-link>
<button class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-green-50 hover:text-green-500">
退出登录
</button>
</div>
</div>
<!-- Mobile Menu Button -->
<div class="ml-4 md:hidden">
<button @click="toggleMenu" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-green-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-green-500">
<span class="sr-only">Open main menu</span>
<svg :class="{ 'hidden': isMenuOpen, 'block': !isMenuOpen }" class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<svg :class="{ 'block': isMenuOpen, 'hidden': !isMenuOpen }" class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<!-- Mobile Menu -->
<div :class="{ 'block': isMenuOpen, 'hidden': !isMenuOpen }" class="md:hidden">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<router-link to="/" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-green-500 hover:bg-green-50">
首页
</router-link>
<router-link to="/activities" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-green-500 hover:bg-green-50">
全部活动
</router-link>
<router-link to="/create-activity" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-green-500 hover:bg-green-50">
创建活动
</router-link>
<router-link to="/profile" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-green-500 hover:bg-green-50">
个人资料
</router-link>
<router-link to="/messages" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-green-500 hover:bg-green-50">
消息通知
</router-link>
</div>
</div>
</div>
</div>
</header>
</template>
<script setup>
import { ref } from 'vue'
import { useAppStore } from '../../stores/app'
const appStore = useAppStore()
const currentUser = appStore.currentUser
const isMenuOpen = ref(false)
const isProfileDropdownOpen = ref(false)
const toggleMenu = () => {
isMenuOpen.value = !isMenuOpen.value
}
const toggleProfileDropdown = () => {
isProfileDropdownOpen.value = !isProfileDropdownOpen.value
}
</script>