chore: Reordered and styled navbar

equinor · Sep 28, 2023 · 28f6455 · 28f6455
1 parent 68f397b
commit 28f6455
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 22 deletions.
diff --git a/src/features/ModelView/ModelNavigationBar/ModelNavigationBar.styled.tsx b/src/features/ModelView/ModelNavigationBar/ModelNavigationBar.styled.tsx
@@ -3,6 +3,13 @@ import styled from 'styled-components'
 import { spacings } from '../../../tokens/spacings'
 import { theme } from '../../../tokens/theme'
 
+export const StyledSidebarContent = styled(SideBar.Content)`
+  padding-top: ${spacings.MEDIUM};
+  > a {
+    border-bottom: none;
+  }
+`
+
 export const StyledSidebarLink = styled(SideBar.Link)`
   &.activeTab {
     background: none;
@@ -27,9 +34,6 @@ export const StyledAccordian = styled(SideBar.Accordion)`
       fill: ${theme.light.primary.resting};
       opacity: 1;
     }
-
-    .Icon__StyledSvg-sc-6evbi1-0 {
-    }
   }
 `
 
@@ -47,7 +51,7 @@ export const StyledAccordianItem = styled(SideBar.AccordionItem)`
       border-left: solid;
       border-width: medium;
       border-color: ${theme.light.primary.resting};
-      padding-left: 20px;
+      padding-left: ${spacings.MEDIUM};
 
       > p {
         color: ${theme.light.primary.resting};
@@ -59,3 +63,10 @@ export const StyledAccordianItem = styled(SideBar.AccordionItem)`
     }
   }
 `
+
+export {
+  StyledAccordian as Accordian,
+  StyledAccordianItem as AccordianItem,
+  StyledSidebarContent as SidebarContent,
+  StyledSidebarLink as SidebarLink,
+}
diff --git a/src/features/ModelView/ModelNavigationBar/ModelNavigationBar.tsx b/src/features/ModelView/ModelNavigationBar/ModelNavigationBar.tsx
@@ -20,6 +20,9 @@ type MenuItems = SidebarLinkProps & {
 }
 
 export const ModelNavigationBar = () => {
+  const location = useLocation()
+  const tab = location.pathname.split('/')
+
   const menuItems: SidebarLinkProps[] = [
     {
       label: 'Details',
@@ -56,30 +59,31 @@ export const ModelNavigationBar = () => {
     ],
   }
 
-  const location = useLocation()
-  const tab = location.pathname.split('/')
-  console.log(tab[tab.length - 1])
-  console.log(tab[tab.length - 1] === sidebarCompute.href)
-
   return (
     <SideBar open>
-      <SideBar.Content>
-        <SideBar.Toggle />
-        {menuItems.map((m) => (
+      <Styled.SidebarContent>
+        {/* <Styled.StyledSidebarToggle /> */}
+        {/* {menuItems.map((m) => (
           <Styled.StyledSidebarLink
             className={m.href === tab[tab.length - 1] && 'activeTab'}
             key={m.label}
             {...m}
             active={m.href === tab[tab.length - 1]}
           ></Styled.StyledSidebarLink>
-        ))}
-        <Styled.StyledSidebarLink
+        ))} */}
+
+        <Styled.SidebarLink
+          className={menuItems[0].href === tab[tab.length - 1] && 'activeTab'}
+          key={menuItems[0].label}
+          {...menuItems[0]}
+          active={menuItems[0].href === tab[tab.length - 1]}
+        ></Styled.SidebarLink>
+        <Styled.SidebarLink
           disabled
           className={
-            'object' === tab[tab.length - 1] ||
-            'variogram' === tab[tab.length - 1]
-              ? 'activeTab'
-              : ''
+            ('object' === tab[tab.length - 1] ||
+              'variogram' === tab[tab.length - 1]) &&
+            'activeTab'
           }
           isExpanded
           label={sidebarCompute.label}
@@ -89,19 +93,25 @@ export const ModelNavigationBar = () => {
             'variogram' === tab[tab.length - 1]
           }
           href={'variogram'}
-        ></Styled.StyledSidebarLink>
+        ></Styled.SidebarLink>
         {sidebarCompute.subItems?.map((item) => (
-          <Styled.StyledAccordianItem
+          <Styled.AccordianItem
             className={item.href === tab[tab.length - 1] && 'activeTab actTab'}
             key={item.label}
             label={item.label}
             active={
               item.href === tab[tab.length - 1] && item.label === 'Variogram'
             }
             href={item.href}
-          ></Styled.StyledAccordianItem>
+          ></Styled.AccordianItem>
         ))}
-      </SideBar.Content>
+        <Styled.SidebarLink
+          className={menuItems[1].href === tab[tab.length - 1] && 'activeTab'}
+          key={menuItems[1].label}
+          {...menuItems[1]}
+          active={menuItems[1].href === tab[tab.length - 1]}
+        ></Styled.SidebarLink>
+      </Styled.SidebarContent>
     </SideBar>
   )
 }