restructure

Signed-off-by: GitHub <[email protected]>
layer5io · Oct 15, 2024 · 5974025 · 5974025
1 parent 6ecbef3
commit 5974025
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 84 deletions.
diff --git a/assets/scss/_navbar_project.scss b/assets/scss/_navbar_project.scss
@@ -12,37 +12,42 @@
 
  @media (min-width: 768px) {
   &:hover {
-    .dropdown-menu {
-      display: block;
-    }
       .dropdown-menu {
         transform: translate(-15%, 0rem);
       }
   }
 }
   .dropdown-menu {
-    padding: 0;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 200px;
+    justify-content: space-around;
+    padding: 0.5rem .2rem;
+    // padding: 0;
     transform: translate(-15%, 2.5rem);
-    border-radius: 0;
+    border-radius: 0.75rem;
     .dropdown-item {
       height: 5rem;
-      width: 15rem;
+      width: max-content;
       display: flex;
+      flex-direction: column;
       align-items: center;
+      border-radius: 0.75rem;
       .logo-container {
         height: 2rem;
         width: 2rem;
-        margin: 1rem 0;
+        margin: 0.5rem 0;
         display: flex;
         align-items: center;
         justify-content: center;
         img {
           width: 100%;
         }
       }
-      span {
-        margin-left: 1rem;
-      }
+      // span {
+      //   margin-left: 1rem;
+      // }
       &:hover {
         color: $black;
         img {
@@ -72,8 +77,8 @@
     border: 2px solid rgb(0, 179, 159);
   }
 }
-.avatar-container img {
+.avatar-container a img {
   width: 100%;
   height: 100%;
   object-fit: cover;
-}
+}
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
@@ -21,17 +21,15 @@
                         </a>
                     </li> -->
           <li class="nav-item dropdown" data-bs-theme="dark">
-            <span
-            class="nav-link dropdown-toggle"
+            <div
+            class="nav-link"
             id="productsDropdown"
             role="button"
             data-toggle="dropdown"
-            aria-haspopup="true"
-            aria-expanded="false"
             >
-            Products
-          </span>
-          <div class="dropdown-menu" aria-labelledby="productsDropdown" style="margin-left:2.5rem;">
+            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M240-160q-33 0-56.5-23.5T160-240q0-33 23.5-56.5T240-320q33 0 56.5 23.5T320-240q0 33-23.5 56.5T240-160Zm240 0q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5 23.5T560-240q0 33-23.5 56.5T480-160Zm240 0q-33 0-56.5-23.5T640-240q0-33 23.5-56.5T720-320q33 0 56.5 23.5T800-240q0 33-23.5 56.5T720-160ZM240-400q-33 0-56.5-23.5T160-480q0-33 23.5-56.5T240-560q33 0 56.5 23.5T320-480q0 33-23.5 56.5T240-400Zm240 0q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm240 0q-33 0-56.5-23.5T640-480q0-33 23.5-56.5T720-560q33 0 56.5 23.5T800-480q0 33-23.5 56.5T720-400ZM240-640q-33 0-56.5-23.5T160-720q0-33 23.5-56.5T240-800q33 0 56.5 23.5T320-720q0 33-23.5 56.5T240-640Zm240 0q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Zm240 0q-33 0-56.5-23.5T640-720q0-33 23.5-56.5T720-800q33 0 56.5 23.5T800-720q0 33-23.5 56.5T720-640Z"></path></svg>
+          </div>
+          <div class="dropdown-menu" aria-labelledby="productsDropdown" style="margin-left:2.5rem;visibility:hidden;">
             <a
             class="dropdown-item"
             href="https://docs.meshery.io/"
@@ -88,7 +86,7 @@
                   />
                 </div>
 
-                <span>Cloud Native Performance</span></a
+                <span>CNP</span></a
               >
               <div class="dropdown-divider"></div>
               <a
@@ -130,60 +128,17 @@
             <a class="nav-link" href="https://meshery.layer5.io/login" target="_blank">Sign In</a>
           </li>
           <li class="nav-item dropdown" data-bs-theme="dark" id="userlist" style="display: none;">
-            <div
-              class="nav-link avatar-container"
-              id="avatarDropdown"
-              role="button"
-              data-toggle="dropdown"
-              aria-haspopup="true"
-              aria-expanded="false"
-            >
-            </div>
-            <div class="dropdown-menu" aria-labelledby="avatarDropdown" style="width:15rem;margin-left:-120px">
-              <a
-                class="dropdown-item"
-                href=""
-                target="_blank"
-                id="cloud-link"
-              >
-                <div class="logo-container">
-                  <img
-                    src="/images/logos/5-light-no-trim.svg"
-                    alt="Layer5 Logo"
-                  />
-                </div>
-                <span>Cloud</span></a
-              >
-              <div class="dropdown-divider"></div>
-              <a
-                class="dropdown-item"
-                href="https://layer5.io/cloud-native-management/kanvas"
-                target="_blank"
-              >
-                <div class="logo-container">
-                  <img
-                    src="/images/logos/kanvas-alt.svg"
-                    alt="Kanvas Logo"
-                  />
-                </div>
-                <span>Kanvas</span></a
-              >
-              <div class="dropdown-divider"></div>
+             <a href="" id="user-profile-url">
               <div
-                class="dropdown-item"
-                target="_blank"
-                onclick="logOut()"
+                class="nav-link avatar-container"
+               id="avatarDropdown"
+               role="button"
+               data-toggle="dropdown"
+               aria-haspopup="true"
+               aria-expanded="false"
               >
-                <div class="logo-container">
-                  <img
-                    src="/images/logout.svg"
-                    alt="logout logo"
-                  />
-                </div>
-                <span>Logout</span></div
-              >
-              <div class="dropdown-divider"></div>
-            </div>
+              </div>
+            </a>
           </li>
         </ul>
       </div>
@@ -201,12 +156,14 @@
     closeOtherDropdowns(dropdownId);
     dropdown.classList.toggle("current");
     dropdownMenu.classList.toggle("show");
+    dropdownMenu.style.visibility = "visible"; 
   });
 
     document.body.addEventListener('click', function() {
       if (dropdown.classList.contains("current")) {
         dropdown.classList.remove("current");
         dropdownMenu.classList.remove("show");
+        dropdownMenu.style.visibility = "hidden"; 
     }
   });
 }
