aljaz/landscape-template
1
0
Fork 0
mirror of https://github.com/aljazceru/landscape-template.git synced 2026-01-30 03:34:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

style: fix nav menus overflow border

Browse Source
This commit is contained in:
MTG2000
2022-05-26 14:06:52 +03:00
parent c9cd63e11b
commit cc7a1e0cc8
4 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/Components/Navbar/CategoriesList/CategoriesList.stories.tsx
View File

@@ -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 = {

7
src/Components/Navbar/CategoriesList/CategoriesList.tsx
View File

@@ -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>
)}
</>

4
src/Components/Navbar/NavDesktop.tsx
View File

@@ -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) => {

4
src/Components/Navbar/NavMobile.tsx
View File

@@ -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) => {