www/src/layouts/partials/navbar.html

<nav class="navbar navbar-expand-lg sticky-top my-auto main-nav">
    <div class="container-fluid top-nav p-0">
      <a class="navbar-brand p-0" href="/"><img src="/Images/tea-logo-1.png" class="top-logo" alt="top-logo"></a>
      <button class="navbar-toggler me-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight"
        aria-controls="offcanvasRight" aria-expanded="false" aria-label="Toggle navigation">
        <i class="icon-hamburger-icon-square dark-gray"></i>
      </button>
      <div class="collapse navbar-collapse flex" id="navbarSupportedContent">
        <ul class="navbar-nav ms-auto my-auto">
          {{ range .Site.Menus.main }}
          <li class="nav-item mt-lg-0 mt-md-0 mt-sm-3 mt-3 top-nav-item">
            <a class="nav-link{{ if $.IsMenuCurrent "main" . }} active" aria-current="page {{ end }}" href="{{ .URL }}">{{ .Name}}</a>
          </li>
          {{ end }}
          <li class="nav-item mt-lg-0 mt-md-0 mt-sm-3 mt-3 top-nav-item">
            <a class="nav-link" aria-current="page" href="https://github.com/teaxyz/cli/stargazers" style="min-width:75px;"><i class="icon-github" style="position:relative;top:2px;float:left;"></i>&nbsp;<span class="stargazers"></span></a>
          </li>
          <li class="nav-item mt-lg-0 mt-md-0 mt-sm-3 mt-3 top-nav-item">
            <a class="nav-link" aria-current="page" href="https://discord.gg/tea-906608167901876256"><i class="icon-discord" style="position:relative;top:2px;"></i></a>
          </li>
          <style>

            .hbtn {
              background-color: #8000ff;
              position: relative;
              box-sizing: border-box;
              height: 60px;
              display: inline-block;
              overflow: hidden;
              padding: 8px 20px;
              width: 300px;
              text-align: center;
              border: 1px solid #8000ff;
              text-decoration: none;
              color: rgb(225, 225, 225);
              white-space: nowrap;
              z-index: 0;
            }


            .hbtn i {
                  padding-right: 8px;
            }


            .hb-fill-right::before {
                  position: absolute;
                  content: "";
                  background: rgb(91, 0, 184);
                  transition-duration: 0.2s;
                  z-index: -1;
                  inset: 0px auto auto 0px;
                  width: 0px;
                  height: 100%;
                  opacity: 1;
            }


            .hb-fill-right:hover::before {
                  width: 100%;
                  height: 100%;
                  opacity: 1;
            }


            .hb-fill-right:hover {
                  color: rgb(255, 255, 255);
                  background: rgb(91, 0, 184);
                  transition: color 0.3s ease 0s, background 0s ease 0.3s;
            }

            .hbtn-light {
              font-family: "pp-neue-machina";
              background: none !important;
              position: relative;
              box-sizing: border-box;
              height: 60px;
              display: inline-block;
              overflow: hidden;
              padding: 8px 20px;
              width: 300px;
              text-align: center;
              border: 1px solid #e1e1e1;
              text-decoration: none;
              color: #e1e1e1;
              white-space: nowrap;
              z-index: 0;
            }


            .hbtn-light i {
                  padding-right: 8px;
            }


            .hb-light-fill-right::before {
                  position: absolute;
                  content: "";
                  background: #e1e1e1;
                  transition-duration: 0.2s;
                  z-index: -1;
                  inset: 0px auto auto 0px;
                  width: 0px;
                  height: 100%;
                  opacity: 1;
            }


            .hb-light-fill-right:hover::before {
                  width: 100%;
                  height: 100%;
                  opacity: 1;
            }


            .hb-light-fill-right:hover {
                  color: #1a1a1a;
                  background: rgb(91, 0, 184);
                  transition: color 0.3s ease 0s, background 0s ease 0.3s;
            }

            #top-menu-btn{
              height:50px;
            }

            .top-nav-item{
              color: #e1e1e1 !important;
            }

            .top-nav-item:hover{
              color: #1a1a1a !important;
            }

          </style>

        </ul>
        <a href="https://docs.tea.xyz/getting-started" class="ms-3">
          <button class="hbtn hb-fill-right" id="top-menu-btn">INSTALL TEA</button>
        </a>


        <!--
          <a class="btn btn-primary auth-btn mt-lg-0 mt-md-0 mt-sm-4 mt-4" id="nav-cta" href="https://github.com/login/oauth/authorize?client_id=9d1f1a72f1300b6991df&state=teaxyz" role="button"><span id="cta-text">Authenticate with tea</span><span class="badge rounded-pill bg-primary ms-3"><span id="count1">287</span></span><span id="lp-text"></span></a>-->
      </div>
    </div>
  </nav>