refactor: fix sidebar expand functionality and improve button accessibility
This commit is contained in:
parent
affc441cfc
commit
88bf525ae4
1 changed files with 14 additions and 11 deletions
|
|
@ -33,26 +33,29 @@ export const Sidebar = ({
|
||||||
setIsAnimating(false);
|
setIsAnimating(false);
|
||||||
}, 300);
|
}, 300);
|
||||||
};
|
};
|
||||||
//todo click to expand not working on direct links when minimized
|
|
||||||
return (
|
return (
|
||||||
<motion.nav
|
<motion.nav
|
||||||
animate={{ width: minimized ? 55 : 192 }}
|
animate={{ width: minimized ? 55 : 192 }}
|
||||||
aria-label="Sidebar Menu"
|
aria-label="Sidebar Menu"
|
||||||
className={cn(
|
className={cn(
|
||||||
"z-30 hidden h-auto w-48 shrink-0 space-y-4 border-muted border-r bg-background pt-3 md:block",
|
"relative z-30 hidden h-auto w-48 shrink-0 space-y-4 border-muted border-r bg-background pt-3 md:block",
|
||||||
className,
|
className,
|
||||||
minimized && "cursor-pointer",
|
minimized && "cursor-pointer",
|
||||||
)}
|
)}
|
||||||
onClick={
|
>
|
||||||
minimized
|
{minimized && (
|
||||||
? (e) => {
|
<button
|
||||||
|
aria-label="Expand sidebar"
|
||||||
|
className="absolute inset-0 z-50 cursor-pointer border-none bg-transparent p-0 hover:bg-black/2"
|
||||||
|
onClick={(e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
toggleSidebar(false);
|
toggleSidebar(false);
|
||||||
}
|
}}
|
||||||
: undefined
|
type="button"
|
||||||
}
|
/>
|
||||||
>
|
)}
|
||||||
<div
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
"flex h-8 items-center justify-between px-4",
|
"flex h-8 items-center justify-between px-4",
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue