From 904f98e2020dbf36bbbb9b9d1985cb2164078924 Mon Sep 17 00:00:00 2001
From: Mahyar Khanbolooki <mahyarkhn@proton.me>
Date: Fri, 4 Jul 2025 16:57:28 +0330
Subject: [PATCH] feat: memoized bottom navbar

---
 src/components/menu/Menu.tsx                          | 4 +++-
 src/components/navigation/BottomNavBar.tsx            | 2 +-
 src/components/topbar/TopBar.tsx                      | 2 +-
 src/components/wrapper/ClientMenuRouteWrapper.tsx.tsx | 2 +-
 4 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
index 9031616..25d0854 100644
--- a/src/components/menu/Menu.tsx
+++ b/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;
diff --git a/src/components/navigation/BottomNavBar.tsx b/src/components/navigation/BottomNavBar.tsx
index b5cec37..fbf74ef 100644
--- a/src/components/navigation/BottomNavBar.tsx
+++ b/src/components/navigation/BottomNavBar.tsx
@@ -83,4 +83,4 @@ function BottomNavBar({ }: Props) {
   )
 }
 
-export default BottomNavBar
\ No newline at end of file
+export default React.memo(BottomNavBar)
\ No newline at end of file
diff --git a/src/components/topbar/TopBar.tsx b/src/components/topbar/TopBar.tsx
index 609b189..2360167 100644
--- a/src/components/topbar/TopBar.tsx
+++ b/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 />
diff --git a/src/components/wrapper/ClientMenuRouteWrapper.tsx.tsx b/src/components/wrapper/ClientMenuRouteWrapper.tsx.tsx
index cf53622..510b658 100644
--- a/src/components/wrapper/ClientMenuRouteWrapper.tsx.tsx
+++ b/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>