From 8fcf4e87580205596c53eca667af04ef3d6ffbc3 Mon Sep 17 00:00:00 2001
From: Taqi Tahmid <mdtaqitahmid@gmail.com>
Date: Wed, 30 Apr 2025 19:05:53 +0300
Subject: [PATCH] frontend: fix menubar overlapping with social tab

---
 frontend/src/components/Navbar.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
index 7d68e55..f5a9b0c 100644
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -102,7 +102,8 @@ const Navbar: React.FC<NavProps> = ({ toggleDarkMode, darkMode }) => {
 
               {/* Dropdown Menu */}
               {isMenuOpen && (
-                <div className="absolute right-0 mt-3 w-36 rounded-md shadow-lg bg-amber-50 dark:bg-gray-800 ring-1 ring-black ring-opacity-5">
+                // Dropdown Menu. The z value is set to 10 so that it appears above other elements.
+                <div className="absolute right-0 mt-3 w-36 rounded-md shadow-lg bg-amber-50 dark:bg-gray-800 ring-1 ring-black ring-opacity-5 z-10">
                   <div className="py-1" role="menu" aria-orientation="vertical">
                     {menuItem.map((item) => (
                       <a