"implement responsive main navigation bar with dropdown menus and mobile view support"

002_source/cms/src/components/marketing/layout/main-nav/index.tsx

@@ -20,8 +20,8 @@ import { DropdownPopover } from '@/components/core/dropdown/dropdown-popover';
 import { DropdownTrigger } from '@/components/core/dropdown/dropdown-trigger';
 import { Logo } from '@/components/core/logo';
 
-import { MobileNav } from './mobile-nav';
+import { MobileNav } from '../mobile-nav';
-import { PagesPopover } from './pages-popover';
+import { PagesPopover } from '../pages-popover';
 
 export function MainNav(): React.JSX.Element {
   const [openNav, setOpenNav] = React.useState<boolean>(false);
@@ -41,15 +41,46 @@ export function MainNav(): React.JSX.Element {
           zIndex: 'var(--MainNav-zIndex)',
         }}
       >
-        <Container maxWidth="lg" sx={{ display: 'flex', minHeight: 'var(--MainNav-height)', py: '16px' }}>
+        <Container
-          <Stack direction="row" spacing={2} sx={{ alignItems: 'center', flex: '1 1 auto' }}>
+          maxWidth="lg"
-            <Box component={RouterLink} href={paths.home} sx={{ display: 'inline-flex' }}>
+          sx={{ display: 'flex', minHeight: 'var(--MainNav-height)', py: '16px' }}
-              <Logo color="light" height={32} width={122} />
+        >
+          <Stack
+            direction="row"
+            spacing={2}
+            sx={{ alignItems: 'center', flex: '1 1 auto' }}
+          >
+            <Box
+              component={RouterLink}
+              href={paths.home}
+              sx={{ display: 'inline-flex' }}
+            >
+              <Logo
+                color="light"
+                height={32}
+                width={122}
+              />
             </Box>
-            <Box component="nav" sx={{ display: { xs: 'none', md: 'block' } }}>
+            <Box
-              <Stack component="ul" direction="row" spacing={1} sx={{ listStyle: 'none', m: 0, p: 0 }}>
+              component="nav"
-                <NavItem href={paths.components.index} pathname={pathname} title="Components" />
+              sx={{ display: { xs: 'none', md: 'block' } }}
-                <NavItem href={paths.docs} pathname={pathname} title="Documentation" />
+            >
+              <Stack
+                component="ul"
+                direction="row"
+                spacing={1}
+                sx={{ listStyle: 'none', m: 0, p: 0 }}
+              >
+                <NavItem
+                  href={paths.components.index}
+                  pathname={pathname}
+                  title="Components"
+                />
+                <NavItem
+                  href={paths.docs}
+                  pathname={pathname}
+                  title="Documentation"
+                />
               </Stack>
             </Box>
           </Stack>
@@ -58,9 +89,20 @@ export function MainNav(): React.JSX.Element {
             spacing={2}
             sx={{ alignItems: 'center', flex: '1 1 auto', justifyContent: 'flex-end' }}
           >
-            <Box component="nav" sx={{ display: { xs: 'none', md: 'block' } }}>
+            <Box
-              <Stack component="ul" direction="row" spacing={1} sx={{ listStyle: 'none', m: 0, p: 0 }}>
+              component="nav"
-                <NavItem pathname={pathname} title="Pages">
+              sx={{ display: { xs: 'none', md: 'block' } }}
+            >
+              <Stack
+                component="ul"
+                direction="row"
+                spacing={1}
+                sx={{ listStyle: 'none', m: 0, p: 0 }}
+              >
+                <NavItem
+                  pathname={pathname}
+                  title="Pages"
+                >
                   <PagesPopover />
                 </NavItem>
               </Stack>
@@ -113,7 +155,10 @@ export function NavItem({
   const hasPopover = Boolean(children);
 
   const element = (
-    <Box component="li" sx={{ userSelect: 'none' }}>
+    <Box
+      component="li"
+      sx={{ userSelect: 'none' }}
+    >
       <Box
         {...(hasPopover
           ? {
@@ -157,7 +202,10 @@ export function NavItem({
         }}
         tabIndex={0}
       >
-        <Box component="span" sx={{ flex: '1 1 auto' }}>
+        <Box
+          component="span"
+          sx={{ flex: '1 1 auto' }}
+        >
           <Typography
             component="span"
             sx={{ color: 'inherit', fontSize: '0.875rem', fontWeight: 500, lineHeight: '28px' }}