fix: some styling changes on the navigations

packages/web/src/ui/common/navigation/nav-link/nav-link.stories.tsx

@@ -1,45 +1,57 @@
-import {type StoryFn, type Meta} from '@storybook/react';
+import {type Meta, type StoryObj} from '@storybook/react';
 import {type NavLinkDefinition} from '../navigation.types';
 import {NavLink} from './nav-link';
 
-export default {
+const config = {
   title: 'Common/Navigation/NavLink',
   component: NavLink,
+  args: {
+    href: '/example',
+    text: 'Example',
+  },
+  decorators: [
+    (Story) => (
+      <div className='flex'>
+        <Story />
+      </div>
+    ),
+  ],
 } satisfies Meta<NavLinkDefinition>;
 
-const Template: StoryFn<NavLinkDefinition> = (args) => (
-  <NavLink {...args} href='/example' text='Example' />
-);
+export default config;
 
-export const LinkOnActiveSegment = Template.bind({});
-LinkOnActiveSegment.storyName = 'Link on active segment';
-LinkOnActiveSegment.parameters = {
-  nextjs: {
-    appDirectory: true,
-    navigation: {
-      segments: ['example'],
+export const LinkOnActiveSegment: StoryObj<typeof config> = {
+  name: 'Link on active segment',
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        segments: ['example'],
+      },
     },
   },
 };
 
-export const LinkOnInactiveSegment = Template.bind({});
-LinkOnInactiveSegment.storyName = 'Link on inactive segment';
-LinkOnInactiveSegment.parameters = {
-  nextjs: {
-    appDirectory: true,
-    navigation: {
-      segments: ['foo'],
+export const LinkOnInactiveSegment: StoryObj<typeof config> = {
+  name: 'Link on inactive segment',
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        segments: ['foo'],
+      },
     },
   },
 };
 
-export const LinkOnRootSegment = Template.bind({});
-LinkOnRootSegment.storyName = 'Link on root segment';
-LinkOnRootSegment.parameters = {
-  nextjs: {
-    appDirectory: true,
-    navigation: {
-      segments: [],
+export const LinkOnRootSegment: StoryObj<typeof config> = {
+  name: 'Link on root segment',
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        segments: [],
+      },
     },
   },
 };

packages/web/src/ui/common/navigation/navigations/desktop-navigation.tsx

@@ -17,11 +17,15 @@ export const DesktopNavigation: FC<NavigationProps> = ({
   }, [links]);
 
   return (
-    <div className='mx-auto hidden h-28 w-full max-w-7xl items-center gap-12 px-6 md:flex'>
+    <div className='mx-auto hidden h-28 w-full max-w-7xl items-center gap-8 px-6 md:flex'>
       <Link hideUnderline className='mr-auto' href='/'>
         <Logo variant='color' size='medium' />
       </Link>
       {navLinks}
+      <div className='h-full py-10'>
+        <div className='h-full w-px bg-gray-500' />
+      </div>
+
       {user ? (
         <Profile variant='desktop' user={user} menuItems={menuItems} />
       ) : (

packages/web/src/ui/common/navigation/navigations/mobile-navigation.tsx

@@ -94,7 +94,7 @@ export const MobileNavigation: FC<NavigationProps> = ({
               />
             </div>
 
-            <div className='flex flex-col items-center gap-4'>
+            <div className='flex flex-col items-center gap-6'>
               {navLinks}
 
               {user ? (