<app-page-header
  title="Navbar"
  title1="Navbar"
  activeitem="Elements"
></app-page-header>

<!-- Start::row-1 -->
<div class="grid grid-cols-12 gap-x-5">
  <div class="col-span-12">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Basic Navbar</h5>
      </div>
      <div class="box-body">
        <header
          class="flex flex-wrap sm:justify-start sm:flex-nowrap z-40 w-full bg-white text-sm dark:bg-bgdark"
        >
          <nav
            class="w-full mx-auto sm:px-2 sm:flex sm:items-center sm:justify-between"
            aria-label="Global"
          >
            <a routerLink="/dashboard/sales" class="header-logo">
              <img
                src="./assets/img/brand-logos/desktop-logo.png"
                alt="logo"
                class="dark:hidden block"
              />
              <img
                src="./assets/img/brand-logos/desktop-dark.png"
                alt="logo"
                class="hidden dark:block"
              />
            </a>
            <div
              class="flex flex-row items-center gap-5 mt-5 sm:justify-end sm:mt-0 ltr:sm:pl-5 rtl:sm:pr-5"
            >
              <a
                class="font-medium text-primary"
                href="javascript:void(0);"
                aria-current="page"
                >Landing</a
              >
              <a
                class="font-medium text-gray-600 hover:text-gray-400 dark:text-white/70 dark:hover:text-gray-500"
                href="javascript:void(0);"
                >Account</a
              >
              <a
                class="font-medium text-gray-600 hover:text-gray-400 dark:text-white/70 dark:hover:text-gray-500"
                href="javascript:void(0);"
                >Work</a
              >
              <a
                class="font-medium text-gray-600 hover:text-gray-400 dark:text-white/70 dark:hover:text-gray-500"
                href="javascript:void(0);"
                >Blog</a
              >
            </div>
          </nav>
        </header>
      </div>
    </div>
  </div>
  <div class="col-span-12">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Navbar With horizontal scroll</h5>
      </div>
      <div class="box-body">
        <header
          class="flex flex-wrap sm:justify-start sm:flex-nowrap z-40 w-full bg-white text-sm dark:bg-bgdark"
        >
          <nav
            class="w-full mx-auto px-4 xxl:flex xxl:items-center xxl:justify-between"
            aria-label="Global"
          >
            <a routerLink="/dashboard/sales" class="header-logo">
              <img
                src="./assets/img/brand-logos/desktop-logo.png"
                alt="logo"
                class="dark:hidden block"
              />
              <img
                src="./assets/img/brand-logos/desktop-dark.png"
                alt="logo"
                class="hidden dark:block"
              />
            </a>
            <div
              class="flex flex-row items-center gap-5 mt-5 pb-2 overflow-x-auto xxl:justify-end xxl:mt-0 ltr:xxl:pl-5 rtl:xxl:pr-5 xxl:pb-0 xxl:overflow-x-visible"
            >
              <a
                class="font-medium text-primary"
                href="javascript:void(0);"
                aria-current="page"
                >Dashboard</a
              >
              <a
                class="font-medium text-gray-600 hover:text-gray-400 dark:text-white/70 dark:hover:text-gray-500 whitespace-nowrap"
                href="javascript:void(0);"
                >Widgets</a
              >
              <a
                class="font-medium text-gray-600 hover:text-gray-400 dark:text-white/70 dark:hover:text-gray-500 whitespace-nowrap"
                href="javascript:void(0);"
                >Components</a
              >
              <a
                class="font-medium text-gray-600 hover:text-gray-400 dark:text-white/70 dark:hover:text-gray-500 whitespace-nowrap"
                href="javascript:void(0);"
                >Advanced Ui</a
              >
              <a
                class="font-medium text-gray-600 hover:text-gray-400 dark:text-white/70 dark:hover:text-gray-500 whitespace-nowrap"
                href="javascript:void(0);"
                >Basic Ui</a
              >
              <a
                class="font-medium text-gray-600 hover:text-gray-400 dark:text-white/70 dark:hover:text-gray-500 whitespace-nowrap"
                href="javascript:void(0);"
                >Elements</a
              >
              <a
                class="font-medium text-gray-600 hover:text-gray-400 dark:text-white/70 dark:hover:text-gray-500 whitespace-nowrap"
                href="javascript:void(0);"
                >Forms</a
              >
              <a
                class="font-medium text-gray-600 hover:text-gray-400 dark:text-white/70 dark:hover:text-gray-500 whitespace-nowrap"
                href="javascript:void(0);"
                >Pages</a
              >
              <a
                class="font-medium text-gray-600 hover:text-gray-400 dark:text-white/70 dark:hover:text-gray-500 whitespace-nowrap"
                href="javascript:void(0);"
                >Authentication</a
              >
              <a
                class="font-medium text-gray-600 hover:text-gray-400 dark:text-white/70 dark:hover:text-gray-500 whitespace-nowrap"
                href="javascript:void(0);"
                >Maps</a
              >
            </div>
          </nav>
        </header>
      </div>
    </div>
  </div>
  <div class="col-span-12">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Navbar With collapse</h5>
      </div>
      <div class="box-body">
        <header
          class="flex flex-wrap sm:justify-start sm:flex-nowrap z-40 w-full bg-white text-sm dark:bg-bgdark"
        >
          <nav
            class="w-full mx-auto px-2 sm:flex sm:items-center sm:justify-between"
            aria-label="Global"
          >
            <div class="flex items-center justify-between">
              <a routerLink="/dashboard/sales" class="header-logo">
                <img
                  src="./assets/img/brand-logos/desktop-logo.png"
                  alt="logo"
                  class="dark:hidden block"
                />
                <img
                  src="./assets/img/brand-logos/desktop-dark.png"
                  alt="logo"
                  class="hidden dark:block"
                />
              </a>
              <div class="sm:hidden">
                <button
                  type="button"
                  class="hs-collapse-toggle p-2 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-sm dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
                  data-hs-collapse="#navbar-with-collapse"
                  aria-controls="navbar-with-collapse"
                  aria-label="Toggle navigation"
                >
                  <svg
                    class="hs-collapse-open:hidden w-4 h-4"
                    width="16"
                    height="16"
                    fill="currentColor"
                    viewBox="0 0 16 16"
                  >
                    <path
                      fill-rule="evenodd"
                      d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"
                    />
                  </svg>
                  <svg
                    class="hs-collapse-open:block hidden w-4 h-4"
                    width="16"
                    height="16"
                    fill="currentColor"
                    viewBox="0 0 16 16"
                  >
                    <path
                      d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"
                    />
                  </svg>
                </button>
              </div>
            </div>
            <div
              id="navbar-with-collapse"
              class="hidden basis-full grow sm:block"
            >
              <div
                class="flex flex-col gap-5 mt-5 sm:flex-row sm:items-center sm:justify-end sm:mt-0 ltr:sm:pl-5 rtl:sm:pr-5"
              >
                <a
                  class="font-medium text-primary"
                  href="javascript:void(0);"
                  aria-current="page"
                  >Landing</a
                >
                <a
                  class="font-medium text-gray-600 hover:text-gray-400 dark:text-white/70 dark:hover:text-gray-500"
                  href="javascript:void(0);"
                  >Account</a
                >
                <a
                  class="font-medium text-gray-600 hover:text-gray-400 dark:text-white/70 dark:hover:text-gray-500"
                  href="javascript:void(0);"
                  >Work</a
                >
                <a
                  class="font-medium text-gray-600 hover:text-gray-400 dark:text-white/70 dark:hover:text-gray-500"
                  href="javascript:void(0);"
                  >Blog</a
                >
              </div>
            </div>
          </nav>
        </header>
      </div>
    </div>
  </div>
  <div class="col-span-12">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Navbar Collapse with animation</h5>
      </div>
      <div class="box-body">
        <header
          class="flex flex-wrap sm:justify-start sm:flex-nowrap z-40 w-full bg-white text-sm dark:bg-bgdark"
        >
          <nav
            class="w-full mx-auto px-2 sm:flex sm:items-center sm:justify-between"
            aria-label="Global"
          >
            <div class="flex items-center justify-between">
              <a routerLink="/dashboard/sales" class="header-logo">
                <img
                  src="./assets/img/brand-logos/desktop-logo.png"
                  alt="logo"
                  class="dark:hidden block"
                />
                <img
                  src="./assets/img/brand-logos/desktop-dark.png"
                  alt="logo"
                  class="hidden dark:block"
                />
              </a>
              <div class="sm:hidden">
                <button
                  type="button"
                  class="hs-collapse-toggle p-2 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-sm dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
                  data-hs-collapse="#navbar-collapse-with-animation"
                  aria-controls="navbar-collapse-with-animation"
                  aria-label="Toggle navigation"
                >
                  <svg
                    class="hs-collapse-open:hidden w-4 h-4"
                    width="16"
                    height="16"
                    fill="currentColor"
                    viewBox="0 0 16 16"
                  >
                    <path
                      fill-rule="evenodd"
                      d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"
                    />
                  </svg>
                  <svg
                    class="hs-collapse-open:block hidden w-4 h-4"
                    width="16"
                    height="16"
                    fill="currentColor"
                    viewBox="0 0 16 16"
                  >
                    <path
                      d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"
                    />
                  </svg>
                </button>
              </div>
            </div>
            <div
              id="navbar-collapse-with-animation"
              class="hs-collapse hidden overflow-hidden transition-all duration-300 basis-full grow sm:block"
            >
              <div
                class="flex flex-col gap-5 mt-5 sm:flex-row sm:items-center sm:justify-end sm:mt-0 ltr:sm:pl-5 rtl:sm:pr-5"
              >
                <a
                  class="font-medium text-primary"
                  href="javascript:void(0);"
                  aria-current="page"
                  >Landing</a
                >
                <a
                  class="font-medium text-gray-600 hover:text-gray-400 dark:text-white/70 dark:hover:text-gray-500"
                  href="javascript:void(0);"
                  >Account</a
                >
                <a
                  class="font-medium text-gray-600 hover:text-gray-400 dark:text-white/70 dark:hover:text-gray-500"
                  href="javascript:void(0);"
                  >Work</a
                >
                <a
                  class="font-medium text-gray-600 hover:text-gray-400 dark:text-white/70 dark:hover:text-gray-500"
                  href="javascript:void(0);"
                  >Blog</a
                >
              </div>
            </div>
          </nav>
        </header>
      </div>
    </div>
  </div>
  <div class="col-span-12">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Navbar with Image</h5>
      </div>
      <div class="box-body">
        <header
          class="flex flex-wrap sm:justify-start sm:flex-nowrap z-40 w-full bg-white text-sm dark:bg-bgdark"
        >
          <nav
            class="w-full mx-auto px-2 sm:flex sm:items-center sm:justify-between"
            aria-label="Global"
          >
            <div class="flex items-center justify-between">
              <a routerLink="/dashboard/sales" class="header-logo">
                <img
                  src="./assets/img/brand-logos/desktop-logo.png"
                  alt="logo"
                  class="dark:hidden block"
                />
                <img
                  src="./assets/img/brand-logos/desktop-dark.png"
                  alt="logo"
                  class="hidden dark:block"
                />
              </a>
              <div class="sm:hidden">
                <button
                  type="button"
                  class="hs-collapse-toggle p-2 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-sm dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
                  data-hs-collapse="#navbar-image-2"
                  aria-controls="navbar-image-2"
                  aria-label="Toggle navigation"
                >
                  <svg
                    class="hs-collapse-open:hidden w-4 h-4"
                    width="16"
                    height="16"
                    fill="currentColor"
                    viewBox="0 0 16 16"
                  >
                    <path
                      fill-rule="evenodd"
                      d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"
                    />
                  </svg>
                  <svg
                    class="hs-collapse-open:block hidden w-4 h-4"
                    width="16"
                    height="16"
                    fill="currentColor"
                    viewBox="0 0 16 16"
                  >
                    <path
                      d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"
                    />
                  </svg>
                </button>
              </div>
            </div>
            <div
              id="navbar-image-2"
              class="hs-collapse hidden overflow-hidden transition-all duration-300 basis-full grow sm:block"
            >
              <div
                class="flex flex-col gap-5 mt-5 sm:flex-row sm:items-center sm:justify-end sm:mt-0 ltr:sm:pl-5 rtl:sm:pr-5"
              >
                <a
                  class="font-medium text-primary"
                  href="javascript:void(0);"
                  aria-current="page"
                  >Landing</a
                >
                <a
                  class="font-medium text-gray-600 hover:text-gray-400 dark:text-white/70 dark:hover:text-gray-500"
                  href="javascript:void(0);"
                  >Account</a
                >
                <a
                  class="font-medium text-gray-600 hover:text-gray-400 dark:text-white/70 dark:hover:text-gray-500"
                  href="javascript:void(0);"
                  >Work</a
                >
                <a
                  class="font-medium text-gray-600 hover:text-gray-400 dark:text-white/70 dark:hover:text-gray-500"
                  href="javascript:void(0);"
                  >Blog</a
                >
              </div>
            </div>
          </nav>
        </header>
      </div>
    </div>
  </div>
  <div class="col-span-12">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Navbar with Alignment</h5>
      </div>
      <div class="box-body">
        <header
          class="flex flex-wrap sm:justify-start sm:flex-nowrap z-40 w-full bg-white text-sm dark:bg-bgdark"
        >
          <nav
            class="w-full mx-auto px-2 sm:flex sm:items-center sm:justify-between"
            aria-label="Global"
          >
            <div class="flex items-center justify-between">
              <a routerLink="/dashboard/sales" class="header-logo">
                <img
                  src="./assets/img/brand-logos/desktop-logo.png"
                  alt="logo"
                  class="dark:hidden block"
                />
                <img
                  src="./assets/img/brand-logos/desktop-dark.png"
                  alt="logo"
                  class="hidden dark:block"
                />
              </a>
              <div class="sm:hidden">
                <button
                  type="button"
                  class="hs-collapse-toggle p-2 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-sm dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
                  data-hs-collapse="#navbar-alignment"
                  aria-controls="navbar-alignment"
                  aria-label="Toggle navigation"
                >
                  <svg
                    class="hs-collapse-open:hidden w-4 h-4"
                    width="16"
                    height="16"
                    fill="currentColor"
                    viewBox="0 0 16 16"
                  >
                    <path
                      fill-rule="evenodd"
                      d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"
                    />
                  </svg>
                  <svg
                    class="hs-collapse-open:block hidden w-4 h-4"
                    width="16"
                    height="16"
                    fill="currentColor"
                    viewBox="0 0 16 16"
                  >
                    <path
                      d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"
                    />
                  </svg>
                </button>
              </div>
            </div>
            <div
              id="navbar-alignment"
              class="hs-collapse hidden overflow-hidden transition-all duration-300 basis-full grow sm:block"
            >
              <div
                class="flex flex-col gap-5 mt-5 sm:flex-row sm:items-center sm:mt-0 ltr:sm:pl-5 rtl:sm:pr-5"
              >
                <a
                  class="font-medium text-primary"
                  href="javascript:void(0);"
                  aria-current="page"
                  >Landing</a
                >
                <a
                  class="font-medium text-gray-600 hover:text-gray-400 dark:text-white/70 dark:hover:text-gray-500"
                  href="javascript:void(0);"
                  >Account</a
                >
                <a
                  class="font-medium text-gray-600 hover:text-gray-400 dark:text-white/70 dark:hover:text-gray-500"
                  href="javascript:void(0);"
                  >Work</a
                >
                <a
                  class="font-medium text-gray-600 hover:text-gray-400 dark:text-white/70 dark:hover:text-gray-500"
                  href="javascript:void(0);"
                  >Blog</a
                >
              </div>
            </div>
          </nav>
        </header>
      </div>
    </div>
  </div>
  <div class="col-span-12">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Navbar with MegaMenu</h5>
      </div>
      <div class="box-body">
        <header
          class="relative flex flex-wrap sm:justify-start sm:flex-nowrap z-40 w-full bg-white text-sm dark:bg-bgdark"
        >
          <nav
            class="w-full mx-auto px-2 sm:flex sm:items-center sm:justify-between"
            aria-label="Global"
          >
            <div class="flex items-center justify-between">
              <a routerLink="/dashboard/sales" class="header-logo">
                <img
                  src="./assets/img/brand-logos/desktop-logo.png"
                  alt="logo"
                  class="dark:hidden block"
                />
                <img
                  src="./assets/img/brand-logos/desktop-dark.png"
                  alt="logo"
                  class="hidden dark:block"
                />
              </a>
              <div class="sm:hidden">
                <button
                  type="button"
                  class="hs-collapse-toggle p-2 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-sm dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
                  data-hs-collapse="#navbar-with-mega-menu"
                  aria-controls="navbar-with-mega-menu"
                  aria-label="Toggle navigation"
                >
                  <svg
                    class="hs-collapse-open:hidden w-4 h-4"
                    width="16"
                    height="16"
                    fill="currentColor"
                    viewBox="0 0 16 16"
                  >
                    <path
                      fill-rule="evenodd"
                      d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"
                    />
                  </svg>
                  <svg
                    class="hs-collapse-open:block hidden w-4 h-4"
                    width="16"
                    height="16"
                    fill="currentColor"
                    viewBox="0 0 16 16"
                  >
                    <path
                      d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"
                    />
                  </svg>
                </button>
              </div>
            </div>
            <div
              id="navbar-with-mega-menu"
              class="hs-collapse hidden overflow-hidden transition-all duration-300 basis-full grow sm:block"
            >
              <div
                class="flex flex-col gap-5 mt-5 sm:flex-row sm:items-center sm:justify-end sm:mt-0 ltr:sm:pl-5 rtl:sm:pr-5"
              >
                <a
                  class="font-medium text-primary"
                  href="javascript:void(0);"
                  aria-current="page"
                  >Landing</a
                >
                <a
                  class="hidden md:block font-medium text-gray-600 hover:text-gray-400 dark:text-white/70 dark:hover:text-gray-500"
                  href="javascript:void(0);"
                  >Account</a
                >
                <a
                  class="font-medium text-gray-600 hover:text-gray-400 dark:text-white/70 dark:hover:text-gray-500"
                  href="javascript:void(0);"
                  >Work</a
                >
                <a
                  class="font-medium text-gray-600 hover:text-gray-400 dark:text-white/70 dark:hover:text-gray-500"
                  href="javascript:void(0);"
                  >Blog</a
                >
                <div class="hs-dropdown relative inline-flex">
                  <button
                    id="hs-dropdown-basic"
                    type="button"
                    class="hs-mega-menu-toggle hs-mega-menu-open:text-gray-500 hover:hs-mega-menu-open:text-gray-500 dark:hs-mega-menu-open:text-white/70 dark:hover:hs-mega-menu-open:text-white flex items-center w-full text-gray-600 hover:text-gray-400 font-medium dark:text-white/70 dark:hover:text-white/70"
                  >
                    Dropdown
                    <svg
                      class="hs-dropdown-open:rotate-180 w-2.5 h-2.5 text-gray-600 ltr:ml-2 rtl:mr-2"
                      width="16"
                      height="16"
                      viewBox="0 0 16 16"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"
                      />
                    </svg>
                  </button>

                  <div
                    class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 w-56 hidden z-10 mt-2 min-w-15rem bg-white shadow-md rounded-lg p-2 dark:bg-gray-800 dark:border dark:border-gray-700 dark:divide-gray-700"
                    aria-labelledby="hs-dropdown-basic"
                  >
                    <a
                      class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
                    >
                      About
                    </a>
                     <div
                      class="hs-dropdown relative [--strategy:static] sm:[--strategy:absolute] [--adaptive:none] sm:[--trigger:hover]"
                    >
                      <button
                        type="button"
                        class="w-full flex justify-between items-center text-sm text-gray-800 rounded-md py-2 px-3 hover:bg-gray-100 focus:ring-0 focus:ring-transparent dark:text-white/70 dark:hover:bg-black/20 dark:hover:text-gray-300"
                      >
                        Sub Menu
                        <svg
                          class="sm:-rotate-90 ltr:ml-2 rtl:mr-2 w-2.5 h-2.5 text-gray-600 dark:text-white/70 rtl:rotate-90"
                          width="16"
                          height="16"
                          viewBox="0 0 16 16"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5"
                            stroke="currentColor"
                            stroke-width="2"
                            stroke-linecap="round"
                          ></path>
                        </svg>
                      </button>

                      <div
                        class="hs-dropdown-menu transition-[opacity,margin] duration-[0.1ms] sm:duration-[150ms] hs-dropdown-open:opacity-100 opacity-0 sm:w-48 hidden z-10 sm:mt-2 bg-white sm:shadow-md rounded-lg p-2 dark:bg-bgdark sm:dark:border dark:border-white/10 dark:divide-white/10 before:absolute sm:border ltr:before:-right-5 rtl:before:-left-5 before:top-0 before:h-full before:w-5 top-0 ltr:right-full rtl:left-full !mx-[10px]"
                      >
                        <a
                          class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-0 focus:ring-transparent dark:text-white/70 dark:hover:bg-black/20 dark:hover:text-gray-300"
                          href="javascript:void(0);"
                        >
                          About
                        </a>
                        <a
                          class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-0 focus:ring-transparent dark:text-white/70 dark:hover:bg-black/20 dark:hover:text-gray-300"
                          href="javascript:void(0);"
                        >
                          Downloads
                        </a>
                        <a
                          class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-0 focus:ring-transparent dark:text-white/70 dark:hover:bg-black/20 dark:hover:text-gray-300"
                          href="javascript:void(0);"
                        >
                          Team Account
                        </a>
                      </div>
                    </div>
                    <a
                      class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
                    >
                      Services
                    </a>
                    <a
                      class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
                    >
                      Customer Story
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </nav>
        </header>
      </div>
    </div>
  </div>
  <div class="col-span-12">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Navbar with Color variants</h5>
      </div>
      <div class="box-body space-y-4">
        <header
          class="flex flex-wrap sm:justify-start sm:flex-nowrap w-full bg-primary text-sm py-4 rounded-sm"
        >
          <nav
            class="w-full mx-auto px-2 sm:flex sm:items-center sm:justify-between"
            aria-label="Global"
          >
            <div class="flex items-center justify-between">
              <a routerLink="/dashboard/sales" class="header-logo">
                <img
                  src="./assets/img/brand-logos/desktop-light.png"
                  alt="logo"
                  class="block"
                />
              </a>
              <div class="sm:hidden">
                <button
                  type="button"
                  class="hs-collapse-toggle p-2 inline-flex justify-center items-center gap-2 rounded-md border border-white/[.25] font-medium bg-primary text-white shadow-sm align-middle hover:bg-primary focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white/10 focus:ring-primary transition-all text-sm dark:bg-primary dark:hover:bg-primary dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
                  data-hs-collapse="#navbar-primary"
                  aria-controls="navbar-primary"
                  aria-label="Toggle navigation"
                >
                  <svg
                    class="hs-collapse-open:hidden w-4 h-4"
                    width="16"
                    height="16"
                    fill="currentColor"
                    viewBox="0 0 16 16"
                  >
                    <path
                      fill-rule="evenodd"
                      d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"
                    />
                  </svg>
                  <svg
                    class="hs-collapse-open:block hidden w-4 h-4"
                    width="16"
                    height="16"
                    fill="currentColor"
                    viewBox="0 0 16 16"
                  >
                    <path
                      d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"
                    />
                  </svg>
                </button>
              </div>
            </div>
            <div
              id="navbar-primary"
              class="hs-collapse hidden overflow-hidden transition-all duration-300 basis-full grow sm:block"
            >
              <div
                class="flex flex-col gap-5 mt-5 sm:flex-row sm:items-center sm:justify-end sm:mt-0 ltr:sm:pl-5 rtl:sm:pr-5"
              >
                <a
                  class="font-medium text-white"
                  href="javascript:void(0);"
                  aria-current="page"
                  >Landing</a
                >
                <a
                  class="font-medium text-gray-300 hover:text-white"
                  href="javascript:void(0);"
                  >Account</a
                >
                <a
                  class="font-medium text-gray-300 hover:text-white"
                  href="javascript:void(0);"
                  >Work</a
                >
                <a
                  class="font-medium text-gray-300 hover:text-white"
                  href="javascript:void(0);"
                  >Blog</a
                >
              </div>
            </div>
          </nav>
        </header>

        <header
          class="flex flex-wrap sm:justify-start sm:flex-nowrap z-40 w-full bg-secondary text-sm py-4 rounded-sm"
        >
          <nav
            class="w-full mx-auto px-2 sm:flex sm:items-center sm:justify-between"
            aria-label="Global"
          >
            <div class="flex items-center justify-between">
              <a routerLink="/dashboard/sales" class="header-logo">
                <img
                  src="./assets/img/brand-logos/desktop-dark.png"
                  alt="logo"
                  class="block"
                />
              </a>
              <div class="sm:hidden">
                <button
                  type="button"
                  class="hs-collapse-toggle p-2 inline-flex justify-center items-center gap-2 rounded-md border border-white/[.25] font-medium bg-secondary text-white shadow-sm align-middle hover:bg-white/[.15] focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-secondary focus:ring-white transition-all text-sm"
                  data-hs-collapse="#navbar-secondary"
                  aria-controls="navbar-secondary"
                  aria-label="Toggle navigation"
                >
                  <svg
                    class="hs-collapse-open:hidden w-4 h-4"
                    width="16"
                    height="16"
                    fill="currentColor"
                    viewBox="0 0 16 16"
                  >
                    <path
                      fill-rule="evenodd"
                      d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"
                    />
                  </svg>
                  <svg
                    class="hs-collapse-open:block hidden w-4 h-4"
                    width="16"
                    height="16"
                    fill="currentColor"
                    viewBox="0 0 16 16"
                  >
                    <path
                      d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"
                    />
                  </svg>
                </button>
              </div>
            </div>
            <div
              id="navbar-secondary"
              class="hs-collapse hidden overflow-hidden transition-all duration-300 basis-full grow sm:block"
            >
              <div
                class="flex flex-col gap-5 mt-5 sm:flex-row sm:items-center sm:justify-end sm:mt-0 ltr:sm:pl-5 rtl:sm:pr-5"
              >
                <a
                  class="font-medium text-white"
                  href="javascript:void(0);"
                  aria-current="page"
                  >Landing</a
                >
                <a
                  class="font-medium text-gray-300 hover:text-white"
                  href="javascript:void(0);"
                  >Account</a
                >
                <a
                  class="font-medium text-gray-300 hover:text-white"
                  href="javascript:void(0);"
                  >Work</a
                >
                <a
                  class="font-medium text-gray-300 hover:text-white"
                  href="javascript:void(0);"
                  >Blog</a
                >
              </div>
            </div>
          </nav>
        </header>
      </div>
    </div>
  </div>
</div>
<!-- End::row-1 -->