new next version, new style to barnavigation and no hardcode

app/Components/layout/BarNavigation/BarNavigation.css

@@ -13,6 +13,7 @@
   justify-content: space-around;
   width: 100%;
   gap: 10px;
+  transition: width 0.5 ease-in-out;
 }
 
 .barNavigation li {
@@ -95,6 +96,7 @@
 }
 
 .subMenu span {
+  font-weight: bold;
   display: flex;
   width: 100%;
   height: 100%;
@@ -113,6 +115,7 @@
 .containerLinks {
   padding: 0 !important;
   border-radius: 0 0 4px 4px;
+  top: 20px;
 }
 
 .links {
@@ -143,13 +146,6 @@ tbody {
     margin: 0;
   }
 
-  .barNavigation ul.active {
-    position: absolute;
-    left: 0;
-    display: flex;
-    width: 100%;
-  }
-
   .barNavigation {
     font-size: 15px;
     display: block;
@@ -157,13 +153,36 @@ tbody {
 
   .barNavigation ul {
     position: absolute;
+    top: 76px;
+    left: 0;
+    width: 100%;
     background-color: #fff;
     flex-direction: column;
-    padding: 10px 0;
     align-items: center;
-    display: none;
-    z-index: 1;
-    height: auto;
+    z-index: 10;
+
+    transform: translateY(-15px);
+    opacity: 0;
+
+    pointer-events: none;
+
+    transition: transform 0.35s ease-in-out, opacity 0.35s ease-in-out,
+      visibility 0.35s ease-in-out;
+  }
+
+  .barNavigation ul.active {
+    position: absolute;
+    left: 0;
+    display: flex;
+    width: 100%;
+    transform: translateY(0);
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+  }
+
+  .containerLinks {
+    top: 20px;
   }
 
   .barNavigation {
@@ -177,14 +196,32 @@ tbody {
   }
 
   .subMenu ul {
-    width: 100%;
-    border-radius: 4px;
     position: relative;
+    top: 0px;
+    width: 100%;
     background-color: rgb(1, 92, 184);
+
+    max-height: 0;
+    opacity: 0;
+    overflow: hidden;
+
+    transform: translateY(-5px);
+
+    transition: max-height 0.35s ease, opacity 0.3s ease, transform 0.3s ease;
+  }
+
+  .subMenu.open ul {
+    max-height: 500px;
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  .subMenu ul {
+    opacity: 0;
   }
 
   thead,
   tbody {
     font-size: 1rem;
   }
-}
+}