463 lines
6.0 KiB
JavaScript
463 lines
6.0 KiB
JavaScript
import { useContext } from "react"
|
|
import { AuthContext } from "../context/AuthContext"
|
|
|
|
export default function Sidebar({
|
|
setPage,
|
|
currentPage
|
|
}) {
|
|
|
|
const { user, logout } =
|
|
useContext(AuthContext)
|
|
|
|
const role =
|
|
user?.role?.toLowerCase()
|
|
|
|
const menuUser = [
|
|
{
|
|
key: "dashboard",
|
|
icon: "🏠",
|
|
label: "Dashboard"
|
|
},
|
|
|
|
{
|
|
key: "history",
|
|
icon: "📜",
|
|
label: "History Pembelian"
|
|
},
|
|
]
|
|
|
|
const menuAdmin = [
|
|
{
|
|
key: "admin",
|
|
icon: "📊",
|
|
label: "Admin Dashboard"
|
|
},
|
|
|
|
// {
|
|
// key: "history",
|
|
// icon: "📦",
|
|
// label: "Semua Pesanan"
|
|
// },
|
|
]
|
|
|
|
const menu =
|
|
role === "admin"
|
|
? menuAdmin
|
|
: menuUser
|
|
|
|
return (
|
|
|
|
<div style={s.sidebar}>
|
|
|
|
{/* LOGO */}
|
|
|
|
<div style={s.logoWrap}>
|
|
|
|
<div style={s.logoIcon}>
|
|
🥚
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<div style={s.logoText}>
|
|
Sadewa
|
|
</div>
|
|
|
|
<div style={s.logoSub}>
|
|
Egg Management
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{/* USER CARD */}
|
|
|
|
<div style={s.userCard}>
|
|
|
|
<div style={s.avatar}>
|
|
{
|
|
(user?.nama || "G")[0]
|
|
.toUpperCase()
|
|
}
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<div style={s.userName}>
|
|
{user?.nama || "Guest"}
|
|
</div>
|
|
|
|
<div style={s.userRole}>
|
|
{role || "user"}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{/* NAVIGATION */}
|
|
|
|
<nav style={s.nav}>
|
|
|
|
{menu.map(m => (
|
|
|
|
<button
|
|
key={m.key}
|
|
|
|
onClick={() =>
|
|
setPage(m.key)
|
|
}
|
|
|
|
style={{
|
|
...s.menuBtn,
|
|
|
|
...(currentPage === m.key
|
|
? s.menuBtnActive
|
|
: {})
|
|
}}
|
|
>
|
|
|
|
<span style={s.menuIcon}>
|
|
{m.icon}
|
|
</span>
|
|
|
|
<span style={s.menuLabel}>
|
|
{m.label}
|
|
</span>
|
|
|
|
{currentPage === m.key && (
|
|
|
|
<div style={s.activeWrap}>
|
|
|
|
<span style={s.activeText}>
|
|
Active
|
|
</span>
|
|
|
|
<span style={s.activeDot} />
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</button>
|
|
|
|
))}
|
|
|
|
</nav>
|
|
|
|
{/* FOOTER */}
|
|
|
|
<div style={{ flex: 1 }} />
|
|
|
|
<button
|
|
onClick={logout}
|
|
style={s.logoutBtn}
|
|
>
|
|
|
|
<span>
|
|
🚪
|
|
</span>
|
|
|
|
Logout
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
)
|
|
}
|
|
|
|
const s = {
|
|
|
|
sidebar: {
|
|
|
|
width: 260,
|
|
|
|
minHeight: "100vh",
|
|
|
|
padding: "22px 16px",
|
|
|
|
boxSizing: "border-box",
|
|
|
|
display: "flex",
|
|
|
|
flexDirection: "column",
|
|
|
|
background: `
|
|
linear-gradient(
|
|
180deg,
|
|
rgba(124,45,18,0.98),
|
|
rgba(154,52,18,0.96),
|
|
rgba(194,65,12,0.95)
|
|
)
|
|
`,
|
|
|
|
borderRight:
|
|
"1px solid rgba(255,255,255,0.08)",
|
|
|
|
backdropFilter: "blur(12px)",
|
|
|
|
boxShadow:
|
|
"10px 0 30px rgba(0,0,0,0.25)",
|
|
},
|
|
|
|
logoWrap: {
|
|
|
|
display: "flex",
|
|
|
|
alignItems: "center",
|
|
|
|
gap: 12,
|
|
|
|
marginBottom: 28,
|
|
|
|
padding: "4px 6px",
|
|
},
|
|
|
|
logoIcon: {
|
|
|
|
width: 50,
|
|
|
|
height: 50,
|
|
|
|
borderRadius: 16,
|
|
|
|
background:
|
|
"linear-gradient(135deg, #f59e0b, #fb923c)",
|
|
|
|
display: "flex",
|
|
|
|
alignItems: "center",
|
|
|
|
justifyContent: "center",
|
|
|
|
fontSize: 24,
|
|
|
|
boxShadow:
|
|
"0 10px 30px rgba(245,158,11,0.35)",
|
|
},
|
|
|
|
logoText: {
|
|
|
|
color: "#fff7ed",
|
|
|
|
fontSize: 20,
|
|
|
|
fontWeight: 700,
|
|
|
|
lineHeight: 1,
|
|
},
|
|
|
|
logoSub: {
|
|
|
|
marginTop: 4,
|
|
|
|
color: "#fed7aa",
|
|
|
|
fontSize: 12,
|
|
},
|
|
|
|
userCard: {
|
|
|
|
display: "flex",
|
|
|
|
alignItems: "center",
|
|
|
|
gap: 12,
|
|
|
|
padding: "14px",
|
|
|
|
marginBottom: 26,
|
|
|
|
borderRadius: 18,
|
|
|
|
background:
|
|
"rgba(255,255,255,0.08)",
|
|
|
|
border:
|
|
"1px solid rgba(255,255,255,0.08)",
|
|
|
|
backdropFilter: "blur(12px)",
|
|
|
|
boxShadow:
|
|
"0 10px 25px rgba(0,0,0,0.15)",
|
|
},
|
|
|
|
avatar: {
|
|
|
|
width: 42,
|
|
|
|
height: 42,
|
|
|
|
borderRadius: "50%",
|
|
|
|
background:
|
|
"linear-gradient(135deg, #fbbf24, #f97316)",
|
|
|
|
display: "flex",
|
|
|
|
alignItems: "center",
|
|
|
|
justifyContent: "center",
|
|
|
|
fontWeight: 700,
|
|
|
|
color: "white",
|
|
|
|
fontSize: 15,
|
|
|
|
flexShrink: 0,
|
|
},
|
|
|
|
userName: {
|
|
|
|
color: "#fff7ed",
|
|
|
|
fontSize: 14,
|
|
|
|
fontWeight: 600,
|
|
},
|
|
|
|
userRole: {
|
|
|
|
marginTop: 3,
|
|
|
|
color: "#fdba74",
|
|
|
|
fontSize: 12,
|
|
|
|
textTransform: "capitalize",
|
|
},
|
|
|
|
nav: {
|
|
|
|
display: "flex",
|
|
|
|
flexDirection: "column",
|
|
|
|
gap: 8,
|
|
},
|
|
|
|
menuBtn: {
|
|
|
|
border: "none",
|
|
|
|
background: "transparent",
|
|
|
|
color: "#fed7aa",
|
|
|
|
padding: "13px 14px",
|
|
|
|
borderRadius: 14,
|
|
|
|
display: "flex",
|
|
|
|
alignItems: "center",
|
|
|
|
gap: 12,
|
|
|
|
cursor: "pointer",
|
|
|
|
transition: "all 0.2s ease",
|
|
|
|
position: "relative",
|
|
|
|
fontSize: 14,
|
|
|
|
boxShadow:
|
|
"0 4px 10px rgba(0,0,0,0.08)",
|
|
},
|
|
|
|
menuBtnActive: {
|
|
|
|
background:
|
|
"linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.08))",
|
|
|
|
color: "#ffffff",
|
|
|
|
fontWeight: 700,
|
|
|
|
border:
|
|
"1px solid rgba(255,255,255,0.12)",
|
|
|
|
boxShadow:
|
|
"0 10px 25px rgba(0,0,0,0.18)",
|
|
|
|
transform: "translateX(4px)",
|
|
},
|
|
|
|
menuIcon: {
|
|
fontSize: 17,
|
|
},
|
|
|
|
menuLabel: {
|
|
flex: 1,
|
|
textAlign: "left",
|
|
},
|
|
|
|
activeWrap: {
|
|
|
|
marginLeft: "auto",
|
|
|
|
display: "flex",
|
|
|
|
alignItems: "center",
|
|
|
|
gap: 8,
|
|
},
|
|
|
|
activeText: {
|
|
|
|
fontSize: 11,
|
|
|
|
color: "#fde68a",
|
|
|
|
fontWeight: 700,
|
|
|
|
letterSpacing: "0.03em",
|
|
},
|
|
|
|
activeDot: {
|
|
|
|
width: 10,
|
|
|
|
height: 10,
|
|
|
|
borderRadius: "50%",
|
|
|
|
background: "#fbbf24",
|
|
|
|
boxShadow:
|
|
"0 0 14px rgba(251,191,36,0.95)",
|
|
},
|
|
|
|
logoutBtn: {
|
|
|
|
border:
|
|
"1px solid rgba(255,255,255,0.12)",
|
|
|
|
background:
|
|
"rgba(255,255,255,0.06)",
|
|
|
|
color: "#fff7ed",
|
|
|
|
padding: "13px 14px",
|
|
|
|
borderRadius: 14,
|
|
|
|
display: "flex",
|
|
|
|
alignItems: "center",
|
|
|
|
gap: 10,
|
|
|
|
cursor: "pointer",
|
|
|
|
fontSize: 14,
|
|
|
|
transition: "0.2s",
|
|
|
|
backdropFilter: "blur(10px)",
|
|
},
|
|
} |