Fixed top navbar to align with the website new design (icon and dropd…

…own arrows) (#174)

docusaurus.config.js

@@ -99,6 +99,8 @@ const getNavDropdownItem = ({label, icon, description}) => `
 </div>
 </div>
 `
+
+const dropdownChevron = `<div class='tw-flex'><img src='/img/menu/chevron-down.svg' class='group-hover:tw-hidden'/><img src='/img/menu/chevron-up.svg' class='tw-hidden group-hover:tw-block'/></div>`
 /** Components - End */
 
 
@@ -126,6 +128,7 @@ const config = {
   },
   scripts: [
     { src: "/newsLetterSubscription.js", async: true },
+    { src: "/ui.js", async: true },
     { src: "/pixels.js", async: true },
   ],
   plugins: [
@@ -242,7 +245,7 @@ const config = {
           {
             type: "dropdown",
             position: "left",
-            html: "<div class='tw-inline tw-font-normal tw-text-base'>Platform</div>",
+            html: `<div id='platform-navbar-item' class='tw-flex tw-font-normal tw-text-base tw-group'>Platform${dropdownChevron}</div>`,
             items: [
               {
                 href: "https://otterize.com/open-source",
@@ -271,7 +274,7 @@ const config = {
           {
             type: "dropdown",
             position: "left",
-            html: "<div class='tw-inline tw-font-normal tw-text-base'>Learn</div>",
+            html: `<div id='learn-navbar-item' class='tw-flex tw-font-normal tw-text-base tw-group'>Learn${dropdownChevron}</div>`,
             items: [
               {
                 href: "https://otterize.com/blog",
@@ -285,7 +288,7 @@ const config = {
               },
               {
                 href: "https://otterize.com/team",
-                html: getNavDropdownItem({label: 'Our Story', icon: "resources-menu", description: "Dive into our company’s mission, our philosophy, and the team that makes it all possible."}),
+                html: getNavDropdownItem({label: 'Our Story', icon: "philosophy-menu", description: "Dive into our company’s mission, our philosophy, and the team that makes it all possible."}),
                 target: "_self",
               },
             ],

src/css/custom.css

@@ -372,3 +372,8 @@ footer .container-fluid {
   }
 
 }
+
+/* Removes the default dropdown arrow */
+.dropdown > .navbar__link:after {
+  display: none;
+}

static/ui.js

@@ -0,0 +1,16 @@
+window.addEventListener("load", () => {
+  /** Helper function to apply tw-group to the parent element so it will hold the chevron effect when hovering the menu subitems  */
+  function setDropdownGroupModifier(childElementId) {
+    const childElement = document.getElementById(childElementId);
+    if (childElement) {
+      const dropdownContainer = childElement.parentElement.parentElement;
+      if (dropdownContainer && dropdownContainer.classList.contains('dropdown--hoverable')) {
+          dropdownContainer.classList.add("tw-group");
+      }
+    }
+  }
+
+  setDropdownGroupModifier("learn-navbar-item");;
+  setDropdownGroupModifier("platform-navbar-item");;
+
+});