Gitead/DentalManagementE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature(Ui fix) - sidebar now completly shrinks

Browse Source
This commit is contained in:
Potenz
2025-09-11 00:55:39 +05:30
parent 814bc12980
commit 29ca3ed0a7
1 changed files with 5 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
apps/Frontend/src/components/layout/sidebar.tsx
View File

@@ -12,33 +12,13 @@ import {
FileText, FileText,
} from "lucide-react"; } from "lucide-react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { useEffect, useMemo, useState } from "react"; import { useMemo } from "react";
import { useSidebar } from "@/components/ui/sidebar"; import { useSidebar } from "@/components/ui/sidebar";
const WIDTH_ANIM_MS = 100;
export function Sidebar() { export function Sidebar() {
const [location] = useLocation(); const [location] = useLocation();
const { state, openMobile, setOpenMobile } = useSidebar(); // "expanded" | "collapsed" const { state, openMobile, setOpenMobile } = useSidebar(); // "expanded" | "collapsed"
// Delay label visibility until the width animation completes
const [showLabels, setShowLabels] = useState(state !== "collapsed");
useEffect(() => {
let timer: number | undefined;
if (state === "expanded") {
timer = window.setTimeout(() => setShowLabels(true), WIDTH_ANIM_MS);
} else {
setShowLabels(false);
}
return () => {
if (timer !== undefined) {
window.clearTimeout(timer);
}
};
}, [state]);
const navItems = useMemo( const navItems = useMemo(
() => [ () => [
{ {
@@ -110,7 +90,7 @@ export function Sidebar() {
: "hidden md:block", : "hidden md:block",
// DESKTOP: participates in row layout // DESKTOP: participates in row layout
"md:static md:top-auto md:h-auto md:flex-shrink-0", "md:static md:top-auto md:h-auto md:flex-shrink-0",
state === "collapsed" ? "md:w-16" : "md:w-64" state === "collapsed" ? "md:w-0 overflow-hidden" : "md:w-64"
)} )}
> >
<div className="p-2"> <div className="p-2">
@@ -128,11 +108,9 @@ export function Sidebar() {
> >
{item.icon} {item.icon}
{/* show label only after expand animation completes */} {/* show label only after expand animation completes */}
{showLabels && (
<span className="whitespace-nowrap select-none"> <span className="whitespace-nowrap select-none">
{item.name} {item.name}
</span> </span>
)}
</div> </div>
</Link> </Link>
</div> </div>