From 1a4b73f1f57ac486a482d51ccd1ee124860f84e6 Mon Sep 17 00:00:00 2001
From: DrMint <thomas.barillot@etu.u-bordeaux.fr>
Date: Sun, 20 Feb 2022 18:01:50 +0100
Subject: [PATCH] Reduced width for the minimized mainpanel

---
 src/components/AppLayout.tsx        | 12 ++++++------
 src/components/Panels/MainPanel.tsx |  4 ++--
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx
index 59951a3..b27dcf1 100644
--- a/src/components/AppLayout.tsx
+++ b/src/components/AppLayout.tsx
@@ -67,19 +67,19 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
   });
 
   const mainPanelClass = `fixed desktop:left-0 desktop:top-0 desktop:bottom-0 ${
-    mainPanelReduced ? "desktop:w-[8rem]" : "desktop:w-[20rem]"
+    mainPanelReduced ? "desktop:w-[6rem]" : "desktop:w-[20rem]"
   }`;
   const subPanelClass = `fixed desktop:top-0 desktop:bottom-0 desktop:w-[20rem] ${
-    mainPanelReduced ? " desktop:left-[8rem]" : "desktop:left-[20rem]"
+    mainPanelReduced ? " desktop:left-[6rem]" : "desktop:left-[20rem]"
   }`;
   let contentPanelClass = "";
   if (props.subPanel) {
     contentPanelClass = `fixed desktop:top-0 desktop:bottom-0 desktop:right-0 ${
-      mainPanelReduced ? "desktop:left-[28rem]" : "desktop:left-[40rem]"
+      mainPanelReduced ? "desktop:left-[26rem]" : "desktop:left-[40rem]"
     }`;
   } else if (props.contentPanel) {
     contentPanelClass = `fixed desktop:top-0 desktop:bottom-0 desktop:right-0 ${
-      mainPanelReduced ? "desktop:left-[8rem]" : "desktop:left-[20rem]"
+      mainPanelReduced ? "desktop:left-[6rem]" : "desktop:left-[20rem]"
     }`;
   }
 
@@ -177,7 +177,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
       {/* Main panel minimize button*/}
       <div
         className={`mobile:hidden translate-x-0 fixed top-1/2 z-20 ${
-          mainPanelReduced ? "left-[6.65rem]" : "left-[18.65rem]"
+          mainPanelReduced ? "left-[4.65rem]" : "left-[18.65rem]"
         }`}
         onClick={() => dispatch(setMainPanelReduced(!mainPanelReduced))}
       >
@@ -232,7 +232,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
         delayShow={300}
         delayHide={100}
         disable={!mainPanelReduced || isMobile}
-        className="drop-shadow-dark-xl !opacity-100 !bg-light !rounded-lg after:!border-r-light text-left !transition-[top,left,width]"
+        className="drop-shadow-dark-xl !opacity-100 !bg-light !rounded-lg after:!border-r-light text-left"
       />
     </div>
   );
diff --git a/src/components/Panels/MainPanel.tsx b/src/components/Panels/MainPanel.tsx
index fb9659b..21843f9 100644
--- a/src/components/Panels/MainPanel.tsx
+++ b/src/components/Panels/MainPanel.tsx
@@ -29,12 +29,12 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
   return (
     <div
       id="mainPanel"
-      className="flex flex-col justify-center content-start p-8 gap-y-2 justify-items-center text-center"
+      className={`flex flex-col justify-center content-start gap-y-2 justify-items-center text-center p-8 ${mainPanelReduced && "px-4"}`}
     >
       {mainPanelReduced && isDesktop ? (
         <div className="grid place-items-center gap-4">
           <Link href="/" passHref>
-            <div className="w-8 cursor-pointer transition-[filter] hover:colorize-dark">
+            <div className="w-12 cursor-pointer transition-[filter] hover:colorize-dark">
               <SVG
                 src={"/icons/accords.svg"}
                 alt={"Logo of Accord's Library"}