Taobin-Recipe-Manager/client/src/app/core/layout/layout.component.html

<nav class="fixed top-0 z-50 w-full bg-primary border-b border-gray-200">
  <div class="px-3 py-3 lg:px-5 lg:pl-3">
    <div class="flex items-center justify-between">
      <div class="flex items-center justify-start">
        <button
          data-drawer-target="logo-sidebar"
          data-drawer-toggle="logo-sidebar"
          aria-controls="logo-sidebar"
          type="button"
          class="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg sm:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200"
        >
          <span class="sr-only">Open sidebar</span>
          <svg
            class="w-6 h-6"
            aria-hidden="true"
            fill="currentColor"
            viewBox="0 0 20 20"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              clip-rule="evenodd"
              fill-rule="evenodd"
              d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"
            ></path>
          </svg>
        </button>
        <a routerLink="/dashboard" class="flex ml-2 md:mr-24 max-sm:hidden">
          <img
            src="assets/logo.svg"
            class="h-10 md:h-20 px-4"
            alt="Tao Bin Logo"
          />
        </a>
      </div>
      <div class="flex items-center">
        <div class="flex items-center ml-3">
          <div class="flex flex-row">
            <div class="flex justify-center sm:flex-row md:flex-col sm:px-5">
              <span
                class="flex items-center text-primary max-sm:text-xs sm:text-sm md:text-xl font-normal font-kanit"
              >
                {{ date | date : "dd MMM yyyy" }}
              </span>
              <p
                class="md:hidden px-1 flex items-center text-primary font-normal font-kanit"
              >
                |
              </p>
              <span
                class="flex items-center text-primary max-sm:text-xs sm:text-xs md:text-xl font-normal font-kanit"
              >
                {{ user?.username }}
              </span>
            </div>
            <button
              type="button"
              class="flex text-sm bg-gray-800 rounded-full focus:ring-4 focus:ring-gray-300 max-sm:hidden"
              aria-expanded="false"
              data-dropdown-toggle="dropdown-user"
            >
              <span class="sr-only">Open user menu</span>
              <img
                class="sm:h-10 md:h-14 rounded-full cursor-pointer"
                src="{{ user?.image }}"
                loading="lazy"
                alt="profile picture"
              />
            </button>
          </div>

          <div
            class="z-50 hidden my-4 text-base list-none bg-primary divide-y divide-gray-100 rounded shadow"
            id="dropdown-user"
          >
            <div class="px-4 py-3" role="none">
              <p class="text-sm text-gray-900" role="none">
                {{ user?.username }}
              </p>
              <p class="text-sm font-medium text-gray-900 truncate" role="none">
                {{ user?.email }}
              </p>
            </div>
            <ul class="py-1" role="none">
              <li>
                <a
                  routerLink="/dashboard"
                  class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                  role="menuitem"
                >
                  Dashboard</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                  role="menuitem"
                  >Settings</a
                >
              </li>
              <li>
                <a
                  routerLink="#"
                  class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                  role="menuitem"
                  (click)="logout()"
                  >Sign out</a
                >
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>

<aside
  id="logo-sidebar"
  class="fixed top-0 left-0 z-40 w-64 h-screen pt-28 transition-transform -translate-x-full bg-primary border-r border-gray-200 sm:translate-x-0"
  aria-label="Sidebar"
>
  <div class="h-full px-3 pb-4 overflow-y-auto bg-primary">
    <ul class="space-y-2 font-medium">
      <li *ngFor="let menu of menuItems">
        <a
          routerLink="{{ menu.link }}"
          routerLinkActive="bg-gray-100 text-gray-900"
          class="flex items-center p-2 text-gray-900 rounded-lg hover:bg-gray-100 group"
        >
          <img
            *ngIf="menu.icon_url"
            class="w-5 h-5 text-gray-500 transition duration-75 group-hover:text-gray-900"
            src="{{ menu.icon_url }}"
            alt="dashboard icon"
          />
          <span class="ml-3 capitalize font-kanit">{{ menu.name }}</span>
        </a>
      </li>
    </ul>
  </div>
</aside>

<div class="px-4 pt-16 sm:ml-64">
  <div class="p-4 border-2 border-gray-200 border-dashed rounded-lg mt-14">
    <div class="grid grid-cols-1 gap-4 mb-4">
      <router-outlet></router-outlet>
    </div>
  </div>
</div>