Skip to content
This repository has been archived by the owner on Jun 10, 2024. It is now read-only.

nuzhy/hover effect on navigation items #240

Merged
merged 2 commits into from
Dec 5, 2023
Merged

nuzhy/hover effect on navigation items #240

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b204adc
fix: hover effect on navigation items
Nuzhy-Deriv Dec 5, 2023
d29269d
Merge branch 'main' into nuzhy/nav-effetcs
Nuzhy-Deriv Dec 5, 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
10 changes: 7 additions & 3 deletions libs/blocks/src/lib/navigation/desktop/desktop.nav-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export const DesktopNavItem: React.FC<DesktopNavItemProps> = ({
return (
!item.isMobileNavOnly && (
<li
className="flex h-full items-center justify-center px-general-lg text-center"
className="group flex h-full items-center justify-center px-general-lg text-center"
onMouseEnter={() => {
setShowLangContent?.(false);
if (item.type === 'nav-dropdown') {
Expand All @@ -29,8 +29,9 @@ export const DesktopNavItem: React.FC<DesktopNavItemProps> = ({
>
{item.type === 'direct' ? (
<CustomLink
className="text-typography-default"
className="text-typography-default group-hover:text-typography-prominent"
href={item.href}
hasHoverDecoration={false}
onMouseEnter={() => {
setShowLangContent?.(false);
onListItemHover?.(navItemName);
Expand All @@ -39,7 +40,10 @@ export const DesktopNavItem: React.FC<DesktopNavItemProps> = ({
{item.text}
</CustomLink>
) : (
<Text size="sm" className="cursor-pointer hover:text-typography-link">
<Text
size="sm"
className="cursor-pointer hover:text-typography-prominent"
>
{item.text}
</Text>
)}
Expand Down
6 changes: 4 additions & 2 deletions libs/blocks/src/lib/navigation/language-switcher/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,17 @@ const LanguageSwitcher = () => {

return (
<div
className="flex cursor-pointer items-center gap-gap-sm"
className="group flex cursor-pointer items-center gap-gap-sm"
onMouseEnter={() => {
setIsDropContentOpen?.(false);
setActiveMenu?.('none');
onLanguageHover?.();
}}
>
<FlagUnitedKingdomIcon className="inline" width={24} height={16} />
<Text className="inline-block">{activeLanguage?.shortName}</Text>
<Text className="inline-block group-hover:text-typography-prominent">
{activeLanguage?.shortName}
</Text>
</div>
);
};
Expand Down
2 changes: 1 addition & 1 deletion libs/blocks/src/lib/navigation/language-switcher/mobile-language.content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export const MobileLanguageContent = () => {
<div className="py-general-sm" key={langItems[item].displayName}>
<Text
bold
className="cursor-pointer"
className="cursor-pointer hover:text-typography-prominent"
onClick={() => {
selectLanguage?.(langItems[item]);
setShowMobileLanguages?.(false);
Expand Down
6 changes: 4 additions & 2 deletions libs/blocks/src/lib/navigation/language-switcher/mobile-language.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,15 @@ export const MobileLanguageToggler = () => {
return (
<div className="border-t-xs border-solid border-opacity-black-100 pt-general-md">
<div
className="flex cursor-pointer items-center gap-gap-md py-general-sm"
className="group flex cursor-pointer items-center gap-gap-md py-general-sm"
onClick={() => {
setShowMobileLanguages?.(true);
}}
>
<FlagUnitedKingdomIcon width={24} height={16} />
<Text bold>{activeLanguage?.displayName}</Text>
<Text className="group-hover:text-typography-prominent" bold>
{activeLanguage?.displayName}
</Text>
</div>
</div>
);
Expand Down
4 changes: 3 additions & 1 deletion libs/blocks/src/lib/navigation/mobile/mobile.nav-link.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,10 @@ export const MobileNavLink: React.FC<MobileNavLinkProps> = ({
return (
<CustomLink
href={item.href}
hasHoverDecoration={false}
className={qtMerge(
'py-general-sm text-body-md font-bold leading-body-md text-typography-default',
'py-general-sm text-body-md font-bold leading-body-md',
'hover:text-typography-prominent',
className,
)}
onClick={toggleMobileNav}
Expand Down
4 changes: 2 additions & 2 deletions libs/blocks/src/lib/navigation/mobile/mobile.nav-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,10 @@ export const MobileNavList = () => {
return <MobileNavLink item={item} key={navItemName} />;
}
return (
<li key={navItemName} className="py-general-sm">
<li key={navItemName} className="group py-general-sm">
<Text
size="md"
className="cursor-pointer"
className="cursor-pointer group-hover:text-typography-prominent"
bold
onClick={() => {
setActiveMenu?.(navItemName);
Expand Down
5 changes: 3 additions & 2 deletions libs/blocks/src/lib/navigation/navigation.link.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,16 +15,17 @@ export const NavigationLink: React.FC<NavigationLinkProps> = ({
return (
<CustomLink
href={item.href}
hasHoverDecoration={false}
className={qtMerge(
'w-full justify-start gap-gap-md py-general-sm font-bold',
'group w-full justify-start gap-gap-md py-general-sm font-bold',
item.icon && 'grid grid-cols-[24px_1fr]',
!item.icon && item.description && 'flex flex-col',
className,
)}
>
{item.icon ? item.icon : null}
<div className="flex gap-gap-sm">
<Text size="md" bold>
<Text size="md" bold className="group-hover:text-typography-prominent">
{item.text}
</Text>
{item.external && <LabelPairedArrowUpRightRegularIcon iconSize="sm" />}
Expand Down
Loading