from server 16.12

themes/modern2/assets/new/scripts/core/article.js

@@ -225,3 +225,78 @@ const burgerAffichePair = new AssignEvent(
   "active",
   ".burger-affiche-items"
 ).listen();
+
+// LATEST CHANGES =====================================================
+// LATEST CHANGES =====================================================
+// LATEST CHANGES =====================================================
+// LATEST CHANGES =====================================================
+// LATEST CHANGES =====================================================
+// LATEST CHANGES =====================================================
+// LATEST CHANGES =====================================================
+// LATEST CHANGES =====================================================
+// LATEST CHANGES =====================================================
+// LATEST CHANGES =====================================================
+
+class SelectAll extends Select {
+  super(className) {
+    this.classname = className;
+  }
+
+  select(all) {
+    if (all) {
+      return document.querySelectorAll(this.classname);
+    } else {
+      return document.querySelectors(this.classname);
+    }
+  }
+}
+
+class Numerator {
+  className;
+  givenClassName;
+
+  constructor(className, givenClassName) {
+    this.className = className;
+    this.givenClassName = givenClassName;
+  }
+
+  numerate() {
+    // try {
+    const elementNodeList = new SelectAll(this.className).select(true);
+    elementNodeList.forEach((element, index) => {
+      element.classList.add(`${this.givenClassName}-${index + 1}`);
+    });
+    return elementNodeList;
+    // } catch (_err) {
+    //   throw new Error("Bad classname!");
+    // }
+  }
+}
+
+const numeratedNavSectionList = new Numerator(
+  ".nav-section-span",
+  "nav-section-span"
+).numerate();
+
+const numeratedNavDropdownList = new Numerator(
+  ".nav-section-dropdown",
+  "nav-section-dropdown"
+).numerate();
+
+const nav = new Select(".nav").select();
+
+numeratedNavSectionList.forEach((element) => {
+  element.addEventListener("click", () => {
+    if (!element.classList.contains("active")) {
+      number = element.classList.toString().split("-").pop();
+      numeratedNavSectionList.forEach((element) =>
+        element.classList.remove("active")
+      );
+      numeratedNavDropdownList.forEach((element) =>
+        element.classList.remove("active")
+      );
+      element.classList.add("active");
+      numeratedNavDropdownList[number - 1].classList.add("active");
+    }
+  });
+});

themes/modern2/assets/new/styles/_nav.scss

@@ -1,6 +1,6 @@
 .nav {
-  background: $base-black;
-  box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.25);
+  // background: $base-black;
+  // box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.25);
   position: relative;
   margin-bottom: 4rem;
 
@@ -9,7 +9,13 @@
   }
 }
 
+.nav-top {
+  background: $base-black;
+  box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.25);
+}
+
 .nav-inner {
+  position: relative;
   padding: 0.2rem 0;
   // @include flex;
   // justify-content: space-between;
@@ -20,11 +26,14 @@
 }
 
 .nav-ul {
+  z-index: 3;
   @include flex;
   align-items: center;
   justify-content: flex-start;
   gap: 3.2rem;
-  a {
+
+  span {
+    cursor: pointer;
     display: block;
     font-weight: bold;
     padding: 1rem 0;
@@ -51,6 +60,54 @@
   }
 }
 
+.nav-section-dropdown {
+  padding: 0 3rem;
+  @include flex;
+  gap: 3.3rem;
+  align-items: center;
+  position: absolute;
+  max-height: 0;
+  left: 0;
+  top: 4.3rem;
+  width: 100%;
+  background: $base-green;
+  z-index: 2;
+  @include transition-std;
+  overflow-y: hidden;
+  overflow-x: auto;
+
+  &.active {
+    max-height: 4rem;
+    @include transition-std;
+  }
+
+  a {
+    position: relative;
+    display: block;
+    padding: 1rem 0;
+    font-size: 1.4rem;
+    font-weight: bold;
+    color: $base-white;
+
+    &::after {
+      left: 0;
+      bottom: 0.5rem;
+      position: absolute;
+      content: "";
+      width: 100%;
+      height: 0;
+      border-top: 0.1rem solid $base-white;
+      display: block;
+      opacity: 0;
+    }
+    &.active {
+      &::after {
+        opacity: 1;
+      }
+    }
+  }
+}
+
 .nav-right {
   @include flex;
   align-items: center;

themes/modern2/assets/new/styles/style.css

@@ -142,8 +142,6 @@ a {
   }
 }
 .nav {
-  background: rgb(36, 36, 36);
-  box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.25);
   position: relative;
   margin-bottom: 4rem;
 }
