sidebar fixed

Kartikey2011yadav · Sep 27, 2024 · bff786e · bff786e
1 parent ef81130
commit bff786e
Showing 1 changed file with 51 additions and 48 deletions.
diff --git a/src/Sidebar/Sidebar.jsx b/src/Sidebar/Sidebar.jsx
@@ -55,59 +55,62 @@ const Sidebar = () => {
 
   return (
     <div
-      className={` dark:bg-black bg-zinc-200 min-h-screen ${open ? 'w-60' : 'w-16'} duration-500 text-gray-100 px-4 relative`}
+      className={` dark:bg-black bg-zinc-200 min-h-screen ${open ? 'w-60' : 'w-16'} duration-500 text-gray-100 px-4 flex flex-col`}
     >
-      <div className="py-3 flex justify-end">
-        <HiMenuAlt3 size={26} className="cursor-pointer" onClick={() => setOpen(!open)} />
-      </div>
-      <div className=" items-center flex flex-col">
-        <img src={theme === 'dark' ? logodark : logolight} className={`${open && 'w-20'} `} alt="" />
-        <h3
-          style={{
-            transitionDelay: `200ms`,
-          }}
-          className={`whitespace-pre font-semibold duration-500 ${
-            !open && 'opacity-0 translate-x-5 overflow-hidden h-0'
-          }`}
-        >
-          {'EduWiz'}
-        </h3>
-        <hr
-          className={`h-0.5 bg-gray-100 border-0 rounded md:my-1 dark:bg-gray-3 bg-black ${open ? ' w-30' : 'w-10'} `}
-        />
-      </div>
-      <div className="mt-4 flex flex-col gap-4 relative">
-        {menus?.map((menu, i) => (
-          <Link
-            to={menu?.link}
-            key={i}
-            className={` ${
-              menu?.margin && 'mt-5'
-            } group flex items-center text-sm gap-3.5 font-medium p-2 dark:hover:bg-blue-800 hover:bg-blue-500 rounded-md ${!open && 'w-9'}`}
+      <div className=" items-end fixed">
+        <div className={`py-3 flex  ${open ? 'justify-end' : 'justify-start'}`}>
+          <HiMenuAlt3 size={26} className="cursor-pointer" onClick={() => setOpen(!open)} />
+        </div>
+        <div className={` ${open ? 'items-center' : 'items-start'} flex flex-col`}>
+          <img src={theme === 'dark' ? logodark : logolight} className={`${open ? 'w-20' : 'w-10'} `} alt="" />
+          <h3
+            style={{
+              transitionDelay: `200ms`,
+            }}
+            className={`whitespace-pre font-semibold duration-500 ${
+              !open && 'opacity-0 translate-x-5 overflow-hidden h-0'
+            }`}
           >
-            <div>{React.createElement(menu?.icon, { size: '20' })}</div>
-            <h2
-              style={{
-                transitionDelay: `${i + 2}00ms`,
-              }}
-              className={`whitespace-pre font-semibold duration-500 z-20 ${
-                !open && 'opacity-0 translate-x-28 overflow-hidden'
-              }`}
+            {'EduWiz'}
+          </h3>
+          <hr
+            className={`h-0.5 bg-gray-100 border-0 rounded md:my-1 dark:bg-gray-3 bg-black ${open ? ' w-30' : 'w-10'} `}
+          />
+        </div>
+        <div className="mt-4 flex flex-col gap-4 relative">
+          {menus?.map((menu, i) => (
+            <Link
+              to={menu?.link}
+              key={i}
+              className={` ${
+                menu?.margin && 'mt-5'
+              } group flex items-center text-sm gap-3.5 font-medium p-2 dark:hover:bg-blue-800 hover:bg-blue-500 rounded-md ${!open && 'w-9'}`}
             >
-              {menu?.name}
-            </h2>
-            <h2
-              className={`${
-                open && 'hidden'
-              } z-20 absolute left-48 dark:bg-black bg-white font-semibold whitespace-pre text-gray-900 rounded-md drop-shadow-lg px-0 py-0 w-0 overflow-hidden group-hover:px-2 group-hover:py-1 group-hover:left-14 group-hover:duration-300 group-hover:w-fit  `}
-            >
-              {menu?.name}
-            </h2>
-          </Link>
-        ))}
+              <div>{React.createElement(menu?.icon, { size: '20' })}</div>
+              <h2
+                style={{
+                  transitionDelay: `${i + 2}00ms`,
+                }}
+                className={`whitespace-pre font-semibold duration-500 z-20 ${
+                  !open && 'opacity-0 translate-x-28 overflow-hidden'
+                }`}
+              >
+                {menu?.name}
+              </h2>
+              <h2
+                className={`${
+                  open && 'hidden'
+                } z-20 absolute left-48 dark:bg-black bg-white font-semibold whitespace-pre text-gray-900 rounded-md drop-shadow-lg px-0 py-0 w-0 overflow-hidden group-hover:px-2 group-hover:py-1 group-hover:left-14 group-hover:duration-300 group-hover:w-fit  `}
+              >
+                {menu?.name}
+              </h2>
+            </Link>
+          ))}
+        </div>
       </div>
+
       <div
-        className={` absolute bottom-3 ${open ? 'w-50' : 'w-10'}`}
+        className={` fixed bottom-3 ${open ? 'w-50' : 'w-10'}`}
         style={{
           transitionDelay: `200ms`,
         }}