chore: update bottom bar home icon
This commit is contained in:
@@ -0,0 +1,21 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
type Props = React.SVGProps<SVGSVGElement>;
|
||||||
|
|
||||||
|
const HomeIcon: React.FC<Props> = ({ ...props }) => {
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width='24'
|
||||||
|
height='24'
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<path d="M17.79 22.75H6.21c-2.74 0-4.96-2.23-4.96-4.97v-7.41c0-1.36.84-3.07 1.92-3.91l5.39-4.2C10.18 1 12.77.94 14.45 2.12l6.18 4.33c1.19.83 2.12 2.61 2.12 4.06v7.28c0 2.73-2.22 4.96-4.96 4.96ZM9.48 3.46-3.46v-7.28c0-.96-.69-2.29-1.48-2.83l-6.18-4.33c-1.14-.8-3.02-.76-4.11.09Z"></path>
|
||||||
|
<path d="M12 18.75c-.41 0-.75-.34-.75-.75v-3c0-.41.34-.75.75-.75s.75.34.75.75v3c0 .41-.34.75-.75.75Z"></path>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HomeIcon;
|
||||||
@@ -1,18 +1,20 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import BottomNavLink from './BottomNavLink'
|
import BottomNavLink from './BottomNavLink'
|
||||||
import BottomNavHighlightLink from './BottomNavLinkBig'
|
import BottomNavHighlightLink from './BottomNavLinkBig'
|
||||||
import HomeHashtagIcon from '../icons/HomeHashtagIcon'
|
|
||||||
import PagerIcon from '../icons/PagerIcon'
|
import PagerIcon from '../icons/PagerIcon'
|
||||||
import NotifiBoardIcon from '../icons/NotifBoardIcon'
|
import NotifiBoardIcon from '../icons/NotifBoardIcon'
|
||||||
import BagIcon from '../icons/BagIcon'
|
import BagIcon from '../icons/BagIcon'
|
||||||
import HeartIcon from '../icons/HeartIcon'
|
import HeartIcon from '../icons/HeartIcon'
|
||||||
import { useParams } from 'next/navigation'
|
import { useParams, usePathname } from 'next/navigation'
|
||||||
|
import HomeIcon from '../icons/HomeIcon'
|
||||||
|
|
||||||
type Props = object
|
type Props = object
|
||||||
|
|
||||||
function BottomNavBar({ }: Props) {
|
function BottomNavBar({ }: Props) {
|
||||||
const params = useParams();
|
const params = useParams();
|
||||||
const { name } = params;
|
const { name } = params;
|
||||||
|
const pathname = usePathname();
|
||||||
|
const isHomeRoute = pathname === `/${name}`;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="fixed bottom-0 left-0 w-full bg-transparent">
|
<div className="fixed bottom-0 left-0 w-full bg-transparent">
|
||||||
@@ -37,9 +39,16 @@ function BottomNavBar({ }: Props) {
|
|||||||
className="absolute z-20 w-full h-full px-2 grid grid-cols-5 gap-x-2 text-[10px] items-end"
|
className="absolute z-20 w-full h-full px-2 grid grid-cols-5 gap-x-2 text-[10px] items-end"
|
||||||
>
|
>
|
||||||
<BottomNavLink href={`/${name}/orders`} icon={<BagIcon />} value="سبد خرید" />
|
<BottomNavLink href={`/${name}/orders`} icon={<BagIcon />} value="سبد خرید" />
|
||||||
<BottomNavLink href={`/${name}`} icon={<PagerIcon />} value="پیجر" />
|
<BottomNavLink href={`/${name}/pager`} icon={<PagerIcon />} value="پیجر" />
|
||||||
<BottomNavHighlightLink href={`/${name}`} icon={<HomeHashtagIcon />} value="منو" />
|
<BottomNavHighlightLink
|
||||||
<BottomNavLink href={`/${name}`} icon={<NotifiBoardIcon />} value="اعلان ها" />
|
href={`/${name}`}
|
||||||
|
icon={
|
||||||
|
<HomeIcon className='transition-all duration-200'
|
||||||
|
fill={isHomeRoute ? 'white' : 'transparent'}
|
||||||
|
stroke={isHomeRoute ? 'black' : 'white'}
|
||||||
|
strokeWidth={1} />}
|
||||||
|
value="منو" />
|
||||||
|
<BottomNavLink href={`/${name}/notifications`} icon={<NotifiBoardIcon />} value="اعلان ها" />
|
||||||
<BottomNavLink href={'/auth'} icon={<HeartIcon />} value="پسند ها" />
|
<BottomNavLink href={'/auth'} icon={<HeartIcon />} value="پسند ها" />
|
||||||
</div>
|
</div>
|
||||||
</foreignObject>
|
</foreignObject>
|
||||||
|
|||||||
Reference in New Issue
Block a user