@@ -151,7 +149,13 @@ a {
   margin-bottom: 0;
 }
 
+.nav-top {
+  background: rgb(36, 36, 36);
+  box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.25);
+}
+
 .nav-inner {
+  position: relative;
   padding: 0.2rem 0;
   display: grid;
   grid-template-columns: 68% auto;
@@ -160,13 +164,15 @@ a {
 }
 
 .nav-ul {
+  z-index: 3;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
   gap: 3.2rem;
 }
-.nav-ul a {
+.nav-ul span {
+  cursor: pointer;
   display: block;
   font-weight: bold;
   padding: 1rem 0;
@@ -174,7 +180,7 @@ a {
   color: rgb(255, 255, 255);
   font-size: 1.6rem;
 }
-.nav-ul a::after {
+.nav-ul span::after {
   left: 0;
   bottom: 0.5rem;
   position: absolute;
@@ -185,7 +191,51 @@ a {
   display: block;
   opacity: 0;
 }
-.nav-ul a.active::after {
+.nav-ul span.active::after {
+  opacity: 1;
+}
+
+.nav-section-dropdown {
+  padding: 0 3rem;
+  display: flex;
+  flex-direction: row;
+  gap: 3.3rem;
+  align-items: center;
+  position: absolute;
+  max-height: 0;
+  left: 0;
+  top: 4.3rem;
+  width: 100%;
+  background: rgb(3, 159, 55);
+  z-index: 2;
+  transition: 0.3s all ease;
+  overflow-y: hidden;
+  overflow-x: auto;
+}
+.nav-section-dropdown.active {
+  max-height: 4rem;
+  transition: 0.3s all ease;
+}
+.nav-section-dropdown a {
+  position: relative;
+  display: block;
+  padding: 1rem 0;
+  font-size: 1.4rem;
+  font-weight: bold;
+  color: rgb(255, 255, 255);
+}
+.nav-section-dropdown a::after {
+  left: 0;
+  bottom: 0.5rem;
+  position: absolute;
+  content: "";
+  width: 100%;
+  height: 0;
+  border-top: 0.1rem solid rgb(255, 255, 255);
+  display: block;
+  opacity: 0;
+}
+.nav-section-dropdown a.active::after {
   opacity: 1;
 }
 

themes/modern2/layouts/new/master.htm

@@ -103,13 +103,13 @@ random = 0
     </div>
   </header>
   
-  <nav class="nav">
+ 
    
        {% partial 'new/menu' %}
         
        {% partial 'new/morque' %}
     
-  </nav>
+
   <!-- HEAD end ======== -->
   
   {% page %}

themes/modern2/partials/newHome/main.htm

@@ -29,7 +29,7 @@ random = 0
 
 
 <!-- MAIN ======== -->
-  <main class="main">
+  <main class="main" style="margin-top: 40px;">
     <div class="main-inner">
       <section class="main-inner-content">
       

themes/modern2/partials/newMenu/menu.htm

@@ -29,7 +29,7 @@ code = "new-top-menui"
               
                  
                  <li>
-                    <span class="nav-section-span {% if (item.isActive) %} active {% endif %} ">  <a href="{{ item.url }}">{{ item.title }}</a></span>
+                    <span class="nav-section-span {% if (item.isActive) %} active {% endif %} ">  <a href="{{ item.url }}" style="color: white;">{{ item.title }}</a></span>
                   </li>
                  
                 {% endif %}