@@ -226,7 +183,6 @@
 }
 
   setupDropdown("productsDropdown");
-  setupDropdown("avatarDropdown");
     // console.log(window.location.pathname == "/cloud/");
     // check if the current page ic cloud
     let cur;
@@ -254,20 +210,16 @@
     }
     return null;
   }
-  function logOut() {
-    // Open logout API link in a new tab to expire the token
-    window.open("https://meshery.layer5.io/logout", "_blank");
-    // remove cookie
-    removeCookie("provider_token");
-    showSignInButton();
 
-    isUserAuthenticated = false;
-  }
   const checkUserAuth = async () => {
     try {
      const token = getCookieValue("provider_token");
-      if (!token) {
-      throw new Error("authentication failed");
+      if (!token) { // cookie doesn't exist, user logged out of cloud
+        if (isUserAuthenticated) {
+          showSignInButton();
+          isUserAuthenticated = false;
+        }
+      throw new Error("no cookie to authenticate");
     }
       const re = await fetch("https://meshery.layer5.io/api/identity/users/profile", {
         method: 'GET',
@@ -297,7 +249,7 @@
 avatarContainer.style.backgroundSize = 'cover';
 
 const userId = response.id;
-const cloudLink = document.getElementById('cloud-link');
+const cloudLink = document.getElementById('user-profile-url');
 cloudLink.href = `https://meshery.layer5.io/user/${userId}`;
 
 isUserAuthenticated = true;