Skip to content

Commit cd75f37

Browse files
katsulonkatsulon
committed
Improved NavBar, including for mobile
1 parent f9a14a2 commit cd75f37

File tree

3 files changed

+74
-33
lines changed

3 files changed

+74
-33
lines changed

‎frontend/src/components/NavBar.vue

+65-31
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,81 @@
11
<script setup>
2-
import LoginLogout from '@/components/functional/LoginLogout.vue'
3-
import { ref } from 'vue'
2+
import { ref } from 'vue';
3+
import LoginLogout from '@/components/functional/LoginLogout.vue';
44
import IconCharacter from './icons/IconCharacter.vue';
55
import IconRules from './icons/IconRules.vue';
66
import IconAbout from './icons/IconAbout.vue';
7-
import IconLogin from './icons/IconLogin.vue';
7+
import IconMobileMenu from './icons/IconMobileMenu.vue';
8+
9+
// State for mobile menu toggle
10+
const isMenuOpen = ref(false);
811
</script>
912

1013
<template>
1114
<div class="bg-gray-100 text-white">
12-
<!-- Navigation Tabs -->
1315
<div class="bg-white dark:bg-gray-800 border-b border-gray-100 dark:border-gray-700 w-full">
1416
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
15-
<ul class="flex justify-center items-center space-x-8 h-full">
16-
<li>
17-
<img src="@/assets/logo-app.svg" alt="App Logo" class="h-12 w-auto block dark:hidden" />
18-
<img src="@/assets/logo-app-dark.svg" alt="App Logo Dark" class="h-12 w-auto hidden dark:block" />
19-
</li>
20-
<li>
21-
<router-link :to="{ name: 'characters' }" class="text-gray-900 dark:text-gray-100 inline-block py-2 px-4 text-sm font-medium">
22-
<IconCharacter class="inline-block" />
23-
Characters
24-
</router-link>
25-
</li>
26-
<li>
27-
<router-link :to="{ name: 'rules', params: {name: ''} }" class="text-gray-900 dark:text-gray-100 inline-block py-2 px-4 text-sm font-medium">
28-
<IconRules class="inline-block" />
29-
Rules
30-
</router-link>
31-
</li>
32-
<li>
33-
<router-link :to="{ name: 'about' }" class="text-gray-900 dark:text-gray-100 inline-block py-2 px-4 text-sm font-medium">
34-
<IconAbout class="inline-block" />
35-
About
36-
</router-link>
37-
</li>
38-
<li>
39-
<LoginLogout></LoginLogout>
40-
</li>
41-
</ul>
17+
<div class="flex justify-between items-center h-16">
18+
<!-- Logo (Left) -->
19+
<div class="flex-shrink-0">
20+
<img src="@/assets/logo-app.svg" alt="App Logo" class="h-8 w-auto block dark:hidden" />
21+
<img src="@/assets/logo-app-dark.svg" alt="App Logo Dark" class="h-8 w-auto hidden dark:block" />
22+
</div>
23+
24+
<!-- Desktop Navigation (Centered) -->
25+
<div class="hidden md:flex flex-1 justify-center">
26+
<ul class="flex space-x-8">
27+
<li>
28+
<router-link :to="{ name: 'characters' }" class="text-gray-900 dark:text-gray-100 inline-block py-2 px-4 text-sm font-medium">
29+
<IconCharacter class="inline-block" />
30+
Characters
31+
</router-link>
32+
</li>
33+
<li>
34+
<router-link :to="{ name: 'rules', params: {name: ''} }" class="text-gray-900 dark:text-gray-100 inline-block py-2 px-4 text-sm font-medium">
35+
<IconRules class="inline-block" />
36+
Rules
37+
</router-link>
38+
</li>
39+
<li>
40+
<router-link :to="{ name: 'about' }" class="text-gray-900 dark:text-gray-100 inline-block py-2 px-4 text-sm font-medium">
41+
<IconAbout class="inline-block" />
42+
About
43+
</router-link>
44+
</li>
45+
</ul>
46+
</div>
47+
48+
<!-- LoginLogout (Always Right) -->
49+
<div class="hidden md:block">
50+
<LoginLogout />
51+
</div>
52+
53+
<!-- Mobile Menu Button (Right) -->
54+
<button class="md:hidden text-gray-900 dark:text-gray-100 focus:outline-none" @click="isMenuOpen = !isMenuOpen">
55+
<IconMobileMenu />
56+
</button>
57+
</div>
58+
59+
<!-- Mobile Menu (Hidden by Default) -->
60+
<div v-if="isMenuOpen" class="md:hidden mt-2 space-y-2 bg-white dark:bg-gray-800 p-4 rounded-lg">
61+
<router-link :to="{ name: 'characters' }" class="block text-gray-900 dark:text-gray-100 py-2 px-4 text-sm font-medium" @click="isMenuOpen = false">
62+
<IconCharacter class="inline-block" />
63+
Characters
64+
</router-link>
65+
<router-link :to="{ name: 'rules', params: {name: ''} }" class="block text-gray-900 dark:text-gray-100 py-2 px-4 text-sm font-medium" @click="isMenuOpen = false">
66+
<IconRules class="inline-block" />
67+
Rules
68+
</router-link>
69+
<router-link :to="{ name: 'about' }" class="block text-gray-900 dark:text-gray-100 py-2 px-4 text-sm font-medium" @click="isMenuOpen = false">
70+
<IconAbout class="inline-block" />
71+
About
72+
</router-link>
73+
<LoginLogout :updateMenuState="(state) => isMenuOpen = state" />
74+
</div>
4275
</div>
4376
</div>
4477
</div>
4578
</template>
4679

80+
4781
<style scoped></style>

‎frontend/src/components/functional/LoginLogout.vue

+5-2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { ref, watchEffect } from "vue";
33
import { useRouter } from "vue-router";
44
import { logout } from "../../auth.js";
55
import IconLogout from "../icons/IconLogout.vue";
6+
import IconLogin from "../icons/IconLogin.vue";
67
78
const router = useRouter();
89
const errorMessage = ref("");
@@ -13,6 +14,8 @@ watchEffect(() => {
1314
isAuthenticated.value = !!localStorage.getItem("access");
1415
});
1516
17+
defineProps(["updateMenuState"]);
18+
1619
async function handleLogout() {
1720
try {
1821
await logout();
@@ -27,13 +30,13 @@ async function handleLogout() {
2730

2831
<template>
2932
<div v-if="isAuthenticated">
30-
<router-link to="#" @click.prevent="handleLogout" class="text-gray-400 dark:text-white-400 inline-block py-2 px-4 text-sm font-medium">
33+
<router-link to="#" @click.prevent="handleLogout" class="block text-gray-900 dark:text-gray-100 py-2 px-4 text-sm font-medium" @click="updateMenuState(false)">
3134
<IconLogout class="inline-block" />
3235
Logout
3336
</router-link>
3437
</div>
3538
<div v-else>
36-
<router-link :to="{ name: 'login' }" class="text-gray-400 dark:text-white-400 inline-block py-2 px-4 text-sm font-medium">
39+
<router-link :to="{ name: 'login' }" class="block text-gray-900 dark:text-gray-100 py-2 px-4 text-sm font-medium" @click="updateMenuState(false)">
3740
<IconLogin class="inline-block" />
3841
Login
3942
</router-link>

‎frontend/src/components/icons/IconMobileMenu.vue

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<template>
2+
<svg class="h-8 w-8"
3+
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h16M4 12h16m-7 6h7" /></svg>
4+
</template>

0 commit comments

Comments
 (0)