update: wrapper added

Brahmware · Aug 27, 2023 · e4d0230 · e4d0230
1 parent 9462c4c
commit e4d0230
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 28 deletions.
diff --git a/src/components/navigation/NavBar/index.tsx b/src/components/navigation/NavBar/index.tsx
@@ -1,14 +1,10 @@
 import React, { FC } from 'react';
-import { Card, CardProps, styled } from '@mui/material';
+import { Card, styled } from '@mui/material';
 import { navbar } from '@theme/constants';
 import Toolbar from './Toolbar';
 import { useNavigationMenuState } from '@helpers/NavigationMenuStateProvider';
 import LinkHome from './LinkHome';
-
-interface BarProps extends CardProps {
-  component?: React.ElementType;
-  open?: boolean;
-}
+import { BarProps } from '@interfaces/CardProps';
 
 const Bar = styled(Card)<BarProps>(({ theme, open }) => ({
   width: '100%',

diff --git a/src/components/navigation/NavMenu/Megamenu/NavGroups/index.tsx b/src/components/navigation/NavMenu/Megamenu/NavGroups/index.tsx
@@ -31,7 +31,7 @@ const Navgroup = styled('ul')(({ theme }) => ({
     margin: 0,
     width: '100%',
     minHeight: '12rem',
-    
+
     '&:hover': {
       '& .group__card': {
         transform: `translateX(0)`,
@@ -59,18 +59,22 @@ const GroupCard = styled(Card)(({ theme }) => ({
   [theme.breakpoints.down('md')]: {
     borderRadius: 0,
   },
-
-  '& li': {
-    width: '100%',
-    margin: `${theme.Spaces.xxs} ${theme.Spaces.sm}`,
+}));
 
-    '&:first-of-type': {
-      marginTop: theme.Spaces.md,
-    },
+const NavList = styled('div')(({ theme }) => ({
+  padding: `0 ${theme.Spaces.sm}`,
+  margin: `${theme.Spaces.sm} 0`,
+  width: '100%',
+  overflow: 'hidden',
 
-    '&:last-of-type': {
-      marginBottom: theme.Spaces.md,
-    },
+  '& li': {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start',
+    listStyle: 'none',
+    width: '100%',
+    margin: `${theme.Spaces.xxs} 0`,
 
     '& a': {
       display: 'flex',
@@ -152,16 +156,18 @@ const NavGroups = ({ title, videoUrl, items }: NavGroupsProps) => {
         <Title>
           {title}
         </Title>
-        {items.map(({ title: pageName, link: href }, index) => (
-          <li key={index}>
-            <Link href={href} >
-              <Dot />
-              <Typography variant="body2" component="p">
-                {pageName}
-              </Typography>
-            </Link>
-          </li>
-        ))}
+        <NavList>
+          {items.map(({ title: pageName, link: href }, index) => (
+            <li key={index}>
+              <Link href={href} >
+                <Dot />
+                <Typography variant="body2" component="p">
+                  {pageName}
+                </Typography>
+              </Link>
+            </li>
+          ))}
+        </NavList>
       </GroupCard>
     </Navgroup>
   )

diff --git a/src/components/navigation/NavMenu/index.tsx b/src/components/navigation/NavMenu/index.tsx
@@ -1,7 +1,6 @@
 import { useNavigationMenuState } from '@helpers/NavigationMenuStateProvider';
 import { NavigationCardProps } from '@interfaces/CardProps';
 import { Box, Card, styled } from '@mui/material';
-import { navbar } from '@theme/constants';
 import React from 'react';
 import Display from './Display';
 import Contact from './Contact';