fix: styles and story

traefik · Jul 22, 2024 · 0b2acc3 · 0b2acc3
1 parent a811da5
commit 0b2acc3
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 21 deletions.
diff --git a/components/NavigationMenu/NavigationMenu.stories.tsx b/components/NavigationMenu/NavigationMenu.stories.tsx
@@ -4,9 +4,8 @@ import React from 'react';
 
 import { modifyVariantsForStory } from '../../utils/modifyVariantsForStory';
 import { Container } from '../Container';
-import { Flex } from '../Flex';
 import { Link } from '../Link';
-import { NavigationTreeContainer, NavigationTreeItem } from '../NavigationTree';
+import { NavigationItem } from '../Navigation';
 import { Text } from '../Text';
 import {
   NavigationMenu,
@@ -17,7 +16,6 @@ import {
   NavigationMenuProps,
   NavigationMenuTrigger,
   NavigationMenuVariants,
-  NavigationMenuViewport,
 } from './NavigationMenu';
 
 const BaseNavigationMenu = (props: NavigationMenuProps): JSX.Element => (
@@ -39,34 +37,32 @@ const Template: StoryFn<typeof NavigationMenuForStory> = (args) => (
       <NavigationMenuList>
         <NavigationMenuItem>
           <NavigationMenuTrigger>
-            <Text css={{ cursor: 'pointer' }}>Menu links</Text>
+            <Text css={{ cursor: 'pointer' }}>Links</Text>
           </NavigationMenuTrigger>
-          <NavigationMenuContent css={{ maxWidth: 265, p: '$2' }}>
-            <Flex direction="column" gap={1}>
-              <NavigationMenuLink asChild>
-                <Link href="#">A link</Link>
-              </NavigationMenuLink>
-              <NavigationMenuLink asChild>
-                <Link href="#">Another link</Link>
-              </NavigationMenuLink>
-            </Flex>
+          <NavigationMenuContent css={{ display: 'flex', flexDirection: 'column', gap: '$1' }}>
+            <NavigationMenuLink asChild>
+              <Link href="#">A link</Link>
+            </NavigationMenuLink>
+            <NavigationMenuLink asChild>
+              <Link href="#">Another link</Link>
+            </NavigationMenuLink>
           </NavigationMenuContent>
         </NavigationMenuItem>
 
         <NavigationMenuItem>
           <NavigationMenuTrigger>
-            <Text css={{ cursor: 'pointer' }}>Navigation tree items</Text>
+            <Text css={{ cursor: 'pointer' }}>Navigation items</Text>
           </NavigationMenuTrigger>
-          <NavigationMenuContent css={{ maxWidth: 265, p: '$2' }}>
-            <NavigationTreeContainer>
-              <NavigationTreeItem label="Profile" startAdornment={<PersonIcon />} />
-              <NavigationTreeItem label="Settings" startAdornment={<GearIcon />} />
-            </NavigationTreeContainer>
+          <NavigationMenuContent>
+            <NavigationMenuLink>
+              <NavigationItem startAdornment={<PersonIcon />}>Profile</NavigationItem>
+            </NavigationMenuLink>
+            <NavigationMenuLink>
+              <NavigationItem startAdornment={<GearIcon />}>Settings</NavigationItem>
+            </NavigationMenuLink>
           </NavigationMenuContent>
         </NavigationMenuItem>
       </NavigationMenuList>
-
-      <NavigationMenuViewport />
     </NavigationMenuForStory>
   </Container>
 );

diff --git a/components/NavigationMenu/NavigationMenu.tsx b/components/NavigationMenu/NavigationMenu.tsx
@@ -13,6 +13,7 @@ const StyledRoot = styled(NavigationMenuPrimitive.Root, {
     p: 0,
     listStyleType: 'none',
     li: {
+      position: 'relative',
       display: 'inline',
     },
   },
@@ -39,6 +40,9 @@ export const NavigationMenu = React.forwardRef<
 // #region Content
 
 const StyledContent = styled(NavigationMenuPrimitive.Content, panelStyles, {
+  position: 'absolute',
+  left: 0,
+  p: '$2',
   color: '$hiContrast',
   '&:focus': {
     outline: 'none',