danak/dmenu-plus-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

check-fix bottom sheet

Browse Source
This commit is contained in:
hamid zarghami
2025-12-14 14:58:36 +03:30
parent 3309f3bed1
commit 9e4ccad8e5
2 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/navigation/BottomNavBar.tsx
+6 -8
View File
@@ -33,15 +33,14 @@ function BottomNavBar({ onPagerClick }: BottomNavBarProps) {
}, [items]); }, [items]);
return ( return (
<div className="fixed bottom-0 left-0 w-full bg-transparent pointer-events-none overflow-visible"> <div className="fixed bottom-0 left-0 w-full bg-transparent pointer-events-none">
<div className="max-w-md mx-auto w-full aspect-[436/104] relative z-30 overflow-visible"> <div className="max-w-md mx-auto w-full aspect-[436/104] relative z-30">
<svg <svg
viewBox="0 0 436 104" viewBox="0 0 436 104"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
className="w-full h-full block" className="w-full h-full block"
preserveAspectRatio="xMidYMid meet" preserveAspectRatio="xMidYMid meet"
style={{ overflow: 'visible' }}
> >
<g filter="url(#filter0_d_9095_18036)" className='fill-container'> <g filter="url(#filter0_d_9095_18036)" className='fill-container'>
<path <path
@@ -51,18 +50,17 @@ function BottomNavBar({ onPagerClick }: BottomNavBarProps) {
</g> </g>
{/* 🔽 Your HTML content inside SVG */} {/* 🔽 Your HTML content inside SVG */}
<foreignObject x="0" y="0" width="100%" height="100%" style={{ overflow: 'visible' }}> <foreignObject x="0" y="10" width="100%" height="80">
<nav <nav
className="h-full px-2 grid grid-cols-5 gap-x-2 text-[10px] items-end relative pt-[10px] pb-[14px]" className="h-full px-4 grid grid-cols-5 gap-x-1 text-[10px] items-end overflow-hidden"
style={{ overflow: 'visible' }}
> >
<BottomNavLink <BottomNavLink
href={`/${name}/cart`} href={`/${name}/cart`}
icon={ icon={
<div className="relative" style={{ overflow: 'visible' }}> <div className="relative flex-shrink-0">
<BagIcon width={20} height={20} /> <BagIcon width={20} height={20} />
{cartItemsCount > 0 && ( {cartItemsCount > 0 && (
<span className="absolute -top-2 -right-2 flex items-center justify-center min-w-[18px] h-[18px] px-1 text-[10px] font-medium text-white bg-primary rounded-full z-10 pointer-events-none"> <span className="absolute -top-2 -right-2 flex items-center justify-center min-w-[18px] h-[18px] px-1 text-[10px] font-medium text-white bg-primary rounded-full">
{cartItemsCount > 99 ? '99+' : cartItemsCount} {cartItemsCount > 99 ? '99+' : cartItemsCount}
</span> </span>
)} )}
src/components/navigation/BottomNavLink.tsx
+6 -4
View File
@@ -17,13 +17,15 @@ function BottomNavLink({ icon, value, href, ...restProps }: Props) {
return ( return (
<Link {...restProps} href={href} className={clsx( <Link {...restProps} href={href} className={clsx(
'flex flex-col justify-arround items-center gap-[5px] text-disabled2 pointer-events-auto dark:**:stroke-neutral-500', 'flex flex-col justify-arround items-center gap-[5px] text-disabled2 pointer-events-auto dark:**:stroke-neutral-500 min-w-0',
isActive && 'text-foreground **:stroke-foreground', isActive && 'text-foreground **:stroke-foreground',
restProps.className ?? '', restProps.className ?? '',
)}> )}>
{icon} <div className="flex-shrink-0">
{icon}
</div>
<span className={clsx( <span className={clsx(
'text-xs2 text-disabled-text', 'text-xs2 text-disabled-text text-center truncate w-full',
isActive && 'text-foreground' isActive && 'text-foreground'
)}> )}>
{value} {value}