91 lines
3.4 KiB
Vue
91 lines
3.4 KiB
Vue
<template>
|
|
<header class="sticky top-0 z-50 border-b border-slate-200 bg-white/90 backdrop-blur">
|
|
<div class="container-page flex h-16 items-center justify-between">
|
|
<RouterLink to="/" class="flex items-center gap-2">
|
|
<div class="flex h-9 w-9 items-center justify-center rounded-xl bg-brand-600 text-white">
|
|
<Cpu size="20" />
|
|
</div>
|
|
<span class="text-lg font-extrabold tracking-tight">SecondTech</span>
|
|
</RouterLink>
|
|
|
|
<nav class="hidden items-center gap-6 md:flex">
|
|
<RouterLink class="nav-link" to="/">Home</RouterLink>
|
|
<RouterLink class="nav-link" to="/marketplace">Marketplace</RouterLink>
|
|
<RouterLink class="nav-link" to="/jual">Jual Barang</RouterLink>
|
|
<RouterLink class="nav-link" to="/dashboard">Dashboard</RouterLink>
|
|
<RouterLink class="nav-link" to="/tersimpan">Tersimpan</RouterLink>
|
|
</nav>
|
|
|
|
<div class="hidden items-center gap-3 md:flex">
|
|
<template v-if="currentUser">
|
|
<span class="text-sm font-bold text-slate-700">{{ currentUser.name }}</span>
|
|
<button class="btn-secondary !px-4 !py-2" @click="logout">Logout</button>
|
|
</template>
|
|
<template v-else>
|
|
<RouterLink to="/login" class="btn-secondary !px-4 !py-2">Login</RouterLink>
|
|
<RouterLink to="/register" class="btn-primary !px-4 !py-2">Register</RouterLink>
|
|
</template>
|
|
</div>
|
|
|
|
<button class="rounded-xl border border-slate-200 p-2 md:hidden" @click="open = !open">
|
|
<Menu />
|
|
</button>
|
|
</div>
|
|
|
|
<div v-if="open" class="border-t border-slate-200 bg-white md:hidden">
|
|
<div class="container-page grid gap-2 py-4">
|
|
<RouterLink class="mobile-link" to="/" @click="open=false">Home</RouterLink>
|
|
<RouterLink class="mobile-link" to="/marketplace" @click="open=false">Marketplace</RouterLink>
|
|
<RouterLink class="mobile-link" to="/jual" @click="open=false">Jual Barang</RouterLink>
|
|
<RouterLink class="mobile-link" to="/dashboard" @click="open=false">Dashboard</RouterLink>
|
|
<RouterLink class="mobile-link" to="/tersimpan" @click="open=false">Tersimpan</RouterLink>
|
|
<div v-if="currentUser" class="mt-2 grid gap-2">
|
|
<button class="btn-secondary !py-2 text-center" @click="logout">Logout</button>
|
|
</div>
|
|
<div v-else class="mt-2 grid grid-cols-2 gap-2">
|
|
<RouterLink to="/login" class="btn-secondary !py-2 text-center" @click="open=false">Login</RouterLink>
|
|
<RouterLink to="/register" class="btn-primary !py-2 text-center" @click="open=false">Register</RouterLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watch } from "vue"
|
|
import { useRoute, useRouter } from "vue-router"
|
|
import { Cpu, Menu } from "lucide-vue-next"
|
|
import { clearAuth, getCurrentUser } from "../utils"
|
|
|
|
const open = ref(false)
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const currentUser = ref(getCurrentUser())
|
|
|
|
watch(
|
|
() => route.fullPath,
|
|
() => {
|
|
currentUser.value = getCurrentUser()
|
|
}
|
|
)
|
|
|
|
function logout() {
|
|
clearAuth()
|
|
currentUser.value = null
|
|
open.value = false
|
|
router.push("/login")
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.nav-link {
|
|
@apply text-sm font-semibold text-slate-600 transition hover:text-brand-700;
|
|
}
|
|
.router-link-active {
|
|
@apply text-brand-700;
|
|
}
|
|
.mobile-link {
|
|
@apply rounded-xl px-3 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-100;
|
|
}
|
|
</style>
|