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);

app/Impresiones/page.tsx

@@ -44,8 +44,14 @@ export default function Page() {
             label: "Impresiones color",
             content: <Impressions
               costs={[
-                { value: 2 },
                 { value: 4 },
+                { value: 5 },
+                { value: 6 },
+                { value: 7 },
+                { value: 8 },
+                { value: 10 },
+                { value: 12 },
+                { value: 14 },
               ]}
             />,
           },
@@ -54,8 +60,23 @@ export default function Page() {
             label: "Plotter",
             content: <Impressions
               costs={[
-                { value: 1 },
-                { value: 2 },
+                { value: 15 },
+                { value: 18 },
+                { value: 20 },
+                { value: 25 },
+                { value: 30 },
+                { value: 40 },
+                { value: 45 },
+                { value: 50 },
+                { value: 60 },
+                { value: 70 },
+                { value: 80 },
+                { value: 90 },
+                { value: 100 },
+                { value: 110 },
+                { value: 120 },
+                { value: 150 },
+                { value: 200 },
               ]}
             />,
           },
@@ -66,6 +87,7 @@ export default function Page() {
               costs={[
                 { value: 1 },
                 { value: 2 },
+                { value: 5 },
               ]} 
               />,
           },

app/globals.css

@@ -77,7 +77,7 @@ footer {
 
 footer p {
   color: white;
-  max-width: 1150px;
+  max-width: 900px;
 }
 
 .container {