From 3326651f54ff5454bfd3287744e5ae269502208f Mon Sep 17 00:00:00 2001
From: Hazem Krimi <krimihazem1@gmail.com>
Date: Tue, 28 Mar 2023 22:43:41 +0100
Subject: [PATCH] Fix sidebar wip

---
 src/components/ContextMenu/index.tsx | 5 ++++-
 src/components/Sidebar/index.tsx     | 2 +-
 src/components/Sidebar/styles.ts     | 5 +++++
 src/index.tsx                        | 5 +----
 4 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/components/ContextMenu/index.tsx b/src/components/ContextMenu/index.tsx
index a188c1f..623a712 100644
--- a/src/components/ContextMenu/index.tsx
+++ b/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 () => {
       (
diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
index 235d61e..ebaeac9 100644
--- a/src/components/Sidebar/index.tsx
+++ b/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}
diff --git a/src/components/Sidebar/styles.ts b/src/components/Sidebar/styles.ts
index 5f4d7c0..e4ac6e8 100644
--- a/src/components/Sidebar/styles.ts
+++ b/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;
+  }
 `;
diff --git a/src/index.tsx b/src/index.tsx
index dc4a2b8..ccaefc5 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -65,10 +65,7 @@ export const clientSupport = new ApolloClient({
   cache: new InMemoryCache(),
 });
 
-const container = document.getElementById('app');
-const root = ReactDOMClient.createRoot(container as HTMLElement);
-
-root.render(
+ReactDOMClient.createRoot(document.querySelector('#app') as HTMLElement).render(
   <React.StrictMode>
     <ApolloProvider client={clientMain}>
       <ThemeProvider theme={theme}>