import { Component, ElementRef } from '@angular/core';
import { StyleClassModule } from 'primeng/styleclass';
import { AppMenu } from './app.menu';

@Component({
  selector: 'app-sidebar',
  imports: [StyleClassModule, AppMenu],
  template: ` <div
    class="min-h-screen h-full flex bg-surface-50 dark:bg-surface-950"
  >
    <div
      id="app-sidebar"
      class="h-screen bg-surface-0 dark:bg-surface-950 hidden lg:block shrink-0 fixed lg:sticky left-0 top-0 z-10 border-r border-surface w-72 lg:w-28 select-none"
    >
      <div class="flex flex-col h-full">
        <div class="p-4 flex items-center justify-center shrink-0">
          <img
            src="assets/images/MUSA/logo.png"
            style="max-width: 79px;"
            alt="Image"
          />
        </div>
        <div class="layout-menu mt-4">
          <app-menu></app-menu>
        </div>
        <!-- <div class="mt-auto">
        <hr class="mb-4 mx-4 border-t border-0 border-surface" />
        <a pRipple
           class="m-4 flex flex-row lg:flex-col items-center cursor-pointer p-4 lg:justify-center hover:bg-surface-200 dark:hover:bg-surface-600 rounded-border text-surface-600 dark:text-surface-200 duration-150 transition-colors">
          <img src="assets/images/blocks/avatars/circle/avatar-f-1.png"
               class="mr-2 lg:mr-0"
               style="width: 32px; height: 32px" />
          <span class="font-medium inline lg:hidden">Amy Elsner</span>
        </a>
      </div> -->
      </div>
    </div>
  </div>`,
})
export class AppSidebar {
  constructor(public el: ElementRef) {}
}
