pleb/flockstr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixing bottom tabs spaces

Browse Source
This commit is contained in:
zmeyer44 2023-10-15 00:14:22 -04:00
parent 6e9b4c17fa
commit 63e193d079
2 changed files with 5 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/(app)/_layout/BottomNav.tsx
View File

@ -28,8 +28,8 @@ export default function BottomNav() {
}, },
]; ];
return ( return (
<footer className="z-header- flex h-[var(--bottom-nav-height)] w-full bg-background sm:hidden"> <footer className="z-header- flex h-[var(--bottom-nav-height)] w-full sm:hidden">
<div className="fixed inset-x-0 bottom-0 flex h-[var(--bottom-nav-height)] flex-1 items-center justify-between border-t bg-background px-4"> <div className="bottom-tabs fixed inset-x-0 bottom-0 flex h-[var(--bottom-nav-height)] flex-1 items-center justify-between border-t bg-background px-4">
{navigationItems.map((item) => ( {navigationItems.map((item) => (
<Link href={item.href} className="center group group flex-1"> <Link href={item.href} className="center group group flex-1">
<item.icon <item.icon
@ -43,7 +43,6 @@ export default function BottomNav() {
/> />
</Link> </Link>
))} ))}
<div className="standalone:block hidden h-[20px] w-full"></div>
</div> </div>
</footer> </footer>
); );

3
app/globals.css
View File

@ -62,6 +62,9 @@
.dark { .dark {
--bottom-nav-height: 76px; --bottom-nav-height: 76px;
} }
.bottom-tabs {
padding-bottom: 20px;
}
} }
} }