Skip to content

Commit af99386

Browse files
mckenzieartsmckenziearts
committed
💄 update admin layout
1 parent cf13fec commit af99386

File tree

3 files changed

+59
-43
lines changed

3 files changed

+59
-43
lines changed

‎src/app/shared/themes/components/header/header.component.html

+21-9
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<header class="bg-white border-b shadow shrink-0 md:bg-transparent md:shadow-none border-slate-100">
1+
<header class="bg-white border-b border-gray-200 shrink-0">
22
<div class="flex">
33
<button
44
type="button"
@@ -10,16 +10,28 @@
1010
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12" />
1111
</svg>
1212
</button>
13-
<div class="flex items-center justify-between flex-1 px-4 sm:px-6 lg:px-8">
14-
<logo-svg class="w-24 h-auto md:hidden"></logo-svg>
13+
<div class="flex items-center justify-between flex-1 px-4 py-3 sm:px-6 lg:px-8">
14+
<div class="flex items-center flex-1">
15+
<logo-svg class="w-24 h-auto sm:w-28"></logo-svg>
1516

16-
<!-- SearchBar Component -->
17-
<div class="max-w-lg md:py-5"></div>
17+
<!-- SearchBar Component -->
18+
<div class="w-full max-w-xs ml-12">
19+
<label for="search" class="sr-only">Recherche rapide</label>
20+
<div class="relative flex items-center">
21+
<input type="text" name="search" id="search" placeholder="Rechercher" class="block w-full pr-12 border-gray-300 rounded-md shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm">
22+
<div class="absolute inset-y-0 right-0 flex py-1.5 pr-1.5">
23+
<kbd class="inline-flex items-center px-2 font-sans text-sm font-medium text-gray-400 border border-gray-200 rounded">⌘K</kbd>
24+
</div>
25+
</div>
26+
</div>
27+
</div>
1828

19-
<div class="flex items-center py-4 lg:py-5 lg:divide-x lg:divide-slate-200">
29+
<div class="flex items-center lg:divide-x lg:divide-slate-200">
2030
<a
21-
href="#"
22-
class="items-center hidden pr-4 text-sm leading-5 lg:flex text-slate-500 hover:text-slate-700">
31+
href="https://github.com/laravelcm/angular-admin-panel"
32+
target="_blank"
33+
class="items-center hidden pr-4 text-sm leading-5 lg:flex text-slate-500 hover:text-slate-700"
34+
>
2335
<svg
2436
class="w-6 h-6 mr-2 text-slate-400"
2537
stroke="currentColor"
@@ -75,7 +87,7 @@
7587
aria-expanded="false"
7688
aria-haspopup="true"
7789
(click)="toggleMobileMenu()">
78-
<span class="sr-only">Open user menu</span>
90+
<span class="sr-only">Ouvrir le menu utilisateur</span>
7991
<ngx-skeleton-loader
8092
*ngIf="(user$ | async) === null"
8193
appearance="circle"

‎src/app/shared/themes/components/sidebar/sidebar.component.html

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
<aside id="sidebar" class="relative group flex flex-col h-full w-[260px] bg-slate-50">
2-
<div class="flex flex-col flex-grow overflow-y-auto">
3-
<div class="relative flex items-center px-6 py-8 shrink-0 sm:px-8">
1+
<aside id="sidebar" class="relative group flex flex-col h-full w-[260px] bg-slate-100 lg:bg-transparent">
2+
<div class="flex flex-col flex-grow py-6 overflow-y-auto">
3+
<div class="relative flex items-center px-6 py-8 shrink-0 sm:hidden">
44
<logo-svg class="h-auto w-36"></logo-svg>
55
</div>
66
<nav class="flex flex-col h-full pt-4 pb-8 space-y-8" aria-label="Sidebar">
@@ -13,6 +13,7 @@ <h5 class="px-6 font-mono text-xs font-semibold leading-5 tracking-widest upperc
1313
<path *ngFor="let path of item.svgPath" [attr.d]="path" stroke-linecap="round" stroke-linejoin="round"/>
1414
</svg>
1515
<span class="truncate">{{ item.title }}</span>
16+
<span *ngIf="item.soon" class="ml-2.5 inline-flex items-center text-xs leading-4 text-primary-800 bg-primary-100 px-1.5 py-0.5">Bientôt</span>
1617
</a>
1718
</ng-template>
1819
</div>

‎src/app/shared/themes/layouts/cpanel/cpanel.component.html

+34-31
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,40 @@
1+
<!-- Global Loader -->
12
<mat-progress-bar *ngIf="loading" mode="query"></mat-progress-bar>
2-
<div class="flex h-screen overflow-hidden">
3-
<!-- Static sidebar for mobile -->
4-
<div class="relative z-40 md:hidden" [ngClass]="mobileSidebarOpen ? 'block' : 'hidden'">
5-
<div [@openBackdrop]="openCloseTrigger" class="fixed inset-0 bg-opacity-75 bg-slate-900"></div>
3+
<div class="h-screen overflow-hidden bg-gray-100">
4+
<!-- Header -->
5+
<admin-header (openMobileSidebar)="openSidebar($event)"></admin-header>
66

7-
<admin-sidebar [@openClose]="openCloseTrigger" ngClass="fixed inset-0 z-40 flex"></admin-sidebar>
8-
9-
<div [@closeButton]="openCloseTrigger" class="absolute top-0 z-50 pt-2 left-[285px]">
10-
<button
11-
type="button"
12-
class="flex items-center justify-center w-10 h-10 ml-1 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
13-
(click)="toggleSidebar()"
14-
>
15-
<span class="sr-only">Close sidebar</span>
16-
<svg class="w-6 h-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
17-
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
18-
</svg>
19-
</button>
7+
<div class="flex h-full min-h-screen">
8+
<!-- Static sidebar for mobile -->
9+
<div class="relative z-40 md:hidden" [ngClass]="mobileSidebarOpen ? 'block' : 'hidden'">
10+
<div [@openBackdrop]="openCloseTrigger" class="fixed inset-0 bg-gray-900 bg-opacity-75"></div>
11+
12+
<admin-sidebar [@openClose]="openCloseTrigger" ngClass="fixed inset-0 z-40 flex"></admin-sidebar>
13+
14+
<div [@closeButton]="openCloseTrigger" class="absolute top-0 z-50 pt-2 left-[285px]">
15+
<button
16+
type="button"
17+
class="flex items-center justify-center w-10 h-10 ml-1 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
18+
(click)="toggleSidebar()"
19+
>
20+
<span class="sr-only">Fermer la sidebar</span>
21+
<svg class="w-6 h-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
22+
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
23+
</svg>
24+
</button>
25+
</div>
2026
</div>
21-
</div>
22-
23-
<!-- Static sidebar for desktop -->
24-
<admin-sidebar ngClass="hidden md:block"></admin-sidebar>
25-
26-
<!-- Content layout -->
27-
<div class="flex flex-col flex-1 w-0 bg-white">
28-
<div class="relative z-0 flex flex-col h-full overflow-hidden overflow-y-auto focus:ouline-none">
29-
<!-- Header -->
30-
<admin-header (openMobileSidebar)="openSidebar($event)"></admin-header>
31-
32-
<div class="flex-1 w-full h-full px-4 mx-auto bg-slate-50 max-w-8xl md:bg-transparent sm:px-6 lg:px-8">
33-
<router-outlet></router-outlet>
27+
28+
<!-- Static sidebar for desktop -->
29+
<admin-sidebar ngClass="hidden md:block"></admin-sidebar>
30+
31+
<!-- Content layout -->
32+
<div class="flex flex-col flex-1 w-0">
33+
<div class="relative z-0 flex flex-col h-full overflow-hidden overflow-y-auto focus:ouline-none">
34+
<div class="flex-1 w-full h-full px-4 py-6 mx-auto max-w-8xl sm:px-6 lg:px-8">
35+
<router-outlet></router-outlet>
36+
</div>
3437
</div>
3538
</div>
3639
</div>
37-
</div>
40+
</div>

0 commit comments

Comments
 (0)