From daffcf1203c009fe86b936c1958f45b9243d7ca6 Mon Sep 17 00:00:00 2001
From: Wahyu Kurniawan <ayungavis@gmail.com>
Date: Wed, 6 Mar 2024 11:53:44 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style:=20adjust=20mobile=20sideb?=
 =?UTF-8?q?ar=20animation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/shared/Sidebar/Sidebar.tsx      | 12 +++++++-----
 packages/frontend/src/pages/org-slug/layout.tsx    | 14 +++-----------
 2 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/packages/frontend/src/components/shared/Sidebar/Sidebar.tsx b/packages/frontend/src/components/shared/Sidebar/Sidebar.tsx
index 06e7b053..14ff0f3b 100644
--- a/packages/frontend/src/components/shared/Sidebar/Sidebar.tsx
+++ b/packages/frontend/src/components/shared/Sidebar/Sidebar.tsx
@@ -72,17 +72,19 @@ export const Sidebar = ({ mobileOpen }: SidebarProps) => {
       animate={{ x: isDesktop || mobileOpen ? 0 : -320 }}
       exit={{ x: -320 }}
       transition={{ ease: 'easeInOut', duration: 0.3 }}
-      className={cn('h-full flex-none w-[320px] lg:flex hidden flex-col', {
+      className={cn('h-full flex-none w-[320px] flex flex-col', {
         flex: mobileOpen,
       })}
     >
       <div
-        className={cn('flex flex-col h-full pt-8 pb-0 px-6 lg:pb-8 gap-9', {
-          'px-4 pt-5': mobileOpen,
-        })}
+        className={cn(
+          'flex flex-col h-full pt-5 lg:pt-8 pb-0 px-4 lg:px-6 lg:pb-8 gap-9',
+        )}
       >
         {/* Logo */}
-        {!mobileOpen && <Logo orgSlug={orgSlug} />}
+        <div className="hidden lg:flex">
+          <Logo orgSlug={orgSlug} />
+        </div>
         {/* Switch organization */}
         <div className="flex flex-1 flex-col gap-4">
           <AsyncSelect
diff --git a/packages/frontend/src/pages/org-slug/layout.tsx b/packages/frontend/src/pages/org-slug/layout.tsx
index bf503c10..b82e7678 100644
--- a/packages/frontend/src/pages/org-slug/layout.tsx
+++ b/packages/frontend/src/pages/org-slug/layout.tsx
@@ -107,24 +107,16 @@ export const DashboardLayout = ({
               'w-full h-full pr-1 pl-1 py-1 md:pl-0 md:pr-3 md:py-3 overflow-y-hidden min-w-[320px]',
               { 'flex-shrink-0': isSidebarOpen || !isDesktop },
             )}
-            initial={{ x: 0 }} // Initial state, no translation
             animate={{
-              x: isSidebarOpen ? '10px' : 0, // Translate X based on sidebar state
+              x: isSidebarOpen || isDesktop ? 0 : -320,
             }}
             transition={{ ease: 'easeInOut', duration: 0.3 }}
           >
-            <motion.div
-              className="rounded-3xl bg-base-bg h-full shadow-card overflow-y-auto relative"
-              initial={{ opacity: 0, x: -100 }}
-              animate={{ opacity: 1, x: isSidebarOpen ? '10px' : 0 }}
-              exit={{ opacity: 0, x: 100 }}
-              // transition={{ duration: 0.5 }}
-              transition={{ ease: 'easeInOut', duration: 0.3 }}
-            >
+            <div className="rounded-3xl bg-base-bg h-full shadow-card overflow-y-auto relative">
               <OctokitProvider>
                 <Outlet />
               </OctokitProvider>
-            </motion.div>
+            </div>
           </motion.div>
         </div>
       </section>