From 48657a710f9a5ec505a01dbce18252056495ae74 Mon Sep 17 00:00:00 2001
From: devmam999 <devmam999@gmail.com>
Date: Wed, 31 Dec 2025 08:38:52 -0800
Subject: [PATCH 1/2] Fixed sidebar so it closes properly

---
 dashboard/src/components/Sidebar.tsx | 64 +++++++++++++++-------------
 1 file changed, 34 insertions(+), 30 deletions(-)

diff --git a/dashboard/src/components/Sidebar.tsx b/dashboard/src/components/Sidebar.tsx
index c769016b..d5f6e4e4 100644
--- a/dashboard/src/components/Sidebar.tsx
+++ b/dashboard/src/components/Sidebar.tsx
@@ -78,15 +78,15 @@ const Sidebar = (props: SidebarProps) => {
 
   const MapacheHeader = (props: { isSidebarExpanded: boolean }) => {
     return (
-      <div className="flex items-center p-4">
-        <div className="flex min-w-[60px] items-center justify-center">
+      <div className="flex items-center p-4 overflow-hidden">
+        <div className="flex min-w-[60px] items-center justify-center flex-shrink-0">
           <img src="/logo/mapache.png" className="h-10" />
         </div>
-        <div
-          className={`whitespace-nowrap pl-4 ${props.isSidebarExpanded ? "slide-in" : "slide-out"}`}
-        >
-          <h2>Mapache</h2>
-        </div>
+        {props.isSidebarExpanded && (
+          <div className="whitespace-nowrap pl-4 overflow-hidden">
+            <h2>Mapache</h2>
+          </div>
+        )}
       </div>
     );
   };
@@ -111,20 +111,24 @@ const Sidebar = (props: SidebarProps) => {
         }}
       >
         <div
-          className={`flex w-full items-center rounded-md ${
+          className={`flex w-full items-center rounded-md overflow-hidden ${
             props.isSelected ? "bg-card/50" : ""
           } h-10 p-1 hover:bg-card`}
         >
-          <div className="flex min-w-[60px] items-center justify-center">
+          <div className="flex min-w-[60px] items-center justify-center flex-shrink-0">
             <props.icon
               className={`${props.isSelected ? "text-white" : "text-neutral-400"}`}
             />
           </div>
-          <div
-            className={`whitespace-nowrap font-semibold ${props.isSelected ? "text-white" : "text-neutral-400"} ${props.isSidebarExpanded ? "slide-in" : "slide-out"}`}
-          >
-            {props.text}
-          </div>
+          {props.isSidebarExpanded && (
+            <div
+              className={`whitespace-nowrap font-semibold overflow-hidden ${
+                props.isSelected ? "text-white" : "text-neutral-400"
+              }`}
+            >
+              {props.text}
+            </div>
+          )}
         </div>
       </div>
     );
@@ -141,30 +145,30 @@ const Sidebar = (props: SidebarProps) => {
             className={`mx-2 my-2 flex cursor-pointer items-center overflow-hidden rounded-lg bg-gradient-to-br from-gr-pink to-gr-purple bg-[length:100%_100%] p-[2px] transition-all duration-150`}
             onClick={(e) => e.stopPropagation()}
           >
-            <div className="flex h-12 w-full items-center rounded-lg bg-card/50 p-1 hover:bg-card">
-              <div className="flex min-w-[60px] items-center justify-center">
+            <div className="flex h-12 w-full items-center rounded-lg bg-card/50 p-1 hover:bg-card overflow-hidden">
+              <div className="flex min-w-[60px] items-center justify-center flex-shrink-0">
                 <VehicleClassIcon
                   vehicleClass={currentVehicle.type}
                   iconType={"pixel"}
                 />
               </div>
-              <div
-                className={`whitespace-nowrap font-semibold text-white ${props.isSidebarExpanded ? "slide-in" : "slide-out"}`}
-              >
-                <div className="flex w-full items-center justify-between">
-                  <div className="flex w-[160px] flex-col items-start justify-center">
-                    <div className="text-sm font-semibold">
-                      {currentVehicle.name}
+              {props.isSidebarExpanded && (
+                <div className="whitespace-nowrap font-semibold text-white overflow-hidden">
+                  <div className="flex w-full items-center justify-between">
+                    <div className="flex w-[160px] flex-col items-start justify-center overflow-hidden">
+                      <div className="text-sm font-semibold truncate w-full">
+                        {currentVehicle.name}
+                      </div>
+                      <div className="text-xs text-neutral-400 truncate w-full">
+                        {currentVehicle.id} • {currentVehicle.type}
+                      </div>
                     </div>
-                    <div className="text-xs text-neutral-400">
-                      {currentVehicle.id} • {currentVehicle.type}
+                    <div className="flex items-center justify-center flex-shrink-0">
+                      <ChevronsUpDown />
                     </div>
                   </div>
-                  <div className="flex items-center justify-center">
-                    <ChevronsUpDown />
-                  </div>
                 </div>
-              </div>
+              )}
             </div>
           </div>
         </DropdownMenuTrigger>
@@ -286,4 +290,4 @@ const Sidebar = (props: SidebarProps) => {
   );
 };
 
-export default Sidebar;
+export default Sidebar;
\ No newline at end of file

From 37cb7070f236b70189b5bb085b7bb3082819f7d7 Mon Sep 17 00:00:00 2001
From: devmam999 <devmam999@gmail.com>
Date: Wed, 31 Dec 2025 08:56:43 -0800
Subject: [PATCH 2/2] readded animation

---
 dashboard/src/components/Sidebar.tsx | 50 +++++++++++++---------------
 dashboard/src/index.css              |  5 ++-
 2 files changed, 27 insertions(+), 28 deletions(-)

diff --git a/dashboard/src/components/Sidebar.tsx b/dashboard/src/components/Sidebar.tsx
index d5f6e4e4..6b64fa58 100644
--- a/dashboard/src/components/Sidebar.tsx
+++ b/dashboard/src/components/Sidebar.tsx
@@ -82,11 +82,11 @@ const Sidebar = (props: SidebarProps) => {
         <div className="flex min-w-[60px] items-center justify-center flex-shrink-0">
           <img src="/logo/mapache.png" className="h-10" />
         </div>
-        {props.isSidebarExpanded && (
-          <div className="whitespace-nowrap pl-4 overflow-hidden">
-            <h2>Mapache</h2>
-          </div>
-        )}
+        <div
+          className={`whitespace-nowrap pl-4 overflow-hidden ${props.isSidebarExpanded ? "slide-in" : "slide-out"}`}
+        >
+          <h2>Mapache</h2>
+        </div>
       </div>
     );
   };
@@ -120,15 +120,11 @@ const Sidebar = (props: SidebarProps) => {
               className={`${props.isSelected ? "text-white" : "text-neutral-400"}`}
             />
           </div>
-          {props.isSidebarExpanded && (
-            <div
-              className={`whitespace-nowrap font-semibold overflow-hidden ${
-                props.isSelected ? "text-white" : "text-neutral-400"
-              }`}
-            >
-              {props.text}
-            </div>
-          )}
+          <div
+            className={`whitespace-nowrap font-semibold overflow-hidden ${props.isSelected ? "text-white" : "text-neutral-400"} ${props.isSidebarExpanded ? "slide-in" : "slide-out"}`}
+          >
+            {props.text}
+          </div>
         </div>
       </div>
     );
@@ -152,23 +148,23 @@ const Sidebar = (props: SidebarProps) => {
                   iconType={"pixel"}
                 />
               </div>
-              {props.isSidebarExpanded && (
-                <div className="whitespace-nowrap font-semibold text-white overflow-hidden">
-                  <div className="flex w-full items-center justify-between">
-                    <div className="flex w-[160px] flex-col items-start justify-center overflow-hidden">
-                      <div className="text-sm font-semibold truncate w-full">
-                        {currentVehicle.name}
-                      </div>
-                      <div className="text-xs text-neutral-400 truncate w-full">
-                        {currentVehicle.id} • {currentVehicle.type}
-                      </div>
+              <div
+                className={`whitespace-nowrap font-semibold text-white overflow-hidden ${props.isSidebarExpanded ? "slide-in" : "slide-out"}`}
+              >
+                <div className="flex w-full items-center justify-between">
+                  <div className="flex w-[160px] flex-col items-start justify-center overflow-hidden">
+                    <div className="text-sm font-semibold truncate w-full">
+                      {currentVehicle.name}
                     </div>
-                    <div className="flex items-center justify-center flex-shrink-0">
-                      <ChevronsUpDown />
+                    <div className="text-xs text-neutral-400 truncate w-full">
+                      {currentVehicle.id} • {currentVehicle.type}
                     </div>
                   </div>
+                  <div className="flex items-center justify-center flex-shrink-0">
+                    <ChevronsUpDown />
+                  </div>
                 </div>
-              )}
+              </div>
             </div>
           </div>
         </DropdownMenuTrigger>
diff --git a/dashboard/src/index.css b/dashboard/src/index.css
index 61ccd5cb..0b3bd76a 100644
--- a/dashboard/src/index.css
+++ b/dashboard/src/index.css
@@ -118,5 +118,8 @@
 }
 
 .slide-out {
-  animation: slideOut 0.3s ease forwards;
+  opacity: 0;
+  transform: translateX(-100%);
+  width: 0;
+  transition: all 0.3s ease;
 }