Hamburger Smooth transition DONE

Yash-Ainapure · Nov 2, 2024 · a00aa7c · a00aa7c
1 parent 4ae9039
commit a00aa7c
Showing 1 changed file with 10 additions and 9 deletions.
diff --git a/frontend/src/ui/sidebar.tsx b/frontend/src/ui/sidebar.tsx
@@ -18,7 +18,7 @@ interface SidebarContextProps {
 }
 
 const SidebarContext = createContext<SidebarContextProps | undefined>(
-  undefined,
+  undefined
 );
 
 export const useSidebar = () => {
@@ -89,11 +89,13 @@ export const DesktopSidebar = ({
     <motion.div
       className={cn(
         "h-full px-4 py-4 hidden md:flex md:flex-col bg-neutral-100 dark:bg-neutral-800 w-[300px] flex-shrink-0",
-        className,
+        className
       )}
+      initial={{ width: "60px" }}
       animate={{
         width: animate ? (open ? "300px" : "60px") : "300px",
       }}
+      transition={{ type: "spring", stiffness: 300, damping: 30 }}
       onMouseEnter={() => setOpen(true)}
       onMouseLeave={() => setOpen(false)}
       {...props}
@@ -113,13 +115,13 @@ export const MobileSidebar = ({
     <div
       className={cn(
         "h-10 px-4 py-4 flex flex-row md:hidden items-center justify-between bg-neutral-100 dark:bg-neutral-800 w-full",
-        className,
+        className
       )}
       {...props}
     >
-      <div className="z-20 flex justify-end w-full">
+      <div className="flex justify-between w-full items-center">
         <IconMenu2
-          className="text-neutral-800 dark:text-neutral-200"
+          className="text-neutral-800 dark:text-neutral-200 cursor-pointer"
           onClick={() => setOpen(!open)}
         />
       </div>
@@ -135,11 +137,11 @@ export const MobileSidebar = ({
             }}
             className={cn(
               "fixed h-full w-full inset-0 bg-white dark:bg-neutral-900 p-10 z-[100] flex flex-col justify-between",
-              className,
+              className
             )}
           >
             <div
-              className="absolute z-50 right-10 top-10 text-neutral-800 dark:text-neutral-200"
+              className="absolute z-50 right-10 top-10 text-neutral-800 dark:text-neutral-200 cursor-pointer"
               onClick={() => setOpen(!open)}
             >
               <IconX />
@@ -167,12 +169,11 @@ export const SidebarLink = ({
       to={link.href}
       className={cn(
         "flex items-center justify-start gap-2 group/sidebar py-2",
-        className,
+        className
       )}
       {...props}
     >
       {link.icon}
-
       <motion.span
         animate={{
           display: animate ? (open ? "inline-block" : "none") : "inline-block",