Skip to content
This repository was archived by the owner on Nov 28, 2025. It is now read-only.

Commit a3ed7ad

Browse files
mckenzieartsmckenziearts
committed
💄 mis a jour du layout cpanel
1 parent 73a2810 commit a3ed7ad

File tree

11 files changed

+176
-6
lines changed

11 files changed

+176
-6
lines changed

‎src/app/shared/interfaces/menu.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export interface Menu {
2+
group: string;
3+
items: MenuItem[];
4+
}
5+
6+
export interface MenuItem {
7+
title: string;
8+
svgPath: string[];
9+
link: string;
10+
}

‎src/app/shared/shared.module.ts‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,11 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
44

55
import { ThemeModule } from './themes/theme.module';
66

7-
import { LogoComponent } from './components/logo/logo.component';
87
import { OverlapingLabelComponent } from './components/inputs/overlaping-label/overlaping-label.component';
98
import { PrimaryComponent as ButtonPrimary } from './components/buttons/primary/primary.component';
109

1110
@NgModule({
1211
declarations: [
13-
LogoComponent,
1412
OverlapingLabelComponent,
1513
ButtonPrimary,
1614
],
@@ -23,7 +21,6 @@ import { PrimaryComponent as ButtonPrimary } from './components/buttons/primary/
2321
exports: [
2422
CommonModule,
2523
ThemeModule,
26-
LogoComponent,
2724
OverlapingLabelComponent,
2825
ButtonPrimary,
2926
],

src/app/shared/components/logo/logo.component.html renamed to src/app/shared/themes/components/logo/logo.component.html

File renamed without changes.

src/app/shared/components/logo/logo.component.ts renamed to src/app/shared/themes/components/logo/logo.component.ts

File renamed without changes.

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

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<aside id="sidebar" class="relative group flex flex-col h-full w-[280px] 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">
4+
<svg class="absolute left-0 right-0 w-full h-full -top-12" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 277 20">
5+
<path d="M88.642 17.973c-.06-1.108.373-2.814-.259-3.685-3-.225-6.708-.077-9.723-.13.168 1.466-1.077 3.815 1.283 3.644.67.022 8.699.224 8.703.17h-.004ZM66.318 14.166c.057 1.073-.377 2.87.27 3.685 3.107.225 6.724.076 9.849.13-.027-1.893.982-3.83-1.831-3.644-.697-.023-8.28-.224-8.284-.171h-.004ZM66.318 2.715c.061 1.107-.373 2.813.26 3.685 2.999.224 6.707.076 9.722.13-.168-1.47 1.077-3.815-1.283-3.644-.67-.023-8.699-.225-8.703-.171h.004ZM88.638 6.525c-.057-1.073.377-2.87-.27-3.685-3.106-.224-6.723-.076-9.849-.13.027 1.893-.982 3.83 1.831 3.644.697.023 8.28.225 8.284.171h.004Z" fill="#AD8F53"/>
6+
<path d="M83.784 12.57c1.344-.014 3.408.248 4.401-.456 1.032-.556 1.169-4.001-.084-3.86-4.903-.335-16.011-.175-21.063-.26-1.66-.072-.895 2.985-.823 4.116.035.194.19.335.37.343a286.712 286.712 0 0 0 17.196.122l.003-.004ZM66.866 8.86c5.079.06 16.302-.076 21.24.255.84 3.308-2.27 2.57-4.337 2.6-5.604.13-11.234.095-16.838-.106a10.55 10.55 0 0 1-.06-2.749h-.005ZM53.93 1.656C47.098-.73 39.397 7.302 43.157 14.57c1.416 2.909 4.576 4.9 7.698 4.858 9.89.091 12.163-14.219 3.076-17.77ZM43.843 14.158C39.076 4.161 54.608-3.255 58.34 7.321c3.67 10.031-10.054 15.624-14.497 6.837Z" fill="#9B6238"/>
7+
<path d="M54.916 13.915c-5.668 6.974-13.263-2.87-6.559-8.292 5.28-3.803 10.264 3.255 6.56 8.292Z" fill="#3F4F45"/>
8+
<path d="M11.24 17.607c4.952-4.747 2.402-14.965-3.853-16.56C2.757-.46-2.812 4.131-2.861 9.4c-.202 5.291 4.012 10.522 8.744 10.507 1.96 0 3.925-.834 5.36-2.3h-.004ZM5.258 19.02c-9.354-1.428-9.982-16.797.24-17.379 9.863.407 10.263 17.923-.24 17.379Z" fill="#9B6238"/>
9+
<path d="M7.73 5.296c7.58 4.271.772 14.79-5.692 9.03-4.679-4.652.312-11.703 5.692-9.03Z" fill="#3F4F45"/>
10+
<path d="M36.849 17.973c-.057-1.177.308-2.65-.202-3.685-2.303-.225-5.177-.077-7.503-.13.194 1.249-.94 3.731.99 3.644.517.022 6.711.224 6.715.17ZM19.626 14.166c.057 1.176-.316 2.66.21 3.685 2.387.22 5.192.076 7.598.13-.095-1.512.895-3.827-1.412-3.644-.537-.023-6.392-.224-6.392-.171h-.004ZM19.622 2.715c.058 1.176-.308 2.65.202 3.685 2.303.224 5.178.076 7.504.13-.194-1.25.94-3.732-.99-3.644-.518-.023-6.712-.225-6.716-.171ZM36.849 6.525c-.057-1.176.316-2.66-.21-3.685-2.387-.22-5.192-.076-7.598-.13.095 1.512-.895 3.827 1.412 3.644.537.023 6.392.225 6.392.171h.004Z" fill="#AD8F53"/>
11+
<path d="M33.107 12.57c1.08-.01 2.672.248 3.48-.487.81-.845.753-2.65.353-3.612-1.915-.651-4.107-.267-6.083-.411l-10.675-.065c-.13 0-.411 0-.617.213-.377.48-.472 4.214.26 4.245a171.173 171.173 0 0 0 13.278.122l.004-.004Zm-12.97-3.719c3.814.076 12.513-.064 16.21.255.52 3.08-1.063 2.658-3.263 2.608a169.6 169.6 0 0 1-12.902-.103 13.896 13.896 0 0 1-.046-2.756v-.004Z" fill="#9B6238"/>
12+
<path d="M182.51 17.973c-.061-1.108.373-2.814-.259-3.685-2.999-.225-6.707-.077-9.722-.13.167 1.466-1.078 3.815 1.282 3.644.67.022 8.699.224 8.703.17h-.004ZM160.186 14.166c.058 1.073-.376 2.87.271 3.685 3.106.225 6.723.076 9.848.13-.026-1.893.982-3.83-1.831-3.644-.697-.023-8.28-.224-8.284-.171h-.004ZM160.186 2.715c.061 1.107-.373 2.813.259 3.685 3 .224 6.708.076 9.723.13-.167-1.47 1.078-3.815-1.283-3.644-.67-.023-8.699-.225-8.702-.171h.003ZM182.506 6.525c-.057-1.073.377-2.87-.27-3.685-3.106-.224-6.723-.076-9.848-.13.026 1.893-.983 3.83 1.831 3.644.696.023 8.28.225 8.284.171h.003Z" fill="#AD8F53"/>
13+
<path d="M177.653 12.57c1.344-.014 3.407.248 4.4-.456 1.032-.556 1.169-4.001-.083-3.86-4.904-.335-16.012-.175-21.064-.26-1.66-.072-.895 2.985-.822 4.116.034.194.19.335.369.343a286.717 286.717 0 0 0 17.196.122l.004-.004ZM160.735 8.86c5.078.06 16.301-.076 21.239.255.841 3.308-2.269 2.57-4.337 2.6a285.43 285.43 0 0 1-16.838-.106c-.14-.91-.16-1.835-.061-2.749h-.003ZM147.799 1.656c-6.834-2.387-14.535 5.646-10.774 12.913 1.416 2.909 4.576 4.9 7.698 4.858 9.89.091 12.163-14.219 3.076-17.77ZM137.71 14.158c-4.766-9.997 10.766-17.413 14.497-6.837 3.67 10.031-10.054 15.624-14.497 6.837Z" fill="#9B6238"/>
14+
<path d="M148.785 13.915c-5.669 6.974-13.264-2.87-6.56-8.292 5.281-3.803 10.264 3.255 6.56 8.292Z" fill="#3F4F45"/>
15+
<path d="M105.108 17.607c4.953-4.747 2.402-14.965-3.853-16.56C96.626-.46 91.056 4.131 91.007 9.4c-.202 5.291 4.012 10.522 8.744 10.507 1.961 0 3.925-.834 5.361-2.3h-.004Zm-5.98 1.413c-9.355-1.428-9.983-16.797.239-17.379 9.864.407 10.263 17.923-.24 17.379Z" fill="#9B6238"/>
16+
<path d="M101.598 5.296c7.579 4.271.773 14.79-5.692 9.03-4.678-4.652.313-11.703 5.692-9.03Z" fill="#3F4F45"/>
17+
<path d="M130.717 17.973c-.057-1.177.308-2.65-.202-3.685-2.303-.225-5.177-.077-7.503-.13.194 1.249-.94 3.731.99 3.644.517.022 6.711.224 6.715.17ZM113.494 14.166c.058 1.176-.315 2.66.21 3.685 2.387.22 5.193.076 7.599.13-.096-1.512.894-3.827-1.413-3.644-.537-.023-6.392-.224-6.392-.171h-.004ZM113.491 2.715c.057 1.176-.309 2.65.201 3.685 2.304.224 5.178.076 7.504.13-.194-1.25.94-3.732-.99-3.644-.518-.023-6.712-.225-6.715-.171ZM130.717 6.525c-.057-1.176.316-2.66-.209-3.685-2.387-.22-5.193-.076-7.599-.13.095 1.512-.895 3.827 1.412 3.644.537.023 6.392.225 6.392.171h.004Z" fill="#AD8F53"/>
18+
<path d="M126.975 12.57c1.081-.01 2.672.248 3.479-.487.811-.845.754-2.65.354-3.612-1.914-.651-4.107-.267-6.083-.411l-10.675-.065c-.129 0-.411 0-.616.213-.377.48-.472 4.214.258 4.245a171.221 171.221 0 0 0 13.279.122l.004-.004Zm-12.97-3.719c3.814.076 12.513-.064 16.21.255.521 3.08-1.063 2.658-3.263 2.608-4.294.13-8.607.095-12.902-.103a13.873 13.873 0 0 1-.045-2.756v-.004Z" fill="#9B6238"/>
19+
<path d="M276.379 17.973c-.061-1.108.373-2.814-.259-3.685-3-.225-6.708-.077-9.723-.13.167 1.466-1.078 3.815 1.283 3.644.67.022 8.699.224 8.702.17h-.003ZM254.055 14.166c.057 1.073-.377 2.87.27 3.685 3.106.225 6.723.076 9.849.13-.027-1.893.982-3.83-1.832-3.644-.696-.023-8.28-.224-8.283-.171h-.004ZM254.055 2.715c.061 1.107-.373 2.813.259 3.685 2.999.224 6.707.076 9.722.13-.167-1.47 1.078-3.815-1.282-3.644-.67-.023-8.699-.225-8.703-.171h.004ZM276.375 6.525c-.057-1.073.377-2.87-.271-3.685-3.106-.224-6.723-.076-9.848-.13.027 1.893-.982 3.83 1.831 3.644.697.023 8.28.225 8.284.171h.004Z" fill="#AD8F53"/>
20+
<path d="M271.521 12.57c1.344-.014 3.407.248 4.401-.456 1.031-.556 1.168-4.001-.084-3.86-4.903-.335-16.012-.175-21.064-.26-1.66-.072-.894 2.985-.822 4.116.034.194.19.335.369.343a286.758 286.758 0 0 0 17.196.122l.004-.004ZM254.603 8.86c5.078.06 16.301-.076 21.239.255.841 3.308-2.269 2.57-4.336 2.6-5.604.13-11.235.095-16.838-.106-.141-.91-.16-1.835-.061-2.749h-.004ZM241.667 1.656c-6.833-2.387-14.535 5.646-10.774 12.913 1.417 2.909 4.576 4.9 7.698 4.858 9.89.091 12.163-14.219 3.076-17.77Zm-10.088 12.502c-4.767-9.997 10.766-17.413 14.496-6.837 3.67 10.031-10.054 15.624-14.496 6.837Z" fill="#9B6238"/>
21+
<path d="M242.653 13.915c-5.669 6.974-13.263-2.87-6.559-8.292 5.28-3.803 10.263 3.255 6.559 8.292Z" fill="#3F4F45"/>
22+
<path d="M198.976 17.607c4.953-4.747 2.402-14.965-3.853-16.56-4.629-1.507-10.198 3.084-10.248 8.353-.202 5.291 4.013 10.522 8.745 10.507 1.96 0 3.925-.834 5.36-2.3h-.004Zm-5.981 1.413c-9.353-1.428-9.981-16.797.24-17.379 9.864.407 10.264 17.923-.24 17.379Z" fill="#9B6238"/>
23+
<path d="M195.466 5.296c7.58 4.271.773 14.79-5.691 9.03-4.679-4.652.312-11.703 5.691-9.03Z" fill="#3F4F45"/>
24+
<path d="M224.585 17.973c-.057-1.177.309-2.65-.201-3.685-2.304-.225-5.178-.077-7.504-.13.194 1.249-.94 3.731.99 3.644.518.022 6.712.224 6.715.17ZM207.363 14.166c.057 1.176-.316 2.66.209 3.685 2.387.22 5.193.076 7.599.13-.095-1.512.894-3.827-1.413-3.644-.536-.023-6.391-.224-6.391-.171h-.004ZM207.359 2.715c.057 1.176-.308 2.65.202 3.685 2.303.224 5.177.076 7.503.13-.194-1.25.94-3.732-.99-3.644-.517-.023-6.711-.225-6.715-.171ZM224.585 6.525c-.057-1.176.316-2.66-.209-3.685-2.387-.22-5.193-.076-7.599-.13.095 1.512-.894 3.827 1.413 3.644.536.023 6.391.225 6.391.171h.004Z" fill="#AD8F53"/>
25+
<path d="M220.843 12.57c1.081-.01 2.673.248 3.48-.487.811-.845.753-2.65.354-3.612-1.915-.651-4.108-.267-6.084-.411l-10.674-.065c-.13 0-.412 0-.617.213-.377.48-.472 4.214.259 4.245a171.147 171.147 0 0 0 13.278.122l.004-.004Zm-12.97-3.719c3.814.076 12.513-.064 16.21.255.521 3.08-1.062 2.658-3.263 2.608-4.294.13-8.607.095-12.901-.103a13.873 13.873 0 0 1-.046-2.756v-.004Z" fill="#9B6238"/>
26+
</svg>
27+
<div class="absolute inset-0 h-full bg-gradient-to-b from-slate-50 to-transparent"></div>
28+
<div class="relative">
29+
<cosna-logo-svg class="h-auto w-36"></cosna-logo-svg>
30+
</div>
31+
</div>
32+
<nav class="flex flex-col h-full pt-4 pb-8 space-y-8" aria-label="Sidebar">
33+
<div *ngFor="let menu of menus">
34+
<h5 class="px-6 font-mono text-xs font-semibold leading-5 tracking-widest uppercase text-slate-400 sm:px-8">{{ menu.group }}</h5>
35+
<div class="mt-3 space-y-1">
36+
<a *ngFor="let item of menu.items" href="#" [routerLink]="item.link" routerLinkActive="menu-current" class="menu group">
37+
<svg class="shrink-0 w-6 h-6 mr-3" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
38+
<path *ngFor="let path of item.svgPath" [attr.d]="path"/>
39+
</svg>
40+
<span class="truncate">{{ item.title }}</span>
41+
</a>
42+
</div>
43+
</div>
44+
</nav>
45+
</div>
46+
<button type="button" id="resizer" class="absolute items-center justify-center hidden text-sm leading-5 text-gray-400 transition duration-200 ease-in-out delay-150 bg-white border rounded-full shadow-lg group-hover:inline-flex border-slate-200 h-11 w-11 top-20 -right-5 hover:bg-slate-50/50">
47+
<svg class="w-6 h-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
48+
<path d="m14 10 7-7m0 0h-6m6 0v6m-11 5-7 7m0 0h6m-6 0v-6" />
49+
</svg>
50+
</button>
51+
</aside>

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
.menu {
2+
@apply flex items-center px-6 py-2 text-sm font-medium border-l-4 border-transparent text-slate-600 hover:text-slate-900;
3+
4+
svg {
5+
@apply text-slate-600 group-hover:text-slate-900;
6+
}
7+
8+
&-current {
9+
@apply text-primary-600 border-primary-600 hover:text-primary-600;
10+
11+
svg {
12+
@apply text-primary-600 group-hover:text-primary-600;
13+
}
14+
}
15+
}

‎src/app/shared/themes/components/sidebar/sidebar.component.spec.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { SidebarComponent } from './sidebar.component';
4+
5+
describe('SidebarComponent', () => {
6+
let component: SidebarComponent;
7+
let fixture: ComponentFixture<SidebarComponent>;
8+
9+
beforeEach(async () => {
10+
await TestBed.configureTestingModule({
11+
declarations: [ SidebarComponent ]
12+
})
13+
.compileComponents();
14+
});
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(SidebarComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { Component, Input, OnInit } from '@angular/core';
2+
3+
import { Menu } from '@app/shared/interfaces/menu';
4+
5+
@Component({
6+
selector: 'cosna-sidebar',
7+
templateUrl: './sidebar.component.html',
8+
styleUrls: ['./sidebar.component.scss']
9+
})
10+
export class SidebarComponent implements OnInit {
11+
@Input() menus?: Menu[];
12+
13+
constructor() {
14+
}
15+
16+
ngOnInit(): void {
17+
console.log(this.menus);
18+
}
19+
20+
isArray(value: string | []): boolean {
21+
return Array.isArray(value);
22+
}
23+
24+
}

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

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,38 @@
1-
<p>cpanel works!</p>
1+
<div class="flex h-screen overflow-hidden">
2+
<cosna-sidebar [menus]="menus"></cosna-sidebar>
3+
<div class="flex flex-col flex-1 w-0 bg-white" style="box-shadow: -2px 1px 5px 0 rgba(0, 0, 0, 0.9);">
4+
<div class="relative z-0 flex flex-col h-full overflow-hidden overflow-y-auto focus:ouline-none">
5+
<header class="p-6 border-b border-slate-200 sm:px-8">
6+
<div class="flex items-center justify-between">
7+
<div class="max-w-lg">
8+
<!-- SearchBar Component -->
9+
</div>
10+
<div class="flex items-center divide-x divide-slate-200">
11+
<a href="#" class="flex items-center pr-4 text-sm leading-5 text-slate-500 hover:text-slate-700">
12+
<svg class="w-6 h-6 mr-2 text-slate-400" stroke="currentColor" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
13+
<path d="M2.5 12h3.382c.685 0 1.312.387 1.618 1 .306.613.933 1 1.618 1h5.764c.685 0 1.312-.387 1.618-1 .306-.613.933-1 1.618-1H21.5M8.967 4h6.066c1.077 0 1.616 0 2.091.164a3 3 0 0 1 1.121.693c.36.352.6.833 1.082 1.796l2.166 4.333c.19.378.284.567.35.765.06.177.102.357.128.541.029.207.029.418.029.841V15.2c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C19.72 20 18.88 20 17.2 20H6.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C2 17.72 2 16.88 2 15.2v-2.067c0-.422 0-.634.029-.84.026-.184.068-.365.128-.541.066-.199.16-.388.35-.766l2.166-4.333c.482-.963.723-1.444 1.082-1.796a3 3 0 0 1 1.12-.693C7.352 4 7.89 4 8.968 4Z"/>
14+
</svg>
15+
Vous rencontrez un problème ?
16+
</a>
17+
<div class="flex items-center pl-4 space-x-2">
18+
<button type="button" class="inline-flex items-center p-1 text-sm leading-5 rounded-full hover:bg-slate-50 text-slate-500 hover:text-slate-900 focus:outline-none">
19+
<svg class="w-6 h-6" stroke="currentColor" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
20+
<path d="M9.354 21c.705.622 1.632 1 2.646 1s1.94-.378 2.646-1M18 8A6 6 0 1 0 6 8c0 3.09-.78 5.206-1.65 6.605-.735 1.18-1.102 1.771-1.089 1.936.015.182.054.252.2.36.133.099.732.099 1.928.099H18.61c1.196 0 1.795 0 1.927-.098.147-.11.186-.179.2-.361.014-.165-.353-.755-1.088-1.936C18.78 13.206 18 11.09 18 8Z"/>
21+
</svg>
22+
</button>
23+
<div class="relative">
24+
<button type="button" class="flex items-center text-sm rounded-full focus:outline-none" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
25+
<span class="sr-only">Open user menu</span>
26+
<img class="w-8 h-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
27+
</button>
28+
</div>
29+
</div>
30+
</div>
31+
</div>
32+
</header>
33+
<div class="flex flex-1 h-full px-6 lg:px-8">
34+
<router-outlet></router-outlet>
35+
</div>
36+
</div>
37+
</div>
38+
</div>

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
import { Component, OnInit } from '@angular/core';
22

3+
import { adminMenu } from '@modules/dashboard/navigation/admin.menu';
4+
35
@Component({
46
selector: 'cosna-cpanel-layout',
57
templateUrl: './cpanel.component.html',
68
})
79
export class CpanelComponent implements OnInit {
810

11+
menus = adminMenu;
12+
913
constructor() { }
1014

1115
ngOnInit(): void {

0 commit comments

Comments
 (0)