From cc7a1e0cc874d2785f60c09b45400ee850feb450 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Thu, 26 May 2022 14:06:52 +0300
Subject: [PATCH] style: fix nav menus overflow border

---
 .../Navbar/CategoriesList/CategoriesList.stories.tsx       | 7 +++++--
 src/Components/Navbar/CategoriesList/CategoriesList.tsx    | 7 ++-----
 src/Components/Navbar/NavDesktop.tsx                       | 4 ++--
 src/Components/Navbar/NavMobile.tsx                        | 4 ++--
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/Components/Navbar/CategoriesList/CategoriesList.stories.tsx b/src/Components/Navbar/CategoriesList/CategoriesList.stories.tsx
index 85b0e74..7ba9297 100644
--- a/src/Components/Navbar/CategoriesList/CategoriesList.stories.tsx
+++ b/src/Components/Navbar/CategoriesList/CategoriesList.stories.tsx
@@ -1,5 +1,6 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { MOCK_DATA } from 'src/mocks/data';
+import { Menu, MenuButton } from '@szhsin/react-menu';
+import Button from 'src/Components/Button/Button';
 
 import CategoriesList from './CategoriesList';
 
@@ -9,7 +10,9 @@ export default {
 
 } as ComponentMeta<typeof CategoriesList>;
 
-const Template: ComponentStory<typeof CategoriesList> = (args) => <CategoriesList {...args} />;
+const Template: ComponentStory<typeof CategoriesList> = (args) => <Menu offsetY={24} menuButton={<MenuButton className='text-body4 font-bold hover:text-primary-600'>Open Categories Menu</MenuButton>}>
+  <CategoriesList {...args} />
+</Menu>;
 
 export const Default = Template.bind({});
 Default.args = {
diff --git a/src/Components/Navbar/CategoriesList/CategoriesList.tsx b/src/Components/Navbar/CategoriesList/CategoriesList.tsx
index 22aac25..92979d4 100644
--- a/src/Components/Navbar/CategoriesList/CategoriesList.tsx
+++ b/src/Components/Navbar/CategoriesList/CategoriesList.tsx
@@ -33,7 +33,7 @@ export default function CategoriesList({ classes = {}, onClick }: Props) {
         <>
             {data?.allCategories.map(category =>
                 <MenuItem
-                    className={`w-full !p-16 text-body4 font-semibold hover:bg-gray-100 !rounded-8 ${classes.item}`}
+                    className={`w-full !p-16 text-body4 font-semibold hover:bg-gray-100 !rounded-8 flex w-items-center ${classes.item}`}
                     onClick={() => {
                         onClick?.(category.id)
                         navigate(`/category/${category.id}`)
@@ -41,10 +41,7 @@ export default function CategoriesList({ classes = {}, onClick }: Props) {
                     key={category.id}
                     href={`/category/${category.id}`}
                 >
-
-                    <li className={`flex w-items-center `} >
-                        <span className="text-body3 mr-8">{category.icon}</span> {category.title} <span className="ml-auto pl-8 text-body5 font-normal text-gray-400">{numberFormatter(category.votes_sum)}</span>
-                    </li>
+                    <span className="text-body3 mr-8">{category.icon}</span> {category.title} <span className="ml-auto pl-8 text-body5 font-normal text-gray-400">{numberFormatter(category.votes_sum)}</span>
                 </MenuItem>
             )}
         </>
diff --git a/src/Components/Navbar/NavDesktop.tsx b/src/Components/Navbar/NavDesktop.tsx
index 0474032..b69060a 100644
--- a/src/Components/Navbar/NavDesktop.tsx
+++ b/src/Components/Navbar/NavDesktop.tsx
@@ -74,7 +74,7 @@ export default function NavDesktop() {
         </a>
         <ul className="flex gap-32 xl:gap-64">
             <li>
-                <Menu offsetY={24} menuClassName='!rounded-12 !p-0' menuButton={<MenuButton className='text-body4 font-bold hover:text-primary-600'>LApps <FiChevronDown className="ml-8" /></MenuButton>}>
+                <Menu offsetY={24} menuClassName='!rounded-12' menuButton={<MenuButton className='text-body4 font-bold hover:text-primary-600'>LApps <FiChevronDown className="ml-8" /></MenuButton>}>
                     <MenuItem
                         href="/"
                         onClick={(e) => {
@@ -112,7 +112,7 @@ export default function NavDesktop() {
                 </Menu>
             </li>
             <li>
-                <Menu offsetY={24} menuClassName='!rounded-12 !p-0' menuButton={<MenuButton className='text-body4 font-bold hover:text-primary-600'>Community <FiChevronDown className="ml-8" /></MenuButton>}>
+                <Menu offsetY={24} menuClassName='!rounded-12' menuButton={<MenuButton className='text-body4 font-bold hover:text-primary-600'>Community <FiChevronDown className="ml-8" /></MenuButton>}>
                     <MenuItem
                         href="/blog"
                         onClick={(e) => {
diff --git a/src/Components/Navbar/NavMobile.tsx b/src/Components/Navbar/NavMobile.tsx
index c751c09..8d3fea4 100644
--- a/src/Components/Navbar/NavMobile.tsx
+++ b/src/Components/Navbar/NavMobile.tsx
@@ -161,7 +161,7 @@ export default function NavMobile({ }: Props) {
               <Link to={link.url} onClick={() => toggleDrawerOpen(false)}><link.icon className={`text-body2  inline-block mr-12 text-primary-600`} /> <span className="align-middle">{link.text}</span> </Link></li>
             )} */}
             <li>
-              <Menu offsetY={24} menuClassName='!rounded-12 !p-0' menuButton={<MenuButton className='text-body4 font-bold hover:text-primary-600'>LApps <FiChevronDown className="ml-8" /></MenuButton>}>
+              <Menu offsetY={24} menuClassName='!rounded-12' menuButton={<MenuButton className='text-body4 font-bold hover:text-primary-600'>LApps <FiChevronDown className="ml-8" /></MenuButton>}>
                 <MenuItem
                   href="/"
                   onClick={(e) => {
@@ -200,7 +200,7 @@ export default function NavMobile({ }: Props) {
               </Menu>
             </li>
             <li>
-              <Menu offsetY={24} menuClassName='!rounded-12 !p-0' menuButton={<MenuButton className='text-body4 font-bold hover:text-primary-600'>Community <FiChevronDown className="ml-8" /></MenuButton>}>
+              <Menu offsetY={24} menuClassName='!rounded-12' menuButton={<MenuButton className='text-body4 font-bold hover:text-primary-600'>Community <FiChevronDown className="ml-8" /></MenuButton>}>
                 <MenuItem
                   href="/blog"
                   onClick={(e) => {