fixed barnavigation state

app/Components/BarNavigation/BarNavigation.css

@@ -17,6 +17,7 @@
     color: white;
     font-weight: bold;
     width: 100%;
+    transition: background-color 0.3s ease;
 }
 
 .barNavigation li:hover {
@@ -65,7 +66,7 @@
     top: 100%;
     width: 100%;
     background-color: rgba(0, 61, 121, 1);
-    transition: max-height 0.3s ease, opacity 0.3s ease;
+    transition: color 0.3s ease, opacity 0.3s ease;
 }
 
 .subMenu.open ul {

app/Components/BarNavigation/BarNavigation.tsx

@@ -9,8 +9,11 @@ function BarNavigation() {
 
     const toggleMenu = () => setOpenMenu(!openMenu);
     const toggleSubMenu = (index: number) => {
-        setOpenSubMenu(openSubMenu === index ? null : index);
+        if (typeof window !== "undefined" && window.innerWidth <= 800) {
+            setOpenSubMenu(openSubMenu === index ? null : index);
+        }
     };
+    
     return (
         <nav className="barNavigation">
             <div

app/Components/Header/Header.css

@@ -25,8 +25,8 @@
     content: "";
     top: 0;
     left: -20px;
-    width: 30%;
-    height: 50%;
+    width: 70%;
+    height: 100%;
     min-width: 300px;
     background-color: #d59f0f;
     transform: skew(-45deg);