feat: memoized bottom navbar

src/components/menu/Menu.tsx

@@ -68,7 +68,7 @@ type Props = {
     toggleMenuState: React.MouseEventHandler<HTMLDivElement> | undefined
 }
 
-export function Menu({ menuState, toggleMenuState }: Props) {
+function Menu({ menuState, toggleMenuState }: Props) {
     const menuStateMemo = useMemo(() => menuState, [menuState]);
 
     return (
@@ -99,3 +99,5 @@ export function Menu({ menuState, toggleMenuState }: Props) {
         </BlurredOverlayContainer>
     )
 }
+
+export default Menu;

src/components/navigation/BottomNavBar.tsx

@@ -83,4 +83,4 @@ function BottomNavBar({ }: Props) {
   )
 }
 
-export default BottomNavBar
+export default React.memo(BottomNavBar)

src/components/topbar/TopBar.tsx

@@ -19,7 +19,7 @@ type Props = {
 function TopBar({ profileDropState, toggleProfileDropState, menuState, toggleMenuState, searchModalState, toggleSearchModalState, nightModeState, toggleNightModeState }: Props) {
     return (
         <div className="p-4">
-            <div className='bg-white rounded-[15px] w-full h-12 lg:h-24 px-4 sm:p-6 xl:gap-8 items-center flex justify-between overflow-auto'>
+            <div className='bg-white overflow-hidden rounded-2xl w-full h-12 lg:h-24 px-4 sm:p-6 xl:gap-8 items-center flex justify-between overflow-auto'>
             <div className='inline-flex justify-between items-center'>
                 <button className='inline-block xl:hidden' onClick={toggleMenuState}>
                     <BurgerMenuIcon />

src/components/wrapper/ClientMenuRouteWrapper.tsx.tsx

@@ -2,7 +2,7 @@
 
 import React, { useState } from 'react'
 import TopBar from '../topbar/TopBar'
-import { Menu } from '../menu/Menu'
+import Menu from '../menu/Menu'
 import BottomNavBar from '../navigation/BottomNavBar'
 
 type Props = {} & React.AllHTMLAttributes<HTMLBodyElementEventMap>