Added login page
This commit is contained in:
@@ -0,0 +1,113 @@
|
||||
:host {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.app-layout {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
nz-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #001529;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.header-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* --- LOGO + TITRE --- */
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
height: 40px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.logo h1 {
|
||||
margin: 0 0 0 10px;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
/* --- MENU PRINCIPAL --- */
|
||||
.top-nav {
|
||||
flex: 1;
|
||||
margin: 0 40px;
|
||||
line-height: 64px;
|
||||
background: #001529;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Couleur grise par défaut + effet blanc et zoom au survol */
|
||||
.top-nav li {
|
||||
transition: transform 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
.top-nav li a {
|
||||
color: #bfbfbf !important; /* gris clair par défaut */
|
||||
transition: transform 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
/* Au survol → zoom + blanc pur */
|
||||
.top-nav li:hover {
|
||||
transform: scale(1.08);
|
||||
background: transparent !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.top-nav li:hover a {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
/* Supprime toute coloration bleue ou fond par défaut NG-ZORRO */
|
||||
.top-nav li.ant-menu-item-active,
|
||||
.top-nav li.ant-menu-item-selected {
|
||||
background: transparent !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
/* --- ICONES DROITES --- */
|
||||
.right-icons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.right-icons app-modal-nav {
|
||||
transition: transform 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
.right-icons app-modal-nav:hover {
|
||||
color: #40a9ff;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
/* --- CONTENU --- */
|
||||
nz-content {
|
||||
padding: 24px 50px;
|
||||
}
|
||||
|
||||
.inner-content {
|
||||
padding: 24px;
|
||||
background: #fff;
|
||||
height: 100%;
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
<nz-layout class="app-layout">
|
||||
<nz-header>
|
||||
<div class="header-container">
|
||||
<!-- LOGO -->
|
||||
<div class="logo">
|
||||
<a routerLink="/dashboard">
|
||||
<img
|
||||
src="https://www.pyro-fetes.com/wp-content/themes/pcptheme/img/logo-pyro-fetes-OR-top.png"
|
||||
alt="logo"
|
||||
style="width: 100px; height: auto"
|
||||
/>
|
||||
<h1 class="text-amber-300">PYRO FÊTES</h1>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- MENU PRINCIPAL -->
|
||||
<ul nz-menu class="top-nav" nzTheme="dark" nzMode="horizontal">
|
||||
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
||||
<a routerLink="/stock">
|
||||
<nz-icon nzType="stock"></nz-icon>
|
||||
<span>Stock</span>
|
||||
</a>
|
||||
</li>
|
||||
<li nz-submenu nzTitle="Partenaires" nzIcon="team">
|
||||
<ul>
|
||||
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
||||
<a routerLink="/supplier">
|
||||
<nz-icon nzType="shop"></nz-icon>
|
||||
<span>Fournisseurs</span>
|
||||
</a>
|
||||
</li>
|
||||
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
||||
<a routerLink="/deliverer">
|
||||
<nz-icon nzType="car"></nz-icon>
|
||||
<span>Livreurs</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li nz-submenu nzTitle="Recettes" nzIcon="euro-circle">
|
||||
<ul>
|
||||
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
||||
<a routerLink="/quotation">
|
||||
<nz-icon nzType="file"></nz-icon>
|
||||
<span>Devis</span>
|
||||
</a>
|
||||
</li>
|
||||
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
||||
<a routerLink="/purchase-order">
|
||||
<nz-icon nzType="file"></nz-icon>
|
||||
<span>Bon de commande</span>
|
||||
</a>
|
||||
</li>
|
||||
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
||||
<a routerLink="/delivery-note">
|
||||
<nz-icon nzType="file"></nz-icon>
|
||||
<span>Bon de livraison</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
||||
<a routerLink="/user">
|
||||
<nz-icon nzType="user"></nz-icon>
|
||||
<span>Utilisateur</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- ICONES À DROITE -->
|
||||
<div class="right-icons">
|
||||
<app-modal-nav nameIcon="user" name="Profil">
|
||||
<app-profil></app-profil>
|
||||
</app-modal-nav>
|
||||
<app-modal-nav nameIcon="setting" name="Paramètres">
|
||||
<app-setting-form></app-setting-form>
|
||||
</app-modal-nav>
|
||||
</div>
|
||||
</div>
|
||||
</nz-header>
|
||||
|
||||
<nz-content>
|
||||
<div class="inner-content overflow-auto">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
</nz-content>
|
||||
</nz-layout>
|
||||
@@ -0,0 +1,32 @@
|
||||
import {Component} from '@angular/core';
|
||||
import {ModalNav} from "../modal-nav/modal-nav";
|
||||
import {NzContentComponent, NzHeaderComponent, NzLayoutComponent} from "ng-zorro-antd/layout";
|
||||
import {NzIconDirective} from "ng-zorro-antd/icon";
|
||||
import {NzMenuDirective, NzMenuItemComponent, NzSubMenuComponent} from "ng-zorro-antd/menu";
|
||||
import {Profil} from "../profil/profil";
|
||||
import {RouterLink, RouterLinkActive, RouterOutlet} from "@angular/router";
|
||||
import {SettingForm} from "../setting-form/setting-form";
|
||||
|
||||
@Component({
|
||||
selector: 'app-layout',
|
||||
imports: [
|
||||
ModalNav,
|
||||
NzContentComponent,
|
||||
NzHeaderComponent,
|
||||
NzIconDirective,
|
||||
NzLayoutComponent,
|
||||
NzMenuDirective,
|
||||
NzMenuItemComponent,
|
||||
NzSubMenuComponent,
|
||||
Profil,
|
||||
RouterLink,
|
||||
RouterLinkActive,
|
||||
RouterOutlet,
|
||||
SettingForm
|
||||
],
|
||||
templateUrl: './layout.html',
|
||||
styleUrl: './layout.css',
|
||||
})
|
||||
export class Layout {
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user