menu bottom color
This commit is contained in:
@@ -12,7 +12,6 @@ import HomeIcon from '../icons/HomeIcon'
|
|||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { useCart } from '@/app/[name]/(Main)/cart/hook/useCart';
|
import { useCart } from '@/app/[name]/(Main)/cart/hook/useCart';
|
||||||
import { Building } from 'iconsax-react';
|
import { Building } from 'iconsax-react';
|
||||||
import clsx from 'clsx';
|
|
||||||
import { glassSurfaceNav } from '@/lib/styles/glassSurface';
|
import { glassSurfaceNav } from '@/lib/styles/glassSurface';
|
||||||
import { getBottomNavMaskStyle } from './bottomNavShape';
|
import { getBottomNavMaskStyle } from './bottomNavShape';
|
||||||
import { useGetProfile } from '@/app/[name]/(Profile)/profile/hooks/userProfileData';
|
import { useGetProfile } from '@/app/[name]/(Profile)/profile/hooks/userProfileData';
|
||||||
@@ -81,7 +80,7 @@ function BottomNavBar({ onPagerClick }: BottomNavBarProps) {
|
|||||||
{onPagerClick ? (
|
{onPagerClick ? (
|
||||||
<button
|
<button
|
||||||
onClick={onPagerClick}
|
onClick={onPagerClick}
|
||||||
className="flex flex-col justify-arround items-center gap-[5px] text-disabled-text pointer-events-auto **:stroke-disabled-text"
|
className="flex flex-col justify-arround items-center gap-[5px] text-primary pointer-events-auto **:stroke-primary"
|
||||||
>
|
>
|
||||||
<PagerIcon width={20} height={20} />
|
<PagerIcon width={20} height={20} />
|
||||||
<span className="text-xs2">
|
<span className="text-xs2">
|
||||||
@@ -104,12 +103,7 @@ function BottomNavBar({ onPagerClick }: BottomNavBarProps) {
|
|||||||
value={t('Menu')} />
|
value={t('Menu')} />
|
||||||
<Link
|
<Link
|
||||||
href={`/${name}/about`}
|
href={`/${name}/about`}
|
||||||
className={clsx(
|
className="flex flex-col justify-arround items-center gap-[5px] pointer-events-auto min-w-0 text-primary **:stroke-primary"
|
||||||
'flex flex-col justify-arround items-center gap-[5px] pointer-events-auto min-w-0',
|
|
||||||
isAboutRoute
|
|
||||||
? 'text-primary **:stroke-primary'
|
|
||||||
: 'text-disabled-text **:stroke-disabled-text',
|
|
||||||
)}
|
|
||||||
>
|
>
|
||||||
<div className="shrink-0">
|
<div className="shrink-0">
|
||||||
<Building
|
<Building
|
||||||
|
|||||||
@@ -3,7 +3,6 @@
|
|||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import type { LinkProps } from 'next/link'
|
import type { LinkProps } from 'next/link'
|
||||||
import { usePathname } from 'next/navigation'
|
|
||||||
import clsx from 'clsx'
|
import clsx from 'clsx'
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
@@ -12,16 +11,11 @@ type Props = {
|
|||||||
} & LinkProps & React.AnchorHTMLAttributes<HTMLAnchorElement>
|
} & LinkProps & React.AnchorHTMLAttributes<HTMLAnchorElement>
|
||||||
|
|
||||||
function BottomNavLink({ icon, value, href, prefetch, ...restProps }: Props) {
|
function BottomNavLink({ icon, value, href, prefetch, ...restProps }: Props) {
|
||||||
const pathname = usePathname();
|
|
||||||
const isActive = pathname === href;
|
|
||||||
const shouldPrefetch = prefetch ?? true;
|
const shouldPrefetch = prefetch ?? true;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Link {...restProps} href={href} prefetch={shouldPrefetch} className={clsx(
|
<Link {...restProps} href={href} prefetch={shouldPrefetch} className={clsx(
|
||||||
'flex flex-col justify-arround items-center gap-[5px] pointer-events-auto min-w-0',
|
'flex flex-col justify-arround items-center gap-[5px] pointer-events-auto min-w-0 text-primary **:stroke-primary',
|
||||||
isActive
|
|
||||||
? 'text-primary **:stroke-primary'
|
|
||||||
: 'text-disabled-text **:stroke-disabled-text',
|
|
||||||
restProps.className ?? '',
|
restProps.className ?? '',
|
||||||
)}>
|
)}>
|
||||||
<div className="shrink-0">
|
<div className="shrink-0">
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ function BottomNavHighlightLink({ icon, value, href, ...restProps }: Props) {
|
|||||||
)}>
|
)}>
|
||||||
{icon}
|
{icon}
|
||||||
</div>
|
</div>
|
||||||
<span className="text-xs2 text-disabled-text">
|
<span className="text-xs2 text-primary">
|
||||||
{value}
|
{value}
|
||||||
</span>
|
</span>
|
||||||
</Link>
|
</Link>
|
||||||
|
|||||||
Reference in New Issue
Block a user