Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 18x 4x 4x 18x 18x 18x 1x 1x | <template>
<nav class="navbar navbar-expand navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/">
<img src="@/assets/logo.svg" alt="Flows Logo" class="logo me-2" />
Flows
</a>
<div class="navbar-nav ms-auto align-items-center">
<!-- Profile Button (was router-link) -->
<button class="btn btn-outline-light me-3" @click="goToProfile">
<font-awesome-icon icon="fa-solid fa-user" class="me-1" />
{{ t('navigation.profile') }}
</button>
<!-- Sign Out Button -->
<button class="btn btn-light" @click="handleLogout">
{{ t('navigation.signOut') }}
</button>
</div>
</div>
</nav>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { useUILanguage } from '@/composables/useUILanguage'
const router = useRouter()
const authStore = useAuthStore()
const { t } = useUILanguage()
function goToProfile() {
router.push('/profile')
}
async function handleLogout() {
await authStore.logout()
router.push('/login')
}
</script>
<style scoped>
.navbar {
z-index: 1100;
margin: 0;
border-radius: 0;
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-left: 1rem !important;
}
.dropdown {
position: relative;
}
.dropdown-menu {
position: absolute;
top: 100%;
right: 0;
z-index: 1150;
margin-top: 0.125rem;
}
.dropdown-menu.show {
display: block;
}
.navbar-brand {
font-size: 1.5rem;
font-weight: 500;
}
.logo {
height: 48px;
width: auto;
vertical-align: middle;
}
/* Mobile header */
@media (max-width: 767px) {
.navbar {
padding-top: 0.15rem;
padding-bottom: 0.15rem;
padding-left: 1rem !important;
padding-right: 0.5rem !important;
}
.navbar-brand {
font-size: 1.1rem;
}
.logo {
height: 36px;
}
.btn {
font-size: 0.85rem;
padding: 0.25rem 0.5rem;
}
}
</style>
|