-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
EPMGCIP-163: Implement Responsive Menu with SubMenus Using Mantine Li…
…brary (#34) * EPMGCIP-163: Implement basic layout for navigation header menu * EPMGCIP-163: Implement base layout for desktop view for "Header" menu, add separate subcomponent for desktop view * EPMGCIP-163: Add selected link highlight line in "Header" component * EPMGCIP-163: Add new hook to track mobile view layout (sm breakpoint), update hierarchy for Header sub components * EPMGCIP-163: Implement mobile layout and logic for sidebar (drawer), update styles definition * EPMGCIP-163: Define a new component to contain element with sub links in for mobile, update usages * EPMGCIP-163: Add support for props passing to "Header" component, update usages * EPMGCIP-163: Improve logic with tracking selected link, add support for disabling nested link, update usages * EPMGCIP-163: Update "Header" related components with "data-testid" attribute for testing purposes, extend types declaration to include custom props * EPMGCIP-163: Improve UTs for "Header" to check new scenarios * EPMGCIP-163: Add new component to store layout for sublinks items for desktop, update usages * EPMGCIP-163: Rename "global.d.ts" to "custom-types.d.ts" to avoid confusions, update usages * EPMGCIP-163: Disable extra error rule "react/react-in-jsx-scope" due to redundancy * EPMGCIP-163: Implement UTs for "useMobileView" * EPMGCIP-163: Make mobile link including sublinks clickable in "MobileSubLinks" * EPMGCIP-163: Resolve desktop header dead zone issue on hover in styles * EPMGCIP-163: Improve option with highlighted sublink in desktop header * EPMGCIP-163: Replace hardcoded font-size values with variables in "Header.module.scss" * EPMGCIP-163: Update usages of variables for "Header.module.scss" to make consistent flow * EPMGCIP-163: Define set of UI theme breakpoints, update usage in "useMobileView" * EPMGCIP-163: Remove some explicit function type in return in "Header" related components * EPMGCIP-163: Define new theme color for menu link, update usage in "Header.module.scss" * EPMGCIP-163: Update logic with tracking selected link on pathname change in "Header"
- Loading branch information
1 parent
7b29fc9
commit a1b9812
Showing
25 changed files
with
732 additions
and
35 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| export * from '@mantine/core'; | ||
|
|
||
| declare module '@mantine/core' { | ||
| export interface ModalBaseCloseButtonProps { | ||
| 'data-testid'?: string | null; | ||
| } | ||
| } |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import React from 'react'; | ||
|
|
||
| import { Group } from '@mantine/core'; | ||
| import { clsx } from 'clsx'; | ||
| import Image from 'next/image'; | ||
| import { useTranslations } from 'next-intl'; | ||
|
|
||
| import logo from '@/assets/image/logo.png'; | ||
| import LanguageSwitcher from '@/components/molecules/LanguageSwitcher/LanguageSwitcher'; | ||
| import { DesktopSubLinks } from '@/components/organisms/Header/DesktopSubLinks'; | ||
| import { BASE_URL } from '@/constants/routes'; | ||
| import { ILink } from '@/interfaces/ILink'; | ||
| import { Link } from '@/navigation'; | ||
|
|
||
| import styles from './Header.module.scss'; | ||
|
|
||
| interface Props { | ||
| activeLinkIndex: number; | ||
| links: ILink[]; | ||
| } | ||
|
|
||
| export const DesktopHeader: React.FC<Props> = (props) => { | ||
| const t = useTranslations(); | ||
|
|
||
| return ( | ||
| <> | ||
| <Link href={BASE_URL}> | ||
| <Image src={logo} width={68} alt={t('logo')} /> | ||
| </Link> | ||
|
|
||
| <Group gap={50} className={styles.desktopContainer}> | ||
| {props.links.map((link, index) => { | ||
| const isSubMenuItem = !!link.subLinks; | ||
| const isSelectedLink = props.activeLinkIndex === index; | ||
|
|
||
| if (!isSubMenuItem) { | ||
| const linkUrl = link.url!; | ||
|
|
||
| return ( | ||
| <Link | ||
| data-testid="link" | ||
| key={link.label} | ||
| href={linkUrl} | ||
| className={clsx(styles.desktopLink, { [styles.desktopActiveLink]: isSelectedLink })} | ||
| > | ||
| {link.label} | ||
| </Link> | ||
| ); | ||
| } | ||
|
|
||
| return <DesktopSubLinks key={link.label} link={link} isSelected={isSelectedLink} />; | ||
| })} | ||
| </Group> | ||
|
|
||
| <LanguageSwitcher /> | ||
| </> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import React from 'react'; | ||
|
|
||
| import { HoverCard } from '@mantine/core'; | ||
| import { clsx } from 'clsx'; | ||
|
|
||
| import { ILink } from '@/interfaces/ILink'; | ||
| import { Link } from '@/navigation'; | ||
|
|
||
| import styles from './Header.module.scss'; | ||
|
|
||
| interface Props { | ||
| link: ILink; | ||
| isSelected: boolean; | ||
| } | ||
|
|
||
| export const DesktopSubLinks: React.FC<Props> = (props) => { | ||
| const onClickSubMenuLink = (e: React.MouseEvent<HTMLAnchorElement>): void => { | ||
| e.preventDefault(); | ||
| }; | ||
|
|
||
| return ( | ||
| <HoverCard> | ||
| <HoverCard.Target> | ||
| <Link | ||
| data-testid="link" | ||
| href={''} | ||
| onClick={onClickSubMenuLink} | ||
| className={clsx(styles.desktopLink, { | ||
| [styles.desktopActiveLink]: props.isSelected, | ||
| })} | ||
| > | ||
| {props.link.label} | ||
| </Link> | ||
| </HoverCard.Target> | ||
|
|
||
| <HoverCard.Dropdown className={styles.subLinksDropdown}> | ||
| <div className={styles.desktopSubLinksContainer}> | ||
| {props.link.subLinks!.map((subLink) => ( | ||
| <Link | ||
| data-testid="sub-link" | ||
| key={subLink.label} | ||
| href={subLink.url} | ||
| className={styles.desktopSubLink} | ||
| > | ||
| {subLink.label} | ||
| </Link> | ||
| ))} | ||
| </div> | ||
| </HoverCard.Dropdown> | ||
| </HoverCard> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.