TugasPaaS/src/components/Navbar.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>
        <RouterLink v-if="isSuperadmin" class="nav-link" to="/admin/products">Admin Marketplace</RouterLink>
      </nav>

      <div class="hidden items-center gap-3 md:flex">
        <button type="button" class="btn-secondary !px-3 !py-2" @click="toggleTheme">
          <Sun v-if="darkMode" size="18" />
          <Moon v-else size="18" />
        </button>

        <template v-if="currentUser">
          <span class="text-sm font-bold text-slate-700">{{ currentUser.name }}</span>
          <span v-if="isSuperadmin" class="rounded-full bg-red-50 px-3 py-1 text-xs font-bold text-red-700">Superadmin</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>
        <RouterLink v-if="isSuperadmin" class="mobile-link" to="/admin/products" @click="open = false">Admin Marketplace</RouterLink>

        <button type="button" class="btn-secondary mt-2 !py-2 text-center" @click="toggleTheme">
          <Sun v-if="darkMode" size="18" />
          <Moon v-else size="18" />
          {{ darkMode ? "Light Mode" : "Dark Mode" }}
        </button>

        <div v-if="currentUser" class="mt-2 grid gap-2">
          <div class="rounded-xl bg-slate-50 px-3 py-2">
            <p class="text-sm font-bold text-slate-800">{{ currentUser.name }}</p>
            <p class="text-xs text-slate-500">{{ currentUser.email }}</p>
            <p v-if="isSuperadmin" class="mt-1 text-xs font-bold text-red-700">Superadmin</p>
          </div>
          <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 { computed, onMounted, ref, watch } from "vue"
import { useRoute, useRouter } from "vue-router"
import { Cpu, Menu, Moon, Sun } from "lucide-vue-next"
import { clearAuth, fetchCurrentUser, getCurrentUser, getToken, setAuth } from "../utils"

const open = ref(false)
const route = useRoute()
const router = useRouter()
const currentUser = ref(getCurrentUser())
const darkMode = ref(localStorage.getItem("secondtech_theme") === "dark")

const isSuperadmin = computed(() => currentUser.value?.role === "superadmin")

watch(
  () => route.fullPath,
  () => {
    currentUser.value = getCurrentUser()
  }
)

function applyTheme() {
  document.documentElement.classList.toggle("dark", darkMode.value)
  localStorage.setItem("secondtech_theme", darkMode.value ? "dark" : "light")
}

function toggleTheme() {
  darkMode.value = !darkMode.value
  applyTheme()
}

async function refreshCurrentUser() {
  if (!getToken()) return

  try {
    const data = await fetchCurrentUser()
    setAuth({ token: getToken(), user: data.user })
    currentUser.value = getCurrentUser()
  } catch {
    clearAuth()
    currentUser.value = null
  }
}

function logout() {
  clearAuth()
  currentUser.value = null
  open.value = false
  router.push("/login")
}

onMounted(() => {
  applyTheme()
  refreshCurrentUser()
})
</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>