fix(sub navigation): show sub navigation contents on mouse hover

eclipse-tractusx · May 7, 2024 · 6dbee76 · 6dbee76
2 parents e4d5527 + 28a3447
commit 6dbee76
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 76 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 3.0.8
+
+- Show sub navigation contents to the user on mouse hover
+
 ## 3.0.7
 
 - Upgrade dependencies

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@catena-x/portal-shared-components",
-  "version": "3.0.7",
+  "version": "3.0.8",
   "description": "Catena-X Portal Shared Components",
   "author": "Catena-X Contributors",
   "license": "Apache-2.0",

diff --git a/src/components/basic/NewSubNavigation/index.tsx b/src/components/basic/NewSubNavigation/index.tsx
@@ -79,89 +79,91 @@ export const NewSubNavigation = ({
               >
                 {header}
               </Typography>
-              <Box className="navigationOverlay">
-                {navigationArray?.map((link: NavigationItem) => {
-                  return (
-                    <Box
-                      key={link.index}
-                      onClick={() => {
-                        onClick(link.navigation)
-                        setShow(!show)
-                        if (updateHeaderTitle) {
-                          setHeader(link.title)
-                        }
-                      }}
-                      className="navigationOverlayItem"
-                      onMouseOut={() => {
-                        setHighlight(link.title)
-                      }}
-                      onMouseOver={() => {
-                        // do nothing
-                      }}
-                      sx={{
-                        backgroundColor:
-                          header === link.title || highlight === link.title
-                            ? 'rgba(15, 113, 203, 0.05)'
-                            : 'transparent',
-                      }}
-                    >
-                      <EastIcon
-                        sx={{
-                          marginRight: '16px',
-                          fontSize: '18px',
-                          color:
-                            header === link.title || highlight === link.title
-                              ? '#0f71cb'
-                              : '#EAF1FE',
-                        }}
-                      />
-                      <Typography
-                        variant="h4"
-                        sx={{
-                          color:
-                            header === link.title || highlight === link.title
-                              ? '#111111'
-                              : '#888888',
-                          fontSize: '14px',
-                          textTransform: 'lowercase',
-                        }}
-                      >
-                        {link.title}
-                      </Typography>
-                    </Box>
-                  )
-                })}
-                {buttonArray?.length > 1 && (
-                  <Divider
-                    sx={{
-                      margin: '10px 0px',
-                      borderWidth: '1px',
-                      width: '100%',
-                    }}
-                  />
-                )}
-                {buttonArray?.length > 1 &&
-                  buttonArray?.map((btn: NavigationButton) => {
+              {show && (
+                <Box className="navigationOverlay">
+                  {navigationArray?.map((link: NavigationItem) => {
                     return (
-                      <Button
-                        key={btn.buttonLabel}
-                        onClick={(e) => {
-                          btn.onButtonClick(e)
+                      <Box
+                        key={link.index}
+                        onClick={() => {
+                          onClick(link.navigation)
                           setShow(!show)
+                          if (updateHeaderTitle) {
+                            setHeader(link.title)
+                          }
+                        }}
+                        className="navigationOverlayItem"
+                        onMouseOut={() => {
+                          setHighlight(link.title)
+                        }}
+                        onMouseOver={() => {
+                          // do nothing
                         }}
-                        color="secondary"
-                        variant="outlined"
-                        size="small"
                         sx={{
-                          marginTop: '10px',
-                          textTransform: 'lowercase',
+                          backgroundColor:
+                            header === link.title || highlight === link.title
+                              ? 'rgba(15, 113, 203, 0.05)'
+                              : 'transparent',
                         }}
                       >
-                        {btn.buttonLabel}
-                      </Button>
+                        <EastIcon
+                          sx={{
+                            marginRight: '16px',
+                            fontSize: '18px',
+                            color:
+                              header === link.title || highlight === link.title
+                                ? '#0f71cb'
+                                : '#EAF1FE',
+                          }}
+                        />
+                        <Typography
+                          variant="h4"
+                          sx={{
+                            color:
+                              header === link.title || highlight === link.title
+                                ? '#111111'
+                                : '#888888',
+                            fontSize: '14px',
+                            textTransform: 'lowercase',
+                          }}
+                        >
+                          {link.title}
+                        </Typography>
+                      </Box>
                     )
                   })}
-              </Box>
+                  {buttonArray?.length > 1 && (
+                    <Divider
+                      sx={{
+                        margin: '10px 0px',
+                        borderWidth: '1px',
+                        width: '100%',
+                      }}
+                    />
+                  )}
+                  {buttonArray?.length > 1 &&
+                    buttonArray?.map((btn: NavigationButton) => {
+                      return (
+                        <Button
+                          key={btn.buttonLabel}
+                          onClick={(e) => {
+                            btn.onButtonClick(e)
+                            setShow(!show)
+                          }}
+                          color="secondary"
+                          variant="outlined"
+                          size="small"
+                          sx={{
+                            marginTop: '10px',
+                            textTransform: 'lowercase',
+                          }}
+                        >
+                          {btn.buttonLabel}
+                        </Button>
+                      )
+                    })}
+                </Box>
+              )}
             </Box>
             {buttonArray?.length === 1 && (
               <Button