add: active link styling to bottom navbar
This commit is contained in:
Mahyar Khanbolooki
Generated
+10
@@ -11,6 +11,7 @@
|
||||
"@tanstack/react-query": "^5.81.5",
|
||||
"@tanstack/react-query-devtools": "^5.81.5",
|
||||
"axios": "^1.10.0",
|
||||
"clsx": "^2.1.1",
|
||||
"dmenu-plus-frontned": "file:",
|
||||
"framer-motion": "^12.20.1",
|
||||
"next": "15.3.4",
|
||||
@@ -2396,6 +2397,15 @@
|
||||
"integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/clsx": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
|
||||
"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/color": {
|
||||
"version": "4.2.3",
|
||||
"resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
"@tanstack/react-query": "^5.81.5",
|
||||
"@tanstack/react-query-devtools": "^5.81.5",
|
||||
"axios": "^1.10.0",
|
||||
"clsx": "^2.1.1",
|
||||
"dmenu-plus-frontned": "file:",
|
||||
"framer-motion": "^12.20.1",
|
||||
"next": "15.3.4",
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
--color-valid: #439C46;
|
||||
--color-foreground: #333333;
|
||||
--color-disabled: #E7E7E7;
|
||||
--color-disabled2: #7F7F7F;
|
||||
--color-disabled-text: #8C90A3;
|
||||
--color-menu-header: #C3C7DD;
|
||||
--color-icon-deactive: #A8ABBF;
|
||||
|
||||
@@ -13,7 +13,7 @@ const BagIcon = (props: Props) => (
|
||||
>
|
||||
<path
|
||||
d="M7.5 7.67001V6.70001C7.5 4.45001 9.31 2.24001 11.56 2.03001C14.24 1.77001 16.5 3.88001 16.5 6.51001V7.89001"
|
||||
stroke="#7F7F7F"
|
||||
stroke="currentColor"
|
||||
strokeWidth={1.5}
|
||||
strokeMiterlimit={10}
|
||||
strokeLinecap="round"
|
||||
@@ -21,7 +21,7 @@ const BagIcon = (props: Props) => (
|
||||
/>
|
||||
<path
|
||||
d="M8.99983 22H14.9998C19.0198 22 19.7398 20.39 19.9498 18.43L20.6998 12.43C20.9698 9.99 20.2698 8 15.9998 8H7.99983C3.72983 8 3.02983 9.99 3.29983 12.43L4.04983 18.43C4.25983 20.39 4.97983 22 8.99983 22Z"
|
||||
stroke="#7F7F7F"
|
||||
stroke="currentColor"
|
||||
strokeWidth={1.5}
|
||||
strokeMiterlimit={10}
|
||||
strokeLinecap="round"
|
||||
|
||||
@@ -13,28 +13,28 @@ const HomeHashtagIcon = (props: Props) => (
|
||||
>
|
||||
<path
|
||||
d="M9.02 2.83992L3.63 7.03992C2.73 7.73992 2 9.22992 2 10.3599V17.7699C2 20.0899 3.89 21.9899 6.21 21.9899H17.79C20.11 21.9899 22 20.0899 22 17.7799V10.4999C22 9.28992 21.19 7.73992 20.2 7.04992L14.02 2.71992C12.62 1.73992 10.37 1.78992 9.02 2.83992Z"
|
||||
stroke="white"
|
||||
stroke="currentColor"
|
||||
strokeWidth={1.5}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M10.5 18H13.5C15.15 18 16.5 16.65 16.5 15V12C16.5 10.35 15.15 9 13.5 9H10.5C8.85 9 7.5 10.35 7.5 12V15C7.5 16.65 8.85 18 10.5 18Z"
|
||||
stroke="white"
|
||||
stroke="currentColor"
|
||||
strokeWidth={1.5}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M12 9V18"
|
||||
stroke="white"
|
||||
stroke="currentColor"
|
||||
strokeWidth={1.5}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M7.5 13.5H16.5"
|
||||
stroke="white"
|
||||
stroke="currentColor"
|
||||
strokeWidth={1.5}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
|
||||
@@ -6,10 +6,14 @@ import PagerIcon from '../icons/PagerIcon'
|
||||
import NotifiBoardIcon from '../icons/NotifBoardIcon'
|
||||
import BagIcon from '../icons/BagIcon'
|
||||
import HeartIcon from '../icons/HeartIcon'
|
||||
import { useParams } from 'next/navigation'
|
||||
|
||||
type Props = object
|
||||
|
||||
function BottomNavBar({ }: Props) {
|
||||
const params = useParams();
|
||||
const { name } = params;
|
||||
|
||||
return (
|
||||
<div className="fixed bottom-0 left-0 w-full bg-transparent">
|
||||
<div className="max-w-md mx-auto w-full aspect-[436/104] relative z-30">
|
||||
@@ -32,10 +36,10 @@ function BottomNavBar({ }: Props) {
|
||||
<div
|
||||
className="absolute z-20 w-full h-full px-2 grid grid-cols-5 gap-x-2 text-[10px] items-end"
|
||||
>
|
||||
<BottomNavLink href={''} icon={<BagIcon />} value="سبد خرید" />
|
||||
<BottomNavLink href={''} icon={<PagerIcon />} value="پیجر" />
|
||||
<BottomNavHighlightLink href={''} icon={<HomeHashtagIcon />} value="منو" />
|
||||
<BottomNavLink href={''} icon={<NotifiBoardIcon />} value="اعلان ها" />
|
||||
<BottomNavLink href={`/${name}/orders`} icon={<BagIcon />} value="سبد خرید" />
|
||||
<BottomNavLink href={`/${name}`} icon={<PagerIcon />} value="پیجر" />
|
||||
<BottomNavHighlightLink href={`/${name}`} icon={<HomeHashtagIcon />} value="منو" />
|
||||
<BottomNavLink href={`/${name}`} icon={<NotifiBoardIcon />} value="اعلان ها" />
|
||||
<BottomNavLink href={'/auth'} icon={<HeartIcon />} value="پسند ها" />
|
||||
</div>
|
||||
</foreignObject>
|
||||
|
||||
@@ -1,17 +1,29 @@
|
||||
import Link from 'next/link'
|
||||
import React from 'react'
|
||||
import type { LinkProps } from 'next/link'
|
||||
import { usePathname } from 'next/navigation'
|
||||
import clsx from 'clsx'
|
||||
|
||||
type Props = {
|
||||
icon: React.ReactElement
|
||||
value: string
|
||||
} & LinkProps & React.AnchorHTMLAttributes<HTMLAnchorElement>
|
||||
|
||||
function BottomNavLink({ icon, value, ...restProps }: Props) {
|
||||
function BottomNavLink({ icon, value, href, ...restProps }: Props) {
|
||||
const pathname = usePathname();
|
||||
const isActive = pathname === href;
|
||||
|
||||
return (
|
||||
<Link {...restProps} className={`flex flex-col justify-arround items-center gap-[5px] ${restProps.className ?? ''}`}>
|
||||
<Link {...restProps} href={href} className={clsx(
|
||||
'flex flex-col justify-arround items-center gap-[5px] text-disabled2',
|
||||
isActive && 'text-foreground',
|
||||
restProps.className ?? '',
|
||||
)}>
|
||||
{icon}
|
||||
<span className='text-xs2 text-disabled-text'>
|
||||
<span className={clsx(
|
||||
'text-xs2 text-disabled-text',
|
||||
isActive && 'text-foreground'
|
||||
)}>
|
||||
{value}
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
@@ -1,19 +1,33 @@
|
||||
import Link from 'next/link'
|
||||
import React from 'react'
|
||||
import type { LinkProps } from 'next/link'
|
||||
import { usePathname } from 'next/navigation'
|
||||
import clsx from 'clsx'
|
||||
|
||||
type Props = {
|
||||
icon: React.ReactElement
|
||||
value: string
|
||||
} & LinkProps & React.AnchorHTMLAttributes<HTMLAnchorElement>
|
||||
|
||||
function BottomNavHighlightLink({ icon, value, ...restProps }: Props) {
|
||||
function BottomNavHighlightLink({ icon, value, href, ...restProps }: Props) {
|
||||
const pathname = usePathname();
|
||||
const isActive = pathname === href;
|
||||
|
||||
return (
|
||||
<Link {...restProps} className={`flex flex-col relative justify-arround items-center gap-[5px] ${restProps.className ?? ''}`}>
|
||||
<div className='bg-primary p-3 rounded-full'>
|
||||
<Link {...restProps} href={href} className={clsx(
|
||||
'flex flex-col justify-arround items-center gap-[5px] text-disabled2',
|
||||
isActive && 'text-foreground',
|
||||
restProps.className ?? '',
|
||||
)}>
|
||||
<div className={clsx(
|
||||
'bg-primary text-white p-3 rounded-full',
|
||||
)}>
|
||||
{icon}
|
||||
</div>
|
||||
<span className='text-xs2 text-disabled-text'>
|
||||
<span className={clsx(
|
||||
'text-xs2 text-disabled-text',
|
||||
isActive && 'text-foreground'
|
||||
)}>
|
||||
{value}
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
Reference in New Issue
Block a user