From e4d0230095bf47eda98f9461601bb7a841b2edeb Mon Sep 17 00:00:00 2001 From: sanchayan721 Date: Sun, 27 Aug 2023 07:43:30 +0200 Subject: [PATCH] update: wrapper added --- src/components/navigation/NavBar/index.tsx | 8 +--- .../NavMenu/Megamenu/NavGroups/index.tsx | 48 +++++++++++-------- src/components/navigation/NavMenu/index.tsx | 1 - 3 files changed, 29 insertions(+), 28 deletions(-) diff --git a/src/components/navigation/NavBar/index.tsx b/src/components/navigation/NavBar/index.tsx index f68214e..3aefe22 100644 --- 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)(({ theme, open }) => ({ width: '100%', diff --git a/src/components/navigation/NavMenu/Megamenu/NavGroups/index.tsx b/src/components/navigation/NavMenu/Megamenu/NavGroups/index.tsx index e414aa8..bea3e3d 100644 --- 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} - {items.map(({ title: pageName, link: href }, index) => ( -
  • - - - - {pageName} - - -
  • - ))} + + {items.map(({ title: pageName, link: href }, index) => ( +
  • + + + + {pageName} + + +
  • + ))} +
    ) diff --git a/src/components/navigation/NavMenu/index.tsx b/src/components/navigation/NavMenu/index.tsx index 30913f8..5b45bfe 100644 --- 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';