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;
+  }
 `;

src/index.tsx

@@ -65,10 +65,7 @@ export const clientSupport = new ApolloClient({
   cache: new InMemoryCache(),
 });
 
-const container = document.getElementById('app');
+ReactDOMClient.createRoot(document.querySelector('#app') as HTMLElement).render(
-const root = ReactDOMClient.createRoot(container as HTMLElement);
-
-root.render(
   <React.StrictMode>
     <ApolloProvider client={clientMain}>
       <ThemeProvider theme={theme}>