Grey/TugasPaaS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fitur fitur darkmode dan foto foto

Browse Source
This commit is contained in:
Hafiz Arintaka
2026-05-19 10:47:55 +07:00
parent 7e1cb94689
commit 6c36f7565e
57 changed files with 7867 additions and 236 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Navbar.vue
+41 -64
View File
@@ -2,12 +2,8 @@
<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 items-center justify-center">
<img
src="/round-logo-sija.png"
alt="SecondTech Logo"
class="h-10 w-10 object-contain"
/>
<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>
@@ -18,41 +14,24 @@
<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>
<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>
<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>
<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>
@@ -68,37 +47,26 @@
<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>
<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>
<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>
<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>
<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>
@@ -108,17 +76,16 @@
<script setup>
import { computed, onMounted, ref, watch } from "vue"
import { useRoute, useRouter } from "vue-router"
import { Cpu, Menu } from "lucide-vue-next"
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(() => {
return currentUser.value?.role === "superadmin"
})
const isSuperadmin = computed(() => currentUser.value?.role === "superadmin")
watch(
() => route.fullPath,
@@ -127,15 +94,22 @@ watch(
}
)
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
})
setAuth({ token: getToken(), user: data.user })
currentUser.value = getCurrentUser()
} catch {
clearAuth()
@@ -150,7 +124,10 @@ function logout() {
router.push("/login")
}
onMounted(refreshCurrentUser)
onMounted(() => {
applyTheme()
refreshCurrentUser()
})
</script>
<style scoped>