Merge pull request #95 from SwitchDreams/refactor/sidebar

[SW-4190] Bug Sidebar
SwitchDreams · Feb 16, 2024 · 5a1f100 · 5a1f100
2 parents 7859354 + 760cea7
commit 5a1f100
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 7 deletions.
diff --git a/src/components/Sidebar/SidebarDrop.tsx b/src/components/Sidebar/SidebarDrop.tsx
@@ -30,7 +30,7 @@ const SidebarDrop = ({ label, icon: Icon, as = "a", options = [] }: DropProps) =
   return (
     <>
       {!isOpen && Icon && (
-        <div className="h-12">
+        <div className="jutify-center flex h-12 w-fit items-center">
           <Icon
             className={`hover:${hoverColor} mx-2 flex h-7 w-7 items-center rounded-md text-md font-semibold max-md:hidden`}
           ></Icon>
@@ -46,7 +46,7 @@ const SidebarDrop = ({ label, icon: Icon, as = "a", options = [] }: DropProps) =
               isDropdownOpen ? "peer-focus:visible" : ""
             }`}
           >
-            <div className="flex items-center">
+            <div className="flex h-12 items-center whitespace-nowrap">
               <Icon className="mr-2 h-7 w-7"></Icon>
               <Text>{label}</Text>
             </div>

diff --git a/src/components/Sidebar/SidebarGroup.tsx b/src/components/Sidebar/SidebarGroup.tsx
@@ -1,12 +1,14 @@
 import { ComponentProps, PropsWithChildren } from "react";
 import { twMerge } from "tailwind-merge";
-
 export interface SidebarItemGroupProps extends PropsWithChildren, ComponentProps<"div"> {}
 
 const SidebarItemGroup = ({ children, className, ...rest }: SidebarItemGroupProps) => {
   return (
     <div
-      className={twMerge("mx-5 mb-8 mt-8 flex h-[52%] flex-col overflow-hidden", className)}
+      className={twMerge(
+        "mx-5 mb-8 mt-8 flex h-[52%] flex-col overflow-y-auto overflow-x-hidden",
+        className,
+      )}
       {...rest}
     >
       {children}

diff --git a/src/components/Sidebar/SidebarItem.tsx b/src/components/Sidebar/SidebarItem.tsx
@@ -18,7 +18,7 @@ export const SidebarIconVariants = cva(
 );
 
 export const SidebarItemVariants = cva(
-  "flex h-12 w-full items-center gap-2 rounded-md px-2 text-md font-semibold",
+  "flex h-12 w-full items-center gap-2 whitespace-nowrap rounded-md px-2 text-md font-semibold",
 );
 
 export interface ItemProps extends IItemProps, Omit<ComponentProps<"a">, "href"> {}
@@ -36,7 +36,7 @@ const SidebarItem = ({ label, as = "a", icon: Icon, href, active }: ItemProps) =
       {!isOpen && Icon && (
         <Element
           href={href}
-          className="h-12"
+          className="flex h-12 w-fit items-center justify-center"
           onClick={() => {
             OnClick();
           }}
@@ -55,6 +55,7 @@ const SidebarItem = ({ label, as = "a", icon: Icon, href, active }: ItemProps) =
           onClick={() => {
             OnClick();
           }}
+          className="flex h-12 w-fit justify-center"
         >
           <div
             className={twMerge(

diff --git a/src/components/Sidebar/SidebarMain.tsx b/src/components/Sidebar/SidebarMain.tsx
@@ -24,7 +24,7 @@ const SidebarMain = ({
 }: SidebarVariant) => {
   const { isOpen, setIsOpen } = useContext(SidebarContext);
 
-  const style = isOpen ? "w-72" : "w-20 max-md:w-0 max-md:absolute z-10";
+  const style = isOpen ? "w-72" : "w-24 max-md:w-0 max-md:absolute z-10";
   return (
     <div>
       <div