From a7c730b3d96feae9ccd2b20ffbd26078ff966849 Mon Sep 17 00:00:00 2001
From: geisterfurz007 <michelvonv@me.com>
Date: Fri, 12 Jan 2024 14:56:33 +0100
Subject: [PATCH] fix: some styling changes on the navigations

---
 .../navigation/nav-link/nav-link.stories.tsx  | 64 +++++++++++--------
 .../navigations/desktop-navigation.tsx        |  6 +-
 .../navigations/mobile-navigation.tsx         |  2 +-
 3 files changed, 44 insertions(+), 28 deletions(-)

diff --git a/packages/web/src/ui/common/navigation/nav-link/nav-link.stories.tsx b/packages/web/src/ui/common/navigation/nav-link/nav-link.stories.tsx
index 86d00948..90083cbc 100644
--- a/packages/web/src/ui/common/navigation/nav-link/nav-link.stories.tsx
+++ b/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: [],
+      },
     },
   },
 };
diff --git a/packages/web/src/ui/common/navigation/navigations/desktop-navigation.tsx b/packages/web/src/ui/common/navigation/navigations/desktop-navigation.tsx
index 86fb2313..3f82ac03 100644
--- a/packages/web/src/ui/common/navigation/navigations/desktop-navigation.tsx
+++ b/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} />
       ) : (
diff --git a/packages/web/src/ui/common/navigation/navigations/mobile-navigation.tsx b/packages/web/src/ui/common/navigation/navigations/mobile-navigation.tsx
index 307e83d0..f6826b18 100644
--- a/packages/web/src/ui/common/navigation/navigations/mobile-navigation.tsx
+++ b/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 ? (