fixed about us menu in the small screen & fixed hamburger click target

angular-ystemandchess-old/src/app/header/header.component.scss

@@ -99,6 +99,19 @@
   color: #3a7cca;
 }
 
+.navbar-toggler {
+  transition: all 0.5s ease-in-out;
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.1);
+  }
+}
+
+.navbar-toggler-icon {
+  transition: transform 0.5s ease-in-out;
+}
+
 .btn-lg {
   background-color: white;
   border-radius: 30px;

react-ystemandchess/src/App.tsx

@@ -142,7 +142,7 @@ function App() {
    */
   return (
     <Router>
-      <div className="App flex flex-col min-h-screen">
+      <div className="App pt-24 flex flex-col min-h-screen">
         <NavBar />
         <main className="flex-1">
           <AppRoutes />

react-ystemandchess/src/components/navbar/NavBar.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef } from "react";
 import { useCookies } from "react-cookie";
-import { motion } from "framer-motion";
+import { motion, px } from "framer-motion";
 import { Link } from "react-router-dom";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCaretDown, faCaretUp } from "@fortawesome/free-solid-svg-icons";
@@ -77,19 +77,24 @@ const NavBar = () => {
   };
 
   const closeDropdown = (event: { target: any }) => {
-      // Close "About Us" dropdown if click is outside its container
-      if (aboutUsRef.current && !aboutUsRef.current.contains(event.target)) {
+      // Close "About Us" dropdown if click is outside its container and dropdown
+      const aboutUsMenu = document.getElementById('aboutus-menu');
+      const isClickInsideAboutUs = aboutUsRef.current && aboutUsRef.current.contains(event.target);
+      const isClickInsideAboutUsMenu = aboutUsMenu && aboutUsMenu.contains(event.target);
+
+      if (!isClickInsideAboutUs && !isClickInsideAboutUsMenu) {
         setAboutUsDropDown(false);
       }
-      
+
       // Close mobile menu if click is outside both the menu and hamburger button
       if (
         mobileMenuRef.current &&
         !mobileMenuRef.current.contains(event.target) &&
         hamburgerRef.current &&
         !hamburgerRef.current.contains(event.target) &&
         aboutUsRef.current &&
-        !aboutUsRef.current.contains(event.target)
+        !aboutUsRef.current.contains(event.target) &&
+        (!aboutUsMenu || !aboutUsMenu.contains(event.target))
       ) {
         setMobileMenuDropDown(false);
       }
@@ -158,7 +163,7 @@ const NavBar = () => {
       </Link>
 
       {/* About Us dropdown menu container */}
-      <div ref={aboutUsRef} className="relative">
+      <div ref={aboutUsRef} className="relative w-full md:w-auto">
         {/* About Us dropdown trigger button */}
         <div
           onClick={toggleAboutUs}
@@ -179,7 +184,7 @@ const NavBar = () => {
         {aboutUsDropDown && (
           <motion.div
             id="aboutus-menu"
-            className="absolute z-20 mt-3 w-64 rounded-md bg-light p-4 shadow-lg"
+            className="w-full md:absolute md:left-0 md:top-full z-20 md:mt-3 md:w-64 rounded-md bg-light md:p-4 shadow-lg flex flex-col gap-2 py-2 px-0 md:gap-3 md:py-0 md:px-4"
             initial="parentInitial"
             animate="parentAnimate"
             variants={navbarVariants}
@@ -376,7 +381,7 @@ const NavBar = () => {
   );
 
   return (
-    <header className="bg-light border-b-2 border-dark sticky top-0 z-50">
+    <header className="fixed top-0 left-0 right-0 w-full bg-light border-b-2 border-dark z-50">
       <div className="max-w-full mx-auto">
         <div className="flex justify-between items-center h-24 pr-8">
 
@@ -390,7 +395,7 @@ const NavBar = () => {
             <button
               ref={hamburgerRef}
               type="button"
-              className="text-dark hover:text-primary focus:outline-none"
+              className="text-dark hover:text-primary focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-white transition-colors"
               onClick={toggleMobileMenu}
               aria-label="Toggle menu"
             >
@@ -433,10 +438,19 @@ const NavBar = () => {
 
       {/* Mobile dropdown menu - conditionally rendered based on mobileMenuDropDown state */}
       {mobileMenuDropDown && (
-        <div ref={mobileMenuRef} className="border-t border-light md:hidden px-4 py-4">
+        <motion.div
+          ref={mobileMenuRef}
+          className="border-t border-light md:hidden px-4 py-4"
+          initial={{ opacity: 0, y: -10 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.25, ease: "easeInOut" }}
+          style={{
+            padding: "18px 10px"
+          }}
+        >
           {/* Mobile navigation using vertical layout */}
           <nav className="flex flex-col gap-4">{renderLinks()}</nav>
-        </div>
+        </motion.div>
       )}
     </header>
   );

react-ystemandchess/src/features/lessons/lessons-main/Lessons.module.scss

@@ -96,28 +96,33 @@
 }
 
 .prevNextLessonButton {
-  width: 160px;
+  min-width: 160px;
   height: 60px;
   border-radius: 5px;
   color: black;
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: center;
+  gap: 12px;
+  padding: 0 22px;
 }
 
 .prevNextLessonButtonInactive {
-  width: 160px;
+  min-width: 160px;
   height: 60px;
   border-radius: 5px;
   color: rgb(173, 169, 169);
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: center;
+  gap: 12px;
+  padding: 0 22px;
 }
 
 .buttonDescription {
   font-size: 20px;
   font-weight: bold;
+  margin: 0;
 }
 
 .next {

react-ystemandchess/src/features/lessons/piece-lessons/lesson-overlay/Lesson-overlay.module.scss

@@ -272,8 +272,8 @@
   padding: 0;
   position: relative;
 }
-
-.prevNextLessonButtonInactive {
+ 
+ .prevNextLessonButtonInactive {
   width: 160px;
   height: 60px;
   border-radius: 5px;
@@ -284,30 +284,29 @@
   padding: 0;
   position: relative;
 }
-
-.prevNextLessonButton svg,
-.prevNextLessonButtonInactive svg {
+ 
+ .prevNextLessonButton svg,
+ .prevNextLessonButtonInactive svg {
   width: 22px;
   height: 22px;
   position: absolute;
 }
-
-.prev svg {
+ 
+ .prev svg {
   left: 16px;
 }
-
-.next svg {
+ 
+ .next svg {
   right: 16px;
 }
-
-.buttonDescription {
+ 
+ .buttonDescription {
   font-size: 20px;
   font-weight: bold;
 }
-
-.next {
+ 
+ .next {
   background-color: var(--green-color);
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
 }
 
 .next:hover {