From bda70d03e157fa50b240f817ba8b7e6cae185506 Mon Sep 17 00:00:00 2001
From: ccarlaa <carlacarlaclementino@gmail.com>
Date: Mon, 15 Jan 2024 15:24:19 -0300
Subject: [PATCH 1/2] :sparkles: fixes overflow

---
 package.json                               | 2 +-
 src/components/Sidebar/Sidebar.stories.tsx | 6 ++++++
 src/components/Sidebar/SidebarDrop.tsx     | 4 ++--
 src/components/Sidebar/SidebarGroup.tsx    | 6 ++++--
 src/components/Sidebar/SidebarItem.tsx     | 5 +++--
 src/components/Sidebar/SidebarMain.tsx     | 2 +-
 6 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 96a1067..d4c9359 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@switchdreams/ui",
   "private": false,
-  "version": "0.3.4",
+  "version": "0.3.8",
   "type": "module",
   "description": "Biblioteca de Componentes da SwitchDreams",
   "repository": {
diff --git a/src/components/Sidebar/Sidebar.stories.tsx b/src/components/Sidebar/Sidebar.stories.tsx
index 7032e77..a1c3e7d 100644
--- a/src/components/Sidebar/Sidebar.stories.tsx
+++ b/src/components/Sidebar/Sidebar.stories.tsx
@@ -50,6 +50,12 @@ const Template: StoryFn<any> = () => (
         <Sidebar.Item label="Tasks" href="" icon={DocumentCheckIcon}></Sidebar.Item>
         <Sidebar.Item label="Reporting" href="" icon={NewspaperIcon}></Sidebar.Item>
         <Sidebar.Item label="Users" href="" icon={UsersIcon}></Sidebar.Item>
+        <Sidebar.Item label="Users" href="" icon={UsersIcon}></Sidebar.Item>
+        <Sidebar.Item label="Users" href="" icon={UsersIcon}></Sidebar.Item>
+        <Sidebar.Item label="Users" href="" icon={UsersIcon}></Sidebar.Item>
+        <Sidebar.Item label="Users" href="" icon={UsersIcon}></Sidebar.Item>
+        <Sidebar.Item label="Users" href="" icon={UsersIcon}></Sidebar.Item>
+        <Sidebar.Item label="Users" href="" icon={UsersIcon}></Sidebar.Item>
       </Sidebar.Group>
       <Sidebar.Footer>
         <Sidebar.Item label="Support" href="" icon={ExclamationCircleIcon}></Sidebar.Item>
diff --git a/src/components/Sidebar/SidebarDrop.tsx b/src/components/Sidebar/SidebarDrop.tsx
index 0ae44c3..ed17243 100644
--- 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
index 4f580f3..a3b3c92 100644
--- 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
index e7b47fa..df4660c 100644
--- 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
index 41e73bc..6c1df63 100644
--- 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

From 7b4038897cc54753bb0c2e021db6e40e374f72db Mon Sep 17 00:00:00 2001
From: ccarlaa <carlacarlaclementino@gmail.com>
Date: Mon, 15 Jan 2024 15:30:08 -0300
Subject: [PATCH 2/2] :iphone: fixes stories

---
 src/components/Sidebar/Sidebar.stories.tsx | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/components/Sidebar/Sidebar.stories.tsx b/src/components/Sidebar/Sidebar.stories.tsx
index a1c3e7d..7032e77 100644
--- a/src/components/Sidebar/Sidebar.stories.tsx
+++ b/src/components/Sidebar/Sidebar.stories.tsx
@@ -50,12 +50,6 @@ const Template: StoryFn<any> = () => (
         <Sidebar.Item label="Tasks" href="" icon={DocumentCheckIcon}></Sidebar.Item>
         <Sidebar.Item label="Reporting" href="" icon={NewspaperIcon}></Sidebar.Item>
         <Sidebar.Item label="Users" href="" icon={UsersIcon}></Sidebar.Item>
-        <Sidebar.Item label="Users" href="" icon={UsersIcon}></Sidebar.Item>
-        <Sidebar.Item label="Users" href="" icon={UsersIcon}></Sidebar.Item>
-        <Sidebar.Item label="Users" href="" icon={UsersIcon}></Sidebar.Item>
-        <Sidebar.Item label="Users" href="" icon={UsersIcon}></Sidebar.Item>
-        <Sidebar.Item label="Users" href="" icon={UsersIcon}></Sidebar.Item>
-        <Sidebar.Item label="Users" href="" icon={UsersIcon}></Sidebar.Item>
       </Sidebar.Group>
       <Sidebar.Footer>
         <Sidebar.Item label="Support" href="" icon={ExclamationCircleIcon}></Sidebar.Item>