add hover mode sidebar

app/globals.css

@@ -263,6 +263,14 @@ html {
   height: 100%;
 }
 
+.hover-sidebar:hover .text-sidebar {
+  opacity: 100;
+}
+
+.hover-sidebar:hover .logo-sidebar {
+  max-width: 100%;
+}
+
 @media (max-width: 768px) {
   .res-field-account .MuiInputBase-input.MuiOutlinedInput-input {
     padding-top: 10px;

components/layoutPanel/sidebar/HeadMd.js

@@ -11,7 +11,7 @@ function HeadMd({ open, setOpen }) {
     >
       <Link
         href="/panel/dashboard"
-        className={`flex justify-center transition-all duration-500 ${
+        className={`flex justify-center transition-all duration-500 logo-sidebar ${
           open ? "max-w-full" : "max-w-0"
         }`}
       >

components/layoutPanel/sidebar/Links.js

@@ -46,7 +46,7 @@ function Links({ open }) {
               </div>
               <p
                 className={`
-                                transition-all duration-500
+                                transition-all duration-500 text-sidebar
                                 ${open ? "opacity-100" : "md:opacity-0"}
                                 ${
                                   item.src === pathname

components/layoutPanel/sidebar/index.js

@@ -8,9 +8,13 @@ function Sidebar({ active, setActive, open, setOpen }) {
   return (
     <div
       className={`
-        transition-all duration-500 md:flex fixed md:relative z-30 w-[85%]
+        transition-all duration-500 md:flex fixed md:relative z-30 w-[85%] hover-sidebar
         ${active ? " right-0" : "right-[-85%]"}
-        ${open ? "min-w-[243px] md:w-[243px]" : "min-w-[92px] md:w-[92px]"}
+        ${
+          open
+            ? "min-w-[243px] md:w-[243px]"
+            : "min-w-[92px] md:w-[92px] hover:md:min-w-[90px] hover:md:w-[90px]"
+        }
     `}
     >
       <aside
@@ -18,7 +22,7 @@ function Sidebar({ active, setActive, open, setOpen }) {
         relative h-screen overflow-hidden 
         transition-all duration-500 w-[85%]
         ${active ? " right-0" : "right-[-85%]"}
-        ${open ? "w-[243px]" : "w-[92px]"}
+        ${open ? "w-[243px]" : "w-[92px] hover:w-[243px]"}
       `}
       >
         <div
@@ -28,7 +32,7 @@ function Sidebar({ active, setActive, open, setOpen }) {
           overflow-hidden p-[24px] h-full flex flex-col justify-between items-start fixed 
           border-0 border-l border-l-[#EFEFEF] bg-[#FFF]
           transition-all duration-500
-          ${open ? "md:w-[243px]" : "md:w-[92px]"}
+          ${open ? "md:w-[243px]" : "md:w-[92px] hover:md:w-[243px]"}
         `}
         >
           <div className="w-full">