getting navigation to work

Author: yyassi-heartex

web/apps/labelstudio/src/components/SidebarMenu/SidebarMenu.scss

@@ -6,6 +6,19 @@
   &__navigation {
     width: calc(var(--menu-sidebar-width) + 1px);
     display: flex;
+    
+    & .main-menu {
+      background: var(--sand_100);
+
+      &__item{
+        background: var(--sand_100);
+
+        &_active{
+          background: var(--sand_200);
+          pointer-events: all;
+        }
+      }
+    }
   }
 
   &__content {

web/libs/core/src/pages/AccountSettings/AccountSettings.tsx

@@ -1,31 +1,34 @@
 import { useMemo } from "react";
 import { Redirect } from "react-router-dom";
-import { useAPI } from "../../../../../apps/labelstudio/src/providers/ApiProvider";
-import { useCurrentUser } from "../../../../../apps/labelstudio/src/providers/CurrentUser";
-// import { SidebarMenu } from "../../../../../apps/labelstudio/src/components/SidebarMenu/SidebarMenu";
+import { SidebarMenu } from "/apps/labelstudio/src/components/SidebarMenu/SidebarMenu";
 import styles from "./AccountSettings.module.scss";
 import { accountSettingsSections } from "./sections";
 import { Card } from "@humansignal/ui";
 
 export const AccountSettingsPage = () => {
-  const api = useAPI();
-  const { user } = useCurrentUser();
   const menuItems = useMemo(
-    () => accountSettingsSections.map(({ title, id }) => ({ title, path: `#${id}` })),
+    () =>
+      accountSettingsSections.map(({ title, id }) => ({
+        title,
+        path: () => {
+          if (!window?.location) return;
+          window.location.hash = `#${id}`;
+        },
+      })),
     [accountSettingsSections],
   );
 
   return (
     <div className={styles.accountSettings}>
-      {/* <SidebarMenu menuItems={menuItems} path={AccountSettingsPage.path}> */}
-      <div className={styles.accountSettings__content}>
-        {accountSettingsSections?.map(({ component: Section, id }: any) => (
-          <Card key={id}>
-            <Section />
-          </Card>
-        ))}
-      </div>
-      {/* </SidebarMenu> */}
+      <SidebarMenu menuItems={menuItems} path={AccountSettingsPage.path}>
+        <div className={styles.accountSettings__content}>
+          {accountSettingsSections?.map(({ component: Section, id }: any) => (
+            <Card key={id}>
+              <Section />
+            </Card>
+          ))}
+        </div>
+      </SidebarMenu>
     </div>
   );
 };