Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

reduce DOM size #2749

Merged
merged 17 commits into from
Sep 4, 2023
+1,005 −1,180
Merged

reduce DOM size #2749

Changes from 1 commit
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
af75a2e
remove submenu from DOM when parent is not hovered
tvikito Aug 23, 2023
5bf85a5
refactor Image component to be better reusable
tvikito Aug 24, 2023
a26940f
refactor AutocompleteSearch
tvikito Aug 24, 2023
8068bd1
add dynamic import for Overlay component
tvikito Aug 24, 2023
ab2d972
refactor ProductListItem
tvikito Aug 24, 2023
c522516
refactor Cart component
tvikito Aug 24, 2023
0a710e1
refactor Logo component
tvikito Aug 24, 2023
1dd17b0
refactor Filter component
tvikito Aug 24, 2023
71764a2
refactor Header Menu
tvikito Aug 24, 2023
3edd218
refactor Navigation
tvikito Aug 25, 2023
53469c8
refactor Cart
tvikito Aug 25, 2023
f0cf8b1
refactor Breadcrumbs
tvikito Aug 25, 2023
46617d7
refactor FooterMenu
tvikito Aug 25, 2023
6eb6344
Remove ProductDetailAccessories wrapper in case of no data
tvikito Aug 30, 2023
7b7955d
refactor Webline
tvikito Aug 30, 2023
a8d17f0
refactor PageGuard
tvikito Sep 4, 2023
1ee66e3
fix alignment for delivery image
tvikito Sep 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
remove submenu from DOM when parent is not hovered
  • Loading branch information
@tvikito
tvikito committed Sep 1, 2023
commit af75a2ebfe32a9f3725a9594005f54616cb27ffd
14 changes: 11 additions & 3 deletions project-base/storefront/components/Layout/Header/Navigation/NavigationItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { ExtendedNextLink } from 'components/Basic/ExtendedNextLink/ExtendedNext
import { ArrowIcon } from 'components/Basic/Icon/IconsSvg';
import { NavigationLeaf } from 'components/Layout/Header/Navigation/NavigationLeaf';
import { CategoriesByColumnFragmentApi } from 'graphql/generated';
import { useState } from 'react';
import { twJoin } from 'tailwind-merge';

type NavigationItemProps = {
Expand All @@ -11,10 +12,16 @@ type NavigationItemProps = {
const TEST_IDENTIFIER = 'layout-header-navigation-navigationitem';

export const NavigationItem: FC<NavigationItemProps> = (props) => {
const [isMenuOpened, setIsMenuOpened] = useState(false);
const hasChildren = props.navigationItem.categoriesByColumns.length > 0;

return (
<li className="group inline-block p-0 align-middle last:mr-0 lg:mr-6 xl:mr-12" data-testid={TEST_IDENTIFIER}>
<li
className="group inline-block p-0 align-middle last:mr-0 lg:mr-6 xl:mr-12"
data-testid={TEST_IDENTIFIER}
onMouseEnter={() => setIsMenuOpened(true)}
onMouseLeave={() => setIsMenuOpened(false)}
>
<ExtendedNextLink
type="category"
href={props.navigationItem.link}
Expand All @@ -29,8 +36,9 @@ export const NavigationItem: FC<NavigationItemProps> = (props) => {
)}
</>
</ExtendedNextLink>
{hasChildren && (
<div className="pointer-events-none absolute left-0 right-0 z-menu block bg-white py-12 px-14 opacity-0 shadow-md group-hover:pointer-events-auto group-hover:opacity-100">

{hasChildren && isMenuOpened && (
<div className="absolute left-0 right-0 z-menu block bg-white py-12 px-14 shadow-md">
<div className="-ml-11 flex">
<NavigationLeaf columnCategories={props.navigationItem.categoriesByColumns} />
</div>
Expand Down