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

<div class="overflow-auto">
  <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"
          >
            <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="/{{ current_department }}/recipes"
            class="flex ml-14 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 items-center sm:flex-row md:flex-col sm:px-5 w-[250px]"
              >
                <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 HH:mm:ss" }}
                </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?.name }}
                </span>
              </div>
              <div class="dropdown dropdown-bottom dropdown-end">
                <label
                  tabindex="0"
                  class="btn btn-circle w-14 h-14 focus:ring ring-primary ring-offset-base-100 ring-offset-2 max-sm:hidden"
                >
                  <div class="avatar">
                    <div class="rounded-full">
                      <img src="{{ user?.picture }}" alt="profile picture" />
                    </div>
                  </div>
                </label>
                <div
                  tabindex="0"
                  class="dropdown-content z-[-1] menu p-2 shadow bg-base-100 rounded-box w-52 divide-y divide-gray-100"
                >
                  <div class="px-4 py-3" role="none">
                    <p class="text-sm text-gray-900" role="none">
                      {{ user?.name }}
                    </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="/recipes"
                        class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                        role="menuitem"
                      >
                        Dashboard</a
                      >
                    </li>
                    <li>
                      <a
                        class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                        role="menuitem"
                        >Settings</a
                      >
                    </li>
                    <li>
                      <a
                        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
              class="z-50 hidden my-4 text-base list-none bg-primary divide-y divide-gray-100 rounded shadow"
              id="dropdown-user"
            ></div>
          </div>
        </div>
      </div>
    </div>
  </nav>

  <aside
    id="logo-sidebar"
    class="fixed top-0 left-0 z-40 w-64 h-screen sm:pt-20 md: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="recipes icon"
            />
            <span class="ml-3 capitalize font-kanit">{{ menu.name }}</span>
          </a>
        </li>
      </ul>
    </div>
  </aside>

  <div class="fixed pt-10 sm:ml-64">
    <div class="p-2 sm:mt-5 md:mt-14">
      <router-outlet></router-outlet>
    </div>
  </div>
</div>