Responsive navbar changes

package.json

@@ -13,7 +13,7 @@
     "@emailjs/browser": "^4.3.3",
     "@headlessui/react": "^1.7.18",
     "@heroicons/react": "^2.1.3",
-    "caniuse-lite": "^1.0.30001669",
+    "caniuse-lite": "^1.0.30001696",
     "i18next": "^23.11.5",
     "i18next-browser-languagedetector": "^8.0.0",
     "i18next-http-backend": "^2.5.2",

src/App.tsx

@@ -14,4 +14,3 @@ export default function App() {
     </div>
   );
 }
- 

src/Components/Navbar/Navbar.tsx

@@ -73,10 +73,11 @@ export default () => {
           : "z-10"
       }`}
     >
-      <div className="items-center px-4 max-w-screen-xl mx-auto lg:flex lg:px-8">
-        <div className="flex items-center justify-between py-3 lg:py-5 lg:block">
+      <div className="items-center px-4 max-w-screen-xl mx-auto lg:flex lg:justify-between lg:px-8">
+        <div className="flex items-center justify-between py-3 lg:py-5">
           <a
             href="Top"
+            
             onClick={(e) => {
               e.preventDefault(); // Prevent the default anchor tag behavior
               if (window.location.pathname === "/") {
@@ -88,37 +89,75 @@ export default () => {
           >
             <img src={Logo} width={60} height={60} alt="logo"  />
           </a>
+          {/* Only show hamburger button when menu is closed */}
+          {!state && (
             <div className="lg:hidden">
               <button
                 className="outline-none p-2 rounded-md focus:border-gray-400 focus:border"
-              onClick={() => setState(!state)}
+                onClick={() => setState(true)}
               >
-              {state ? (
-                <FaTimes className="h-6 w-6" />
-              ) : (
                 <FaBars className="h-6 w-6" />
-              )}
               </button>
             </div>
+          )}
         </div>
+
+        {/* Center nav items for desktop */}
+        <div className="hidden lg:flex lg:items-center lg:justify-center lg:flex-grow">
+          <ul className="text-text-gold flex space-x-6 items-center">
+            {navigation.map((item, idx) => {
+              return (
+                <li key={idx} className="hover:text-white text-center">
+                  <a
+                    href={item.path}
+                    className="block py-0 px-4 text-xl font-medium"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      handleNavigation(item.path);
+                    }}
+                  >
+                    {item.title}
+                  </a>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+
+        {/* Language toggle for desktop */}
+        <div className="hidden lg:flex lg:items-center">
+          <button
+            className="text-text-gold hover:text-white"
+            onClick={() => changeLanguage(i18n.language === "en" ? "pt" : "en")}
+          >
+            {i18n.language === "en" ? "PT" : "EN"}
+          </button>
+        </div>
+
+        {/* Mobile slide-in menu */}
         <div
-          className={`absolute top-[3.24rem] lg:top-0 left-0 w-full z-50 flex flex-col lg:flex-row items-center justify-center pb-3 mt-8 lg:relative lg:bg-transparent lg:pb-0 lg:mt-0 ${
-            state
-              ? "block bg-custom-bglight transition duration-500"
-              : "hidden lg:flex"
+          className={`fixed top-0 right-0 h-screen w-[70%] z-50 flex flex-col items-center justify-center pt-16 bg-custom-bglight shadow-lg transition-transform duration-300 ease-in-out lg:hidden ${
+            state ? "transform-none" : "translate-x-full"
           }`}
         >
-          <ul className="text-text-gold space-y-8 lg:ml-auto lg:flex lg:space-x-6 lg:space-y-0 text-center justify-center items-center">
+          <button
+            className="absolute top-4 left-4 text-text-gold hover:text-white"
+            onClick={() => setState(false)}
+          >
+            <FaTimes className="h-6 w-6" />
+          </button>
+
+          <ul className="text-text-gold space-y-8 text-center justify-center items-center">
             {navigation.map((item, idx) => {
               return (
                 <li key={idx} className="hover:text-white w-full text-center">
                   <a
                     href={item.path}
-                    className="block py-2 lg:py-0 lg:px-4 text-xl font-medium"
+                    className="block py-2 text-xl font-medium"
                     onClick={(e) => {
-                      e.preventDefault(); // Prevent the default anchor tag behavior
-                      setState(false); // Close the navigation
-                      handleNavigation(item.path); // Navigate to the section
+                      e.preventDefault();
+                      setState(false);
+                      handleNavigation(item.path);
                     }}
                   >
                     {item.title}
@@ -128,12 +167,20 @@ export default () => {
             })}
           </ul>
           <button
-            className="mt-10 lg:mt-0 lg:ml-auto text-text-gold hover:text-white"
+            className="absolute bottom-10 right-10 text-text-gold hover:text-white"
             onClick={() => changeLanguage(i18n.language === "en" ? "pt" : "en")}
           >
             {i18n.language === "en" ? "PT" : "EN"}
           </button>
         </div>
+
+        {/* Dark overlay behind menu */}
+        {state && (
+          <div
+            className="fixed top-0 left-0 w-full h-screen bg-black bg-opacity-60 z-40 lg:hidden"
+            onClick={() => setState(false)}
+          />
+        )}
       </div>
     </nav>
   );

src/index.css

@@ -5,9 +5,10 @@
 @tailwind utilities;
 
 body {
-  @apply bg-gradient-to-br from-custom-bglight to-custom-bgdark;
+  @apply bg-gradient-to-br from-custom-bglight to-custom-bgdark antialiased min-h-screen text-white;
 }
 
+
 .hero-text {
   @apply font-medium text-5xl lg:text-7xl xl:text-8xl;
 }

tailwind.config.js

@@ -3,6 +3,9 @@ export default {
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
     extend: {
+      fontFamily: {
+        baijam: ['Bai Jamjuree', 'sans-serif'],
+      },
       screens: {
         1920: "1921px",
       },