Fix sidebar wip

src/components/ContextMenu/index.tsx

@@ -22,7 +22,10 @@ const ContextMenu = ({ items, component, className }: ContextMenuProps) => {
       'mouseenter',
       openMenu
     );
-    ref.current?.addEventListener('mouseleave', closeMenu);
+    (document.querySelector(`#${component}`) as HTMLElement)?.addEventListener(
+      'mouseleave',
+      closeMenu
+    );
 
     return () => {
       (

src/components/Sidebar/index.tsx

@@ -153,7 +153,7 @@ const Sidebar = () => {
               ))}
             {templates &&
               templates.map((template, index) => (
-                <Box marginBottom='20px' key={template.id}>
+                <Box marginBottom='20px' key={template.id} position='relative'>
                   <div id={`template-${template.id}`}>
                     <SidebarItem
                       color={role}

src/components/Sidebar/styles.ts

@@ -17,4 +17,9 @@ export const Wrapper = styled.div<WrapperProps>`
   grid-template-rows: 1fr auto;
   justify-content: center;
   padding: 55px 0px;
+  overflow-y: scroll;
+
+  &::-webkit-scrollbar {
+    width: 1px;
+  }
 `;