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

applayout added, sidebar updated

Browse Source
This commit is contained in:
Potenz
2025-08-26 20:30:00 +05:30
parent 09873596dc
commit ca59f647a2
17 changed files with 1665 additions and 1479 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
apps/Frontend/src/components/layout/app-layout.tsx Normal file
View File

@@ -0,0 +1,25 @@
import { SidebarProvider } from "@/components/ui/sidebar";
import { Sidebar } from "@/components/layout/sidebar";
import { TopAppBar } from "@/components/layout/top-app-bar";
export default function AppLayout({ children }: { children: React.ReactNode }) {
return (
<SidebarProvider defaultOpen>
<div className="flex flex-col h-screen">
{/* Fixed top bar */}
<TopAppBar />
{/* Main content area */}
<div className="flex flex-1 pt-16 min-h-0 bg-gray-100">
{/* Sidebar (collapsible on mobile) */}
<Sidebar />
{/* Page content */}
<main className="flex-1 min-w-0 min-h-0 overflow-y-auto p-4">
{children}
</main>
</div>
</div>
</SidebarProvider>
);
}

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

@@ -9,96 +9,115 @@ import {
CreditCard,
FolderOpen,
Database,
FileText,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { useEffect, useMemo, useState } from "react";
import { useSidebar } from "@/components/ui/sidebar";
interface SidebarProps {
isMobileOpen: boolean;
setIsMobileOpen: (open: boolean) => void;
}
const WIDTH_ANIM_MS = 100;
export function Sidebar({ isMobileOpen, setIsMobileOpen }: SidebarProps) {
export function Sidebar() {
const [location] = useLocation();
const { state, openMobile, setOpenMobile } = useSidebar(); // "expanded" | "collapsed"
const navItems = [
{
name: "Dashboard",
path: "/",
icon: <LayoutDashboard className="h-5 w-5" />,
},
{
name: "Appointments",
path: "/appointments",
icon: <Calendar className="h-5 w-5" />,
},
{
name: "Patients",
path: "/patients",
icon: <Users className="h-5 w-5" />,
},
{
name: "Insurance Eligibility",
path: "/insurance-eligibility",
icon: <Shield className="h-5 w-5" />,
},
{
name: "Claims",
path: "/claims",
icon: <FileCheck className="h-5 w-5" />,
},
{
name: "Payments",
path: "/payments",
icon: <CreditCard className="h-5 w-5" />,
},
{
name: "Documents",
path: "/documents",
icon: <FolderOpen className="h-5 w-5" />,
},
{
name: "Backup Database",
path: "/database-management",
icon: <Database className="h-5 w-5" />,
},
{
name: "Settings",
path: "/settings",
icon: <Settings className="h-5 w-5" />,
},
];
// 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(
() => [
{
name: "Dashboard",
path: "/",
icon: <LayoutDashboard className="h-5 w-5" />,
},
{
name: "Appointments",
path: "/appointments",
icon: <Calendar className="h-5 w-5" />,
},
{
name: "Patients",
path: "/patients",
icon: <Users className="h-5 w-5" />,
},
{
name: "Insurance Eligibility",
path: "/insurance-eligibility",
icon: <Shield className="h-5 w-5" />,
},
{
name: "Claims",
path: "/claims",
icon: <FileCheck className="h-5 w-5" />,
},
{
name: "Payments",
path: "/payments",
icon: <CreditCard className="h-5 w-5" />,
},
{
name: "Documents",
path: "/documents",
icon: <FolderOpen className="h-5 w-5" />,
},
{
name: "Reports",
path: "/reports",
icon: <FileText className="h-5 w-5" />,
},
{
name: "Backup Database",
path: "/database-management",
icon: <Database className="h-5 w-5" />,
},
{
name: "Settings",
path: "/settings",
icon: <Settings className="h-5 w-5" />,
},
],
[]
);
return (
<div
className={cn(
"bg-white w-64 border-r border-gray-200 shadow-sm z-10 fixed h-full md:static",
isMobileOpen ? "block" : "hidden md:block"
// original look
"bg-white border-r border-gray-200 shadow-sm z-20",
// clip during width animation to avoid text peeking
"overflow-hidden will-change-[width]",
// animate width only
"transition-[width] duration-200 ease-in-out",
// MOBILE: overlay below topbar (h = 100vh - 4rem)
openMobile
? "fixed top-16 left-0 h-[calc(100vh-4rem)] w-64 block md:hidden"
: "hidden md:block",
// DESKTOP: participates in row layout
"md:static md:top-auto md:h-auto md:flex-shrink-0",
state === "collapsed" ? "md:w-16" : "md:w-64"
)}
>
<div className="p-4 border-b border-gray-200 flex items-center space-x-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="h-5 w-5 text-primary"
>
<path d="M12 14c-1.65 0-3-1.35-3-3V5c0-1.65 1.35-3 3-3s3 1.35 3 3v6c0 1.65-1.35 3-3 3Z" />
<path d="M19 14v-4a7 7 0 0 0-14 0v4" />
<path d="M12 19c-5 0-8-2-9-5.5m18 0c-1 3.5-4 5.5-9 5.5Z" />
</svg>
<h1 className="text-lg font-medium text-primary">DentalConnect</h1>
</div>
<div className="p-2">
<nav>
<nav role="navigation" aria-label="Main">
{navItems.map((item) => (
<div key={item.path}>
<Link to={item.path} onClick={() => setIsMobileOpen(false)}>
<Link to={item.path} onClick={() => setOpenMobile(false)}>
<div
className={cn(
"flex items-center space-x-3 p-2 rounded-md pl-3 mb-1 transition-colors cursor-pointer",
@@ -108,7 +127,12 @@ export function Sidebar({ isMobileOpen, setIsMobileOpen }: SidebarProps) {
)}
>
{item.icon}
<span>{item.name}</span>
{/* show label only after expand animation completes */}
{showLabels && (
<span className="whitespace-nowrap select-none">
{item.name}
</span>
)}
</div>
</Link>
</div>

55
apps/Frontend/src/components/layout/top-app-bar.tsx
View File

@@ -1,4 +1,3 @@
import { Bell, Menu } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { useAuth } from "@/hooks/use-auth";
@@ -11,47 +10,45 @@ import {
} from "@/components/ui/dropdown-menu";
import { useLocation } from "wouter";
import { NotificationsBell } from "@/components/layout/notification-bell";
import { SidebarTrigger } from "@/components/ui/sidebar";
interface TopAppBarProps {
toggleMobileMenu: () => void;
}
export function TopAppBar({ toggleMobileMenu }: TopAppBarProps) {
export function TopAppBar() {
const { user, logoutMutation } = useAuth();
const [location, setLocation] = useLocation();
const handleLogout = () => {
logoutMutation.mutate();
};
const getInitials = (username: string) => {
return username.substring(0, 2).toUpperCase();
};
const handleLogout = () => logoutMutation.mutate();
const getInitials = (username: string) =>
username.substring(0, 2).toUpperCase();
return (
<header className="bg-white shadow-sm z-10">
<header className="bg-white shadow-sm z-30 fixed top-0 left-0 right-0">
<div className="flex items-center justify-between h-16 px-4">
<div className="flex items-center">
<Button
variant="ghost"
size="icon"
className="md:hidden mr-2"
onClick={toggleMobileMenu}
>
<Menu className="h-5 w-5" />
</Button>
<h1 className="md:hidden text-lg font-medium text-primary">
DentalConnect
</h1>
</div>
{/* both desktop + mobile triggers */}
<SidebarTrigger className="mr-2" />
<div className="hidden md:flex md:flex-1 items-center justify-center">
{/* Search bar removed */}
<div className="p-4 border-gray-200 flex items-center space-x-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="h-5 w-5 text-primary"
>
<path d="M12 14c-1.65 0-3-1.35-3-3V5c0-1.65 1.35-3 3-3s3 1.35 3 3v6c0 1.65-1.35 3-3 3Z" />
<path d="M19 14v-4a7 7 0 0 0-14 0v4" />
<path d="M12 19c-5 0-8-2-9-5.5m18 0c-1 3.5-4 5.5-9 5.5Z" />
</svg>
<h1 className="text-lg font-medium text-primary">DentalConnect</h1>
</div>
</div>
<div className="flex items-center space-x-3">
<NotificationsBell />
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button

325
apps/Frontend/src/components/ui/sidebar.tsx
View File

@@ -1,62 +1,69 @@
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { VariantProps, cva } from "class-variance-authority"
import { PanelLeft } from "lucide-react"
import { useIsMobile } from "@/hooks/use-mobile"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Separator } from "@/components/ui/separator"
import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { VariantProps, cva } from "class-variance-authority";
import { PanelLeft } from "lucide-react";
import { useIsMobile } from "@/hooks/use-mobile";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Separator } from "@/components/ui/separator";
import {
Sheet,
SheetContent,
SheetDescription,
SheetHeader,
SheetTitle,
} from "@/components/ui/sheet"
import { Skeleton } from "@/components/ui/skeleton"
} from "@/components/ui/sheet";
import { Skeleton } from "@/components/ui/skeleton";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip"
} from "@/components/ui/tooltip";
const SIDEBAR_COOKIE_NAME = "sidebar_state"
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
const SIDEBAR_WIDTH = "16rem"
const SIDEBAR_WIDTH_MOBILE = "18rem"
const SIDEBAR_WIDTH_ICON = "3rem"
const SIDEBAR_KEYBOARD_SHORTCUT = "b"
const SIDEBAR_COOKIE_NAME = "sidebar_state";
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
const SIDEBAR_WIDTH = "16rem";
const SIDEBAR_WIDTH_MOBILE = "18rem";
const SIDEBAR_WIDTH_ICON = "3rem";
const SIDEBAR_KEYBOARD_SHORTCUT = "b";
type SidebarContextProps = {
state: "expanded" | "collapsed"
open: boolean
setOpen: (open: boolean) => void
openMobile: boolean
setOpenMobile: (open: boolean) => void
isMobile: boolean
toggleSidebar: () => void
}
state: "expanded" | "collapsed";
open: boolean;
setOpen: (open: boolean) => void;
openMobile: boolean;
setOpenMobile: (open: boolean) => void;
isMobile: boolean;
toggleSidebar: () => void;
};
const SidebarContext = React.createContext<SidebarContextProps | null>(null)
const SidebarContext = React.createContext<SidebarContextProps | null>(null);
function useSidebar() {
const context = React.useContext(SidebarContext)
const context = React.useContext(SidebarContext);
if (!context) {
throw new Error("useSidebar must be used within a SidebarProvider.")
throw new Error("useSidebar must be used within a SidebarProvider.");
}
return context
return context;
}
function readSidebarCookie(): boolean | undefined {
if (typeof document === "undefined") return undefined; // SSR safety
const m = document.cookie.match(
new RegExp(`(?:^|; )${SIDEBAR_COOKIE_NAME}=([^;]*)`)
);
return m ? m[1] === "true" : undefined;
}
const SidebarProvider = React.forwardRef<
HTMLDivElement,
React.ComponentProps<"div"> & {
defaultOpen?: boolean
open?: boolean
onOpenChange?: (open: boolean) => void
defaultOpen?: boolean;
open?: boolean;
onOpenChange?: (open: boolean) => void;
}
>(
(
@@ -71,54 +78,35 @@ const SidebarProvider = React.forwardRef<
},
ref
) => {
const isMobile = useIsMobile()
const [openMobile, setOpenMobile] = React.useState(false)
const isMobile = useIsMobile();
const [openMobile, setOpenMobile] = React.useState(false);
// This is the internal state of the sidebar.
// We use openProp and setOpenProp for control from outside the component.
const [_open, _setOpen] = React.useState(defaultOpen)
const open = openProp ?? _open
const cookieOpen = readSidebarCookie();
const [_open, _setOpen] = React.useState<boolean>(
cookieOpen !== undefined ? cookieOpen : defaultOpen
);
const open = openProp ?? _open;
const setOpen = React.useCallback(
(value: boolean | ((value: boolean) => boolean)) => {
const openState = typeof value === "function" ? value(open) : value
const openState = typeof value === "function" ? value(open) : value;
if (setOpenProp) {
setOpenProp(openState)
setOpenProp(openState);
} else {
_setOpen(openState)
_setOpen(openState);
}
// This sets the cookie to keep the sidebar state.
document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
},
[setOpenProp, open]
)
);
// Helper to toggle the sidebar.
const toggleSidebar = React.useCallback(() => {
return isMobile
? setOpenMobile((open) => !open)
: setOpen((open) => !open)
}, [isMobile, setOpen, setOpenMobile])
: setOpen((open) => !open);
}, [isMobile, setOpen, setOpenMobile]);
// Adds a keyboard shortcut to toggle the sidebar.
React.useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
if (
event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
(event.metaKey || event.ctrlKey)
) {
event.preventDefault()
toggleSidebar()
}
}
window.addEventListener("keydown", handleKeyDown)
return () => window.removeEventListener("keydown", handleKeyDown)
}, [toggleSidebar])
// We add a state so that we can do data-state="expanded" or "collapsed".
// This makes it easier to style the sidebar with Tailwind classes.
const state = open ? "expanded" : "collapsed"
const state = open ? "expanded" : "collapsed";
const contextValue = React.useMemo<SidebarContextProps>(
() => ({
@@ -131,11 +119,12 @@ const SidebarProvider = React.forwardRef<
toggleSidebar,
}),
[state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
)
);
return (
<SidebarContext.Provider value={contextValue}>
<TooltipProvider delayDuration={0}>
{/* FIX: remove flex + w-full wrapper */}
<div
style={
{
@@ -144,10 +133,7 @@ const SidebarProvider = React.forwardRef<
...style,
} as React.CSSProperties
}
className={cn(
"group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
className
)}
className={cn("group/sidebar-wrapper min-h-svh", className)}
ref={ref}
{...props}
>
@@ -155,17 +141,18 @@ const SidebarProvider = React.forwardRef<
</div>
</TooltipProvider>
</SidebarContext.Provider>
)
);
}
)
SidebarProvider.displayName = "SidebarProvider"
);
SidebarProvider.displayName = "SidebarProvider";
const Sidebar = React.forwardRef<
HTMLDivElement,
React.ComponentProps<"div"> & {
side?: "left" | "right"
variant?: "sidebar" | "floating" | "inset"
collapsible?: "offcanvas" | "icon" | "none"
side?: "left" | "right";
variant?: "sidebar" | "floating" | "inset";
collapsible?: "offcanvas" | "icon" | "none";
}
>(
(
@@ -179,7 +166,7 @@ const Sidebar = React.forwardRef<
},
ref
) => {
const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
if (collapsible === "none") {
return (
@@ -193,7 +180,7 @@ const Sidebar = React.forwardRef<
>
{children}
</div>
)
);
}
if (isMobile) {
@@ -217,7 +204,7 @@ const Sidebar = React.forwardRef<
<div className="flex h-full w-full flex-col">{children}</div>
</SheetContent>
</Sheet>
)
);
}
return (
@@ -262,16 +249,16 @@ const Sidebar = React.forwardRef<
</div>
</div>
</div>
)
);
}
)
Sidebar.displayName = "Sidebar"
);
Sidebar.displayName = "Sidebar";
const SidebarTrigger = React.forwardRef<
React.ElementRef<typeof Button>,
React.ComponentProps<typeof Button>
>(({ className, onClick, ...props }, ref) => {
const { toggleSidebar } = useSidebar()
const { toggleSidebar } = useSidebar();
return (
<Button
@@ -281,23 +268,23 @@ const SidebarTrigger = React.forwardRef<
size="icon"
className={cn("h-7 w-7", className)}
onClick={(event) => {
onClick?.(event)
toggleSidebar()
onClick?.(event);
toggleSidebar();
}}
{...props}
>
<PanelLeft />
<span className="sr-only">Toggle Sidebar</span>
</Button>
)
})
SidebarTrigger.displayName = "SidebarTrigger"
);
});
SidebarTrigger.displayName = "SidebarTrigger";
const SidebarRail = React.forwardRef<
HTMLButtonElement,
React.ComponentProps<"button">
>(({ className, ...props }, ref) => {
const { toggleSidebar } = useSidebar()
const { toggleSidebar } = useSidebar();
return (
<button
@@ -318,9 +305,9 @@ const SidebarRail = React.forwardRef<
)}
{...props}
/>
)
})
SidebarRail.displayName = "SidebarRail"
);
});
SidebarRail.displayName = "SidebarRail";
const SidebarInset = React.forwardRef<
HTMLDivElement,
@@ -336,9 +323,9 @@ const SidebarInset = React.forwardRef<
)}
{...props}
/>
)
})
SidebarInset.displayName = "SidebarInset"
);
});
SidebarInset.displayName = "SidebarInset";
const SidebarInput = React.forwardRef<
React.ElementRef<typeof Input>,
@@ -354,9 +341,9 @@ const SidebarInput = React.forwardRef<
)}
{...props}
/>
)
})
SidebarInput.displayName = "SidebarInput"
);
});
SidebarInput.displayName = "SidebarInput";
const SidebarHeader = React.forwardRef<
HTMLDivElement,
@@ -369,9 +356,9 @@ const SidebarHeader = React.forwardRef<
className={cn("flex flex-col gap-2 p-2", className)}
{...props}
/>
)
})
SidebarHeader.displayName = "SidebarHeader"
);
});
SidebarHeader.displayName = "SidebarHeader";
const SidebarFooter = React.forwardRef<
HTMLDivElement,
@@ -384,9 +371,9 @@ const SidebarFooter = React.forwardRef<
className={cn("flex flex-col gap-2 p-2", className)}
{...props}
/>
)
})
SidebarFooter.displayName = "SidebarFooter"
);
});
SidebarFooter.displayName = "SidebarFooter";
const SidebarSeparator = React.forwardRef<
React.ElementRef<typeof Separator>,
@@ -399,9 +386,9 @@ const SidebarSeparator = React.forwardRef<
className={cn("mx-2 w-auto bg-sidebar-border", className)}
{...props}
/>
)
})
SidebarSeparator.displayName = "SidebarSeparator"
);
});
SidebarSeparator.displayName = "SidebarSeparator";
const SidebarContent = React.forwardRef<
HTMLDivElement,
@@ -417,9 +404,9 @@ const SidebarContent = React.forwardRef<
)}
{...props}
/>
)
})
SidebarContent.displayName = "SidebarContent"
);
});
SidebarContent.displayName = "SidebarContent";
const SidebarGroup = React.forwardRef<
HTMLDivElement,
@@ -432,15 +419,15 @@ const SidebarGroup = React.forwardRef<
className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
{...props}
/>
)
})
SidebarGroup.displayName = "SidebarGroup"
);
});
SidebarGroup.displayName = "SidebarGroup";
const SidebarGroupLabel = React.forwardRef<
HTMLDivElement,
React.ComponentProps<"div"> & { asChild?: boolean }
>(({ className, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "div"
const Comp = asChild ? Slot : "div";
return (
<Comp
@@ -453,15 +440,15 @@ const SidebarGroupLabel = React.forwardRef<
)}
{...props}
/>
)
})
SidebarGroupLabel.displayName = "SidebarGroupLabel"
);
});
SidebarGroupLabel.displayName = "SidebarGroupLabel";
const SidebarGroupAction = React.forwardRef<
HTMLButtonElement,
React.ComponentProps<"button"> & { asChild?: boolean }
>(({ className, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button"
const Comp = asChild ? Slot : "button";
return (
<Comp
@@ -476,9 +463,9 @@ const SidebarGroupAction = React.forwardRef<
)}
{...props}
/>
)
})
SidebarGroupAction.displayName = "SidebarGroupAction"
);
});
SidebarGroupAction.displayName = "SidebarGroupAction";
const SidebarGroupContent = React.forwardRef<
HTMLDivElement,
@@ -490,8 +477,8 @@ const SidebarGroupContent = React.forwardRef<
className={cn("w-full text-sm", className)}
{...props}
/>
))
SidebarGroupContent.displayName = "SidebarGroupContent"
));
SidebarGroupContent.displayName = "SidebarGroupContent";
const SidebarMenu = React.forwardRef<
HTMLUListElement,
@@ -503,8 +490,8 @@ const SidebarMenu = React.forwardRef<
className={cn("flex w-full min-w-0 flex-col gap-1", className)}
{...props}
/>
))
SidebarMenu.displayName = "SidebarMenu"
));
SidebarMenu.displayName = "SidebarMenu";
const SidebarMenuItem = React.forwardRef<
HTMLLIElement,
@@ -516,8 +503,8 @@ const SidebarMenuItem = React.forwardRef<
className={cn("group/menu-item relative", className)}
{...props}
/>
))
SidebarMenuItem.displayName = "SidebarMenuItem"
));
SidebarMenuItem.displayName = "SidebarMenuItem";
const sidebarMenuButtonVariants = cva(
"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
@@ -539,14 +526,14 @@ const sidebarMenuButtonVariants = cva(
size: "default",
},
}
)
);
const SidebarMenuButton = React.forwardRef<
HTMLButtonElement,
React.ComponentProps<"button"> & {
asChild?: boolean
isActive?: boolean
tooltip?: string | React.ComponentProps<typeof TooltipContent>
asChild?: boolean;
isActive?: boolean;
tooltip?: string | React.ComponentProps<typeof TooltipContent>;
} & VariantProps<typeof sidebarMenuButtonVariants>
>(
(
@@ -561,8 +548,8 @@ const SidebarMenuButton = React.forwardRef<
},
ref
) => {
const Comp = asChild ? Slot : "button"
const { isMobile, state } = useSidebar()
const Comp = asChild ? Slot : "button";
const { isMobile, state } = useSidebar();
const button = (
<Comp
@@ -573,16 +560,16 @@ const SidebarMenuButton = React.forwardRef<
className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
{...props}
/>
)
);
if (!tooltip) {
return button
return button;
}
if (typeof tooltip === "string") {
tooltip = {
children: tooltip,
}
};
}
return (
@@ -595,19 +582,19 @@ const SidebarMenuButton = React.forwardRef<
{...tooltip}
/>
</Tooltip>
)
);
}
)
SidebarMenuButton.displayName = "SidebarMenuButton"
);
SidebarMenuButton.displayName = "SidebarMenuButton";
const SidebarMenuAction = React.forwardRef<
HTMLButtonElement,
React.ComponentProps<"button"> & {
asChild?: boolean
showOnHover?: boolean
asChild?: boolean;
showOnHover?: boolean;
}
>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button"
const Comp = asChild ? Slot : "button";
return (
<Comp
@@ -627,9 +614,9 @@ const SidebarMenuAction = React.forwardRef<
)}
{...props}
/>
)
})
SidebarMenuAction.displayName = "SidebarMenuAction"
);
});
SidebarMenuAction.displayName = "SidebarMenuAction";
const SidebarMenuBadge = React.forwardRef<
HTMLDivElement,
@@ -649,19 +636,19 @@ const SidebarMenuBadge = React.forwardRef<
)}
{...props}
/>
))
SidebarMenuBadge.displayName = "SidebarMenuBadge"
));
SidebarMenuBadge.displayName = "SidebarMenuBadge";
const SidebarMenuSkeleton = React.forwardRef<
HTMLDivElement,
React.ComponentProps<"div"> & {
showIcon?: boolean
showIcon?: boolean;
}
>(({ className, showIcon = false, ...props }, ref) => {
// Random width between 50 to 90%.
const width = React.useMemo(() => {
return `${Math.floor(Math.random() * 40) + 50}%`
}, [])
return `${Math.floor(Math.random() * 40) + 50}%`;
}, []);
return (
<div
@@ -686,9 +673,9 @@ const SidebarMenuSkeleton = React.forwardRef<
}
/>
</div>
)
})
SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton"
);
});
SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
const SidebarMenuSub = React.forwardRef<
HTMLUListElement,
@@ -704,24 +691,24 @@ const SidebarMenuSub = React.forwardRef<
)}
{...props}
/>
))
SidebarMenuSub.displayName = "SidebarMenuSub"
));
SidebarMenuSub.displayName = "SidebarMenuSub";
const SidebarMenuSubItem = React.forwardRef<
HTMLLIElement,
React.ComponentProps<"li">
>(({ ...props }, ref) => <li ref={ref} {...props} />)
SidebarMenuSubItem.displayName = "SidebarMenuSubItem"
>(({ ...props }, ref) => <li ref={ref} {...props} />);
SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
const SidebarMenuSubButton = React.forwardRef<
HTMLAnchorElement,
React.ComponentProps<"a"> & {
asChild?: boolean
size?: "sm" | "md"
isActive?: boolean
asChild?: boolean;
size?: "sm" | "md";
isActive?: boolean;
}
>(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
const Comp = asChild ? Slot : "a"
const Comp = asChild ? Slot : "a";
return (
<Comp
@@ -739,9 +726,9 @@ const SidebarMenuSubButton = React.forwardRef<
)}
{...props}
/>
)
})
SidebarMenuSubButton.displayName = "SidebarMenuSubButton"
);
});
SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
export {
Sidebar,
@@ -768,4 +755,4 @@ export {
SidebarSeparator,
SidebarTrigger,
useSidebar,
}
};