mohs/sass-mohfarawati
1
0
Fork 0
Code Issues Pull Requests Actions 8 Packages Projects Releases Wiki Activity

Refine root sidebar and header controls

Browse Source
This commit is contained in:
MOH
2026-03-08 23:16:36 +01:00
parent 1d4c2f8e72
commit 3e835ee620
5 changed files with 103 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/dashboard/sidebar.tsx
+36 -11
View File
@@ -17,11 +17,22 @@ type DashboardSidebarItem = {
type DashboardSidebarProps = {
items: DashboardSidebarItem[];
iconSrc?: string;
brandHref?: string;
brandHoverLabel?: string;
top?: ReactNode;
footerItems?: DashboardSidebarItem[];
footer?: ReactNode;
};
export function DashboardSidebar({ items, iconSrc, top, footer }: DashboardSidebarProps) {
export function DashboardSidebar({
items,
iconSrc,
brandHref = "/",
brandHoverLabel,
top,
footerItems = [],
footer,
}: DashboardSidebarProps) {
function renderItem(item: DashboardSidebarItem, nested = false) {
const Icon = item.icon;
const hasChildren = Boolean(item.children?.length);
@@ -50,8 +61,11 @@ export function DashboardSidebar({ items, iconSrc, top, footer }: DashboardSideb
return (
<div className="flex h-full flex-col bg-sidebar/40">
<div className="flex items-center gap-3 px-4 py-5">
<div className="overflow-hidden rounded-surface border border-border/70 bg-background shadow-sm">
<Link
href={brandHref}
className="group mx-4 mt-4 flex items-center gap-3 rounded-surface px-2 py-2 transition-colors hover:bg-muted/60"
>
<div className="overflow-hidden rounded-surface border border-border/70 bg-background shadow-sm transition-transform duration-200 group-hover:scale-105">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
src={iconSrc || "/favicon.ico"}
@@ -59,24 +73,35 @@ export function DashboardSidebar({ items, iconSrc, top, footer }: DashboardSideb
className="h-9 w-9 object-cover"
/>
</div>
<div className="min-w-0">
<p className="truncate text-sm font-semibold text-foreground">Mohs Admin</p>
<p className="truncate text-xs text-muted-foreground">Website owner workspace</p>
<div className="relative min-h-[2.5rem] min-w-0 flex-1 overflow-hidden">
<div className="absolute inset-0 origin-left transition-all duration-200 group-hover:-translate-y-1 group-hover:opacity-0">
<p className="truncate text-sm font-semibold text-foreground">Mohs Admin</p>
<p className="truncate text-xs text-muted-foreground">Website owner workspace</p>
</div>
<div className="absolute inset-0 flex items-center">
<p className="truncate text-sm font-semibold text-foreground opacity-0 transition-opacity duration-200 group-hover:opacity-100">
{brandHoverLabel ?? "Back to Home"}
</p>
</div>
</div>
</div>
</Link>
{top ? <div className="px-4">{top}</div> : null}
{top ? <div className="px-4 pt-2">{top}</div> : null}
<Separator className="my-4" />
<Separator className="mb-4 mt-3" />
<div className="flex-1 space-y-6 overflow-y-auto px-4 pb-4">
<nav className="space-y-1">{items.map((item) => renderItem(item))}</nav>
</div>
{footer ? (
{footer || footerItems.length ? (
<>
<Separator />
<div className="space-y-2 p-4">{footer}</div>
<div className="space-y-2 p-4">
{footerItems.length ? <nav className="space-y-1">{footerItems.map((item) => renderItem(item))}</nav> : null}
{footerItems.length && footer ? <Separator /> : null}
{footer}
</div>
</>
) : null}
</div>