nezumi/9router
1
0
Fork 0
mirror of https://github.com/Nezumi-2711/9router.git synced 2026-09-22 13:38:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Enhance layout

Browse Source
This commit is contained in:
decolua
2026-01-31 12:58:04 +07:00
parent 8c37b39eed
commit 8897df5036
23 changed files with 458 additions and 326 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/shared/components/Sidebar.js
+31 -19
View File
@@ -62,9 +62,16 @@ export default function Sidebar({ onClose }) {
return (
<>
<aside className="flex w-72 flex-col border-r border-border bg-sidebar transition-colors duration-300">
<aside className="flex w-72 flex-col border-r border-black/5 dark:border-white/5 bg-vibrancy backdrop-blur-xl transition-colors duration-300">
{/* Traffic lights */}
<div className="flex items-center gap-2 px-6 pt-5 pb-2">
<div className="w-3 h-3 rounded-full bg-[#FF5F56]" />
<div className="w-3 h-3 rounded-full bg-[#FFBD2E]" />
<div className="w-3 h-3 rounded-full bg-[#27C93F]" />
</div>
{/* Logo */}
<div className="p-8">
<div className="px-6 py-4">
<Link href="/dashboard" className="flex items-center gap-3">
<div className="flex items-center justify-center size-9 rounded bg-linear-to-br from-[#f97815] to-[#c2590a]">
<span className="material-symbols-outlined text-white text-[20px]">hub</span>
@@ -83,15 +90,15 @@ export default function Sidebar({ onClose }) {
href={item.href}
onClick={onClose}
className={cn(
"flex items-center gap-3 px-4 py-3 rounded-lg transition-all group",
"flex items-center gap-3 px-4 py-2 rounded-lg transition-all group",
isActive(item.href)
? "bg-surface text-primary shadow-sm border border-border"
? "bg-primary/10 text-primary"
: "text-text-muted hover:bg-surface/50 hover:text-text-main"
)}
>
<span
className={cn(
"material-symbols-outlined text-[20px]",
"material-symbols-outlined text-[18px]",
isActive(item.href) ? "fill-1" : "group-hover:text-primary transition-colors"
)}
>
@@ -103,8 +110,8 @@ export default function Sidebar({ onClose }) {
{/* Debug section (only show when ENABLE_REQUEST_LOGS=true) */}
{showDebug && (
<div className="pt-6 mt-2">
<p className="px-4 text-xs font-semibold text-text-muted/60 uppercase tracking-wider mb-3">
<div className="pt-4 mt-2">
<p className="px-4 text-xs font-semibold text-text-muted/60 uppercase tracking-wider mb-2">
Debug
</p>
{debugItems.map((item) => (
@@ -113,15 +120,15 @@ export default function Sidebar({ onClose }) {
href={item.href}
onClick={onClose}
className={cn(
"flex items-center gap-3 px-4 py-3 rounded-lg transition-all group",
"flex items-center gap-3 px-4 py-2 rounded-lg transition-all group",
isActive(item.href)
? "bg-surface text-primary shadow-sm border border-border"
? "bg-primary/10 text-primary"
: "text-text-muted hover:bg-surface/50 hover:text-text-main"
)}
>
<span
className={cn(
"material-symbols-outlined text-[20px]",
"material-symbols-outlined text-[18px]",
isActive(item.href) ? "fill-1" : "group-hover:text-primary transition-colors"
)}
>
@@ -134,8 +141,8 @@ export default function Sidebar({ onClose }) {
)}
{/* System section */}
<div className="pt-6 mt-2">
<p className="px-4 text-xs font-semibold text-text-muted/60 uppercase tracking-wider mb-3">
<div className="pt-4 mt-2">
<p className="px-4 text-xs font-semibold text-text-muted/60 uppercase tracking-wider mb-2">
System
</p>
{systemItems.map((item) => (
@@ -144,13 +151,18 @@ export default function Sidebar({ onClose }) {
href={item.href}
onClick={onClose}
className={cn(
"flex items-center gap-3 px-4 py-3 rounded-lg transition-all group",
"flex items-center gap-3 px-4 py-2 rounded-lg transition-all group",
isActive(item.href)
? "bg-surface text-primary shadow-sm border border-border"
? "bg-primary/10 text-primary"
: "text-text-muted hover:bg-surface/50 hover:text-text-main"
)}
>
<span className="material-symbols-outlined text-[20px] group-hover:text-primary transition-colors">
<span
className={cn(
"material-symbols-outlined text-[18px]",
isActive(item.href) ? "fill-1" : "group-hover:text-primary transition-colors"
)}
>
{item.icon}
</span>
<span className="text-sm font-medium">{item.label}</span>
@@ -160,11 +172,11 @@ export default function Sidebar({ onClose }) {
</nav>
{/* Footer section */}
<div className="p-4 border-t border-border">
<div className="p-3 border-t border-black/5 dark:border-white/5">
{/* Info message */}
<div className="flex items-start gap-3 p-3 rounded-xl bg-surface border border-border mb-3">
<div className="flex items-center justify-center size-8 rounded-lg bg-blue-500/10 text-blue-500 shrink-0 mt-0.5">
<span className="material-symbols-outlined text-[18px]">info</span>
<div className="flex items-start gap-2 p-2 rounded-lg bg-surface/50 mb-2">
<div className="flex items-center justify-center size-6 rounded-md bg-blue-500/10 text-blue-500 shrink-0 mt-0.5">
<span className="material-symbols-outlined text-[14px]">info</span>
</div>
<div className="flex flex-col">
<span className="text-xs font-medium text-text-main leading-relaxed">