navbar.html

<header>
  <nav
    class="td-navbar navbar-dark js-navbar-scroll td-navbar-cover navbar-bg-onscroll--fade"
  >
    <div class="container-fluid flex-column flex-md-row">
      <a class="navbar-brand" href="/" aria-label="Home">
        <span class="navbar-brand__logo navbar-logo">
          {{ $svg := resources.Get "icons/logo.svg" }}
          <img class="footer-logo" src="/images/logo.svg" alt="logo" data-modal="false" />
        </span>
        <span class="navbar-brand__name"></span
      ></a>
      <div
        class="td-navbar-nav-scroll main-nav-items flex-grow-1"
        id="main_navbar"
      >
        <ul class="navbar-nav d-flex align-items-center" >
          <!-- <li class="nav-item nav-external">
                        <a class="nav-link nav-link-external" href="https://playground.meshery.io" target="_blank">
                            <span>Playground</span>
                        </a>
                    </li> -->
                    <div class="d-flex">
                      <li class="nav-item">
                        <a id="cloud" class="nav-link" href="/cloud/"> Cloud</a>
                      </li>
                      <li class="nav-item">
                        <a id="kanvas" class="nav-link" href="/kanvas/"> Kanvas</a>
                      </li>
                      <li class="nav-item dropdown" data-bs-theme="dark">
                        <div
                        class="nav-link"
                        id="resourcesDropdown"
                        role="button"
                        data-toggle="dropdown"
                        >
                        Resources<span class="down-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 4a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5A.5.5 0 0 1 8 4"/></svg></span>
                        </div>
                        <div class="dropdown-menu dropdown-menu--col" aria-labelledby="resourcesDropdown" style="visibility:hidden;">
                          <a
                          class="dropdown-item dropdown-item--row"
                          href="https://cloud.layer5.io/academy"
                          target="_blank"
                          aria-label="Academy"
                          >
                            <div class="logo-container">
                              <img
                                src="/images/academy-icon.svg"
                                alt="Meshery Logo"
                              />
                            </div>
                            <span>Academy</span>
                          </a>
                          <div class="dropdown-divider"></div>
                          <a
                          class="dropdown-item dropdown-item--row"
                          href="/videos"
                          aria-label="Videos"
                          >
                            <div class="logo-container">
                              <img
                                src="/images/video-play.svg"
                                alt="Meshery Logo"
                              />
                            </div>
                            <span>Videos</span>
                          </a>
                        </div>
                      </li>
                    </div>
                    <div class="d-flex ms-auto">
        

          <!-- <li class="nav-item">
            <a class="nav-link" href="/cloud/tutorials/"> Tutorials</a>
          </li> -->
          <li class="d-none d-lg-block nav-item">
            <!-- <div class="td-search">
                            <div class="td-search__icon"></div>
                            <input type="search" class="td-search__input form-control td-search-input" placeholder="Search"
                                   aria-label="Search this site…" autocomplete="off">
                            <button id="searchKey" style="margin-left:-2rem;" class="kbc-button kbc-button-xs">/</button> 
                                </div> -->
            {{ partial "search-input-nav.html" . }}
          </li>
          <li class="nav-item dropdown" data-bs-theme="dark">
            <div
            class="nav-link"
            id="productsDropdown"
            role="button"
            data-toggle="dropdown"
            style="padding-top:6px"
            >
            <img width="28px" src="/images/grid-icon.svg" alt="Products" class="grid-icon" data-modal="false" />

          </div>
          <div class="dropdown-menu" aria-labelledby="productsDropdown" style="margin-left:-4.5rem;visibility:hidden;">
            <a
            class="dropdown-item"
            href="https://docs.meshery.io/"
            aria-label="Meshery Docs"
            target="_blank"
            >
              <div class="logo-container">
                <img
                  src="/images/logos/meshery-light-icon.svg"
                  alt="Meshery Logo"
                />
              </div>
              <span>Meshery</span></a
            >
              <div class="dropdown-divider"></div>
              <a
                class="dropdown-item"
                href="https://layer5.io/cloud-native-management/kanvas"
                aria-label="Kanvas"
                target="_blank"
              >
                <div class="logo-container">
                  <img
                    src="/images/logos/kanvas-icon-color.svg"
                    alt="Layer5 Kanvas Logo"
                    style="height:40px; width:40px;"
                  />
                </div>

                <span>Kanvas</span></a
              >
              <div class="dropdown-divider"></div>
              <a
                class="dropdown-item"
                href="https://layer5.io/cloud-native-management/catalog"
                aria-label="Catalog"
                target="_blank"
              >
                <div class="logo-container">
                  <img
                    src="/images/logos/catalog.svg"
                    alt="Layer5 Catalog Logo"
                  />
                </div>

                <span>Catalog</span></a
              >
              <div class="dropdown-divider"></div>
              <a
                class="dropdown-item"
                href="https://smp-spec.io/"
                aria-label="SMP Spec"
                target="_blank"
              >
                <div class="logo-container">
                  <img
                    src="/images/logos/smp-light.png"
                    alt="Layer5 Cloud Native Performance Logo"
                  />
                </div>

                <span>CNP</span></a
              >
              <div class="dropdown-divider"></div>
              <a
                class="dropdown-item"
                href="https://getnighthawk.dev/"
                aria-label="Nighthawk"
                target="_blank"
              >
                <div class="logo-container">
                  <img
                    src="/images/logos/nighthawk-logo.svg"
                    alt="Layer5 Nighthawk Logo"
                  />
                </div>

                <span>Nighthawk</span></a
              >

              <div class="dropdown-divider"></div>
              <a
                class="dropdown-item"
                href="https://cloud.layer5.io/academy"
                target="_blank"
                aria-label="Layer5 Academy"
              >
                <div class="logo-container">
                  <img
                    src="/images/logos/academy.svg"
                    alt="Layer5 Academy Logo"
                  />
                </div>

                <span>Academy</span></a
              >
            </div>
          </li>
          <li class="nav-item" id="signin-button" style="display: none;">
            <a class="nav-link" href="https://cloud.layer5.io/login" target="_blank">Sign In</a>
          </li>
          <li class="nav-item dropdown" data-bs-theme="dark" id="userlist" style="display: none;">
             <a href="https://cloud.layer5.io" id="user-profile-url" aria-label="User Profile">
              <div
                class="nav-link avatar-container"
               id="avatarDropdown"
               role="button"
               data-toggle="dropdown"
               aria-haspopup="true"
               aria-expanded="false"
              >
              </div>
            </a>
          </li>
          </div>
        </ul>
      </div>
    </div>
  </nav>
  <script>
  function setupDropdown(dropdownId) {
    const dropdown = document.querySelector(`#${dropdownId}`);
    const dropdownMenu = dropdown.nextElementSibling;

    
    dropdown.addEventListener("click", function (event) {
    event.stopPropagation();

    // hide any other active dropdowns
    const allActiveDropdowns = document.querySelectorAll(".nav-link.current");
    allActiveDropdowns.forEach((otherDropdown) => {
      if (otherDropdown !== dropdown) {
        otherDropdown.classList.remove("current");
        otherDropdown.nextElementSibling.classList.remove("show");
        otherDropdown.nextElementSibling.style.visibility = "hidden"; 
      }
    });

    if (dropdown.classList.contains("current")) {
        dropdown.classList.remove("current");
        dropdownMenu.classList.remove("show");
        dropdownMenu.style.visibility = "hidden"; 
    } else {
    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"; 
    }
  });
}


  setupDropdown("productsDropdown");
  setupDropdown("resourcesDropdown");
    // console.log(window.location.pathname == "/cloud/");
    // check if the current page ic cloud
    let cur;
    if (window.location.pathname.includes("/cloud/"))
      cur = document.querySelector("#cloud");
    else if (window.location.pathname.includes("/kanvas/"))
      cur = document.querySelector("#kanvas");
    if (cur) {
      cur.classList.add("current");
      cur.style.pointerEvents = "none";
      cur.style.cursor = "default";
    }
  
  let isUserAuthenticated = false;
  let expiredToken = "";

  function removeCookie(cookieName) {
    document.cookie = cookieName + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
  }

  function getCookieValue(cookieName) {
    const cookies = document.cookie.split(";");
    for (let i = 0; i < cookies.length; i++) {
      let cookie = cookies[i].trim();
      if (cookie.indexOf(cookieName + "=") === 0) {
        return cookie.substring(cookieName.length + 1);
      }
    }
    return null;
  }

  const checkUserAuth = async () => {
    try {
     const token = getCookieValue("provider_token");
      if (!token || token === expiredToken) { // cookie doesn't exist or has expired (due to user logout)
        if (isUserAuthenticated) {
          showSignInButton();
          isUserAuthenticated = false;
        }
      throw new Error("missing or expired cookie");
    }
      const re = await fetch("https://cloud.layer5.io/api/identity/users/profile", {
        method: 'GET',
        headers: {
          'Authorization': `Bearer ${token}`,
        },
      });

      if (re.status === 401) { // cookie has expired
        expiredToken = token;
        throw new Error("unauthorized");
      }
      if (re.status !== 200) {
        throw new Error(`HTTP error! status: ${re.status}`);
      }

      const response = await re.json();
      updateUI(response);

  } catch (error) {
    // console.error("could not set user details.", error);
    showSignInButton();
  }
};
function updateUI(response) {
document.getElementById('signin-button').style.display = 'none';
document.getElementById("userlist").style.display = "block";
const avatarUrl = response.avatar_url;
const avatarContainer = document.querySelector('.avatar-container');
avatarContainer.style.backgroundImage = `url("${avatarUrl}")`;
avatarContainer.style.backgroundSize = 'cover';

const userId = response.id;
const cloudLink = document.getElementById('user-profile-url');
cloudLink.href = `https://cloud.layer5.io/user/${userId}`;

isUserAuthenticated = true;
}

function showSignInButton() {
      document.getElementById("userlist").style.display = "none";
      document.getElementById("signin-button").style.display = "block";
}

function handleVisibilityChange() {
    if (document.visibilityState === 'visible' && !isUserAuthenticated ) {
      checkUserAuth();
    }
  }

  checkUserAuth();

  document.addEventListener('visibilitychange', handleVisibilityChange);
  </script>
</header>