amigan/stillbox
1
0
Fork 0
Code Issues 16 Pull requests Projects Releases Packages Wiki Activity Actions

wip

Browse source
This commit is contained in:
Daniel 2024-11-07 07:49:05 -05:00
parent 03a2722feb
commit b1abe13ce1
1 changed files with 185 additions and 250 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

115
client/admin/src/app/app.component.html
View file

@ -1,13 +1,12 @@
<!-- ========== HEADER ========== --> <!-- ========== HEADER ========== -->
@if (auth.loggedIn) { @if (auth.loggedIn) {
<header <header
class="sticky top-0 inset-x-0 flex flex-wrap md:justify-start md:flex-nowrap z-[48] w-full bg-white border-b text-sm py-2.5 lg:ps-[260px] dark:bg-neutral-800 dark:border-neutral-700" class="sticky top-0 inset-x-0 flex flex-wrap md:justify-start md:flex-nowrap z-[48] w-full bg-white border-b text-sm py-2.5 lg:ps-[260px] dark:bg-neutral-800 dark:border-neutral-700"
> >
<nav class="px-4 sm:px-6 flex basis-full items-center w-full mx-auto"> <nav class="px-4 sm:px-6 flex basis-full items-center w-full mx-auto">
<div <div
class="w-full flex items-center justify-end ms-auto md:justify-between gap-x-1 md:gap-x-3" class="w-full flex items-center justify-end ms-auto md:justify-between gap-x-1 md:gap-x-3"
> >
<div class="hidden md:block"> <div class="hidden md:block">
<!-- Search Input --> <!-- Search Input -->
<div class="relative"> <div class="relative">
@ -65,10 +64,7 @@
<div <div
class="absolute inset-y-0 end-0 flex items-center pointer-events-none z-20 pe-3 text-gray-400" class="absolute inset-y-0 end-0 flex items-center pointer-events-none z-20 pe-3 text-gray-400"
> >
<span class="mx-1"> </span>
<span class="mx-1">
</span>
<span class="text-xs">/</span> <span class="text-xs">/</span>
</div> </div>
</div> </div>
@ -98,6 +94,7 @@
<span class="sr-only">Search</span> <span class="sr-only">Search</span>
</button> </button>
<div class="dropdown">
<button <button
type="button" type="button"
class="size-[38px] relative inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" class="size-[38px] relative inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700"
@ -119,82 +116,21 @@
</svg> </svg>
<span class="sr-only">Notifications</span> <span class="sr-only">Notifications</span>
</button> </button>
<ul
tabindex="0"
class="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow"
>
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
</div>
<button <a (click)="logout()" class="btn btn-sm btn-primary">Logout</a>
type="button"
class="size-[38px] relative inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700"
>
<svg
class="shrink-0 size-4"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M22 12h-4l-3 9L9 3l-3 9H2" />
</svg>
<span class="sr-only">Activity</span>
</button>
<!-- Dropdown -->
<div
class="hs-dropdown [--placement:bottom-right] relative inline-flex"
>
<button
id="hs-dropdown-account"
type="button"
class="size-[38px] inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-gray-800 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white"
aria-haspopup="menu"
aria-expanded="false"
aria-label="Dropdown"
>
<img
class="shrink-0 size-[38px] rounded-full"
src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80"
alt="Avatar"
/>
</button>
<div
class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-60 bg-white shadow-md rounded-lg mt-2 dark:bg-neutral-800 dark:border dark:border-neutral-700 dark:divide-neutral-700 after:h-4 after:absolute after:-bottom-4 after:start-0 after:w-full before:h-4 before:absolute before:-top-4 before:start-0 before:w-full"
role="menu"
aria-orientation="vertical"
aria-labelledby="hs-dropdown-account"
>
<div
class="py-3 px-5 bg-gray-100 rounded-t-lg dark:bg-neutral-700"
>
<p class="text-sm text-gray-500 dark:text-neutral-500">
Signed in as
</p>
<p
class="text-sm font-medium text-gray-800 dark:text-neutral-200"
>
jamessite.com
</p>
</div>
<div class="p-1.5 space-y-0.5">
<a
class="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700 dark:focus:text-neutral-300"
(click)="logout()"
>
Logout
</a>
</div>
</div>
</div>
<!-- End Dropdown -->
</div> </div>
</div> </div>
</nav> </nav>
</header> </header>
} } @else {
@else {
<div class="relative flex flex-col h-full max-h-full"> <div class="relative flex flex-col h-full max-h-full">
<div class="px-6 pt-4"> <div class="px-6 pt-4">
<!-- Logo --> <!-- Logo -->
@ -212,14 +148,14 @@
<!-- ========== END HEADER ========== --> <!-- ========== END HEADER ========== -->
<!-- Sidebar --> <!-- Sidebar -->
@if (auth.loggedIn) { @if (auth.loggedIn) {
<div <div
id="hs-application-sidebar" id="hs-application-sidebar"
class="hs-overlay [--auto-close:lg] hs-overlay-open:translate-x-0 -translate-x-full transition-all duration-300 transform w-[260px] h-full hidden fixed inset-y-0 start-0 z-[60] bg-white border-e border-gray-200 lg:block lg:translate-x-0 lg:end-auto lg:bottom-0 dark:bg-neutral-800 dark:border-neutral-700" class="hs-overlay [--auto-close:lg] hs-overlay-open:translate-x-0 -translate-x-full transition-all duration-300 transform w-[260px] h-full hidden fixed inset-y-0 start-0 z-[60] bg-white border-e border-gray-200 lg:block lg:translate-x-0 lg:end-auto lg:bottom-0 dark:bg-neutral-800 dark:border-neutral-700"
role="dialog" role="dialog"
tabindex="-1" tabindex="-1"
aria-label="Sidebar" aria-label="Sidebar"
> >
<div class="relative flex flex-col h-full max-h-full"> <div class="relative flex flex-col h-full max-h-full">
<div class="px-6 pt-4"> <div class="px-6 pt-4">
<!-- Logo --> <!-- Logo -->
@ -295,22 +231,21 @@
</div> </div>
<!-- End Content --> <!-- End Content -->
</div> </div>
</div> </div>
} }
<!-- End Sidebar --> <!-- End Sidebar -->
<!-- Content --> <!-- Content -->
@if (auth.loggedIn) { @if (auth.loggedIn) {
<div class="w-full lg:ps-64"> <div class="w-full lg:ps-64">
<div class="p-4 sm:p-6 space-y-4 sm:space-y-6"> <div class="p-4 sm:p-6 space-y-4 sm:space-y-6">
<router-outlet /> <router-outlet />
</div> </div>
</div> </div>
} } @else {
@else { <div class="w-full">
<div class="w-full">
<div class="p-4 sm:p-6 space-y-4 sm:space-y-6"> <div class="p-4 sm:p-6 space-y-4 sm:space-y-6">
<router-outlet /> <router-outlet />
</div> </div>
</div> </div>
} }