From 1d29a515d118ab8c59e2df00df3f12d73b83d6b8 Mon Sep 17 00:00:00 2001
From: mauriciabad <hello@mauriciabad.com>
Date: Sat, 21 Oct 2023 15:37:21 +0200
Subject: [PATCH] Add padding under navbar

---
 src/app/[locale]/(app)/layout.tsx       |  7 +++----
 src/components/navbar/bottom-navbar.tsx | 15 ++++++++++++---
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/app/[locale]/(app)/layout.tsx b/src/app/[locale]/(app)/layout.tsx
index 586c5438..a657f928 100644
--- a/src/app/[locale]/(app)/layout.tsx
+++ b/src/app/[locale]/(app)/layout.tsx
@@ -6,11 +6,10 @@ type ProfileLayoutProps = PropsWithChildren<LocaleRouteParams>
 
 const ProfileLayout: FC<ProfileLayoutProps> = ({ children }) => {
   return (
-    <>
+    <div className="pb-14">
       {children}
-
-      <BottomNavbar />
-    </>
+      <BottomNavbar className="h-14" />
+    </div>
   )
 }
 
diff --git a/src/components/navbar/bottom-navbar.tsx b/src/components/navbar/bottom-navbar.tsx
index 332aec1c..af11e971 100644
--- a/src/components/navbar/bottom-navbar.tsx
+++ b/src/components/navbar/bottom-navbar.tsx
@@ -12,13 +12,22 @@ import { DbEnvironmentTag } from '../db-environment-tag'
 import { BottomNavbarItem } from './bottom-navbar-item'
 import { getServerSession } from 'next-auth/next'
 import { authOptions } from '~/server/auth'
+import { cn } from '~/helpers/cn'
+import { FC } from 'react'
 
-export const BottomNavbar = async () => {
+export const BottomNavbar: FC<{
+  className?: string
+}> = async ({ className }) => {
   const session = await getServerSession(authOptions)
 
   return (
-    <nav className="fixed inset-x-0 bottom-0 border-t border-stone-200 bg-white shadow-xl">
-      <ul className="mx-auto grid h-12 max-w-2xl grid-cols-4">
+    <nav
+      className={cn(
+        'fixed inset-x-0 bottom-0 h-12 border-t border-stone-200 bg-white shadow-xl',
+        className
+      )}
+    >
+      <ul className="mx-auto grid h-full max-w-2xl grid-cols-4">
         <BottomNavbarItem
           url="/explore"
           icon={<IconCompass />}