diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 81d4c9a1a891d93983a0c08eaf04270d6f391854..7921148a45f3c02999d0f4ca5c21e7757c01dd0b 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -26,6 +26,7 @@ import { DeactivateGuard } from './guards/deactivate.guard';
import { ResetPasswordTokenGuard } from './guards/resetPasswordToken.guard';
import { RoleGuard } from './guards/role.guard';
import { HeaderComponent } from './header/header.component';
+import { NotificationsComponent } from './header/notifications/notifications.component';
import { LegalNoticeComponent } from './legal-notice/legal-notice.component';
import { LoginComponent } from './login/login.component';
import { MapModule } from './map/map.module';
@@ -49,6 +50,7 @@ import { StructureJoinComponent } from './structure/structure-join/structure-joi
declarations: [
AppComponent,
HeaderComponent,
+ NotificationsComponent,
FooterComponent,
StructureDetailsComponent,
LegalNoticeComponent,
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index b1a5a0f3460be0325a42699bed37d9cc1f68d281..e5c890298cebf1cb59cfbce55dc11f008779faaa 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -1,6 +1,6 @@
<header class="hide-on-print">
<nav aria-label="Site">
- <div class="containerIconMenu">
+ <div class="containerIconMenu hide-on-desktop">
<app-svg-icon
[asButton]="true"
[ariaLabel]="'Ouvrir le menu'"
@@ -28,16 +28,7 @@
alt
/>
</div>
- <div class="containerIconMenu profile">
- <app-svg-icon
- [asButton]="true"
- [ariaLabel]="isLoggedIn ? 'Ouvrir le menu Mon compte' : 'Se connecter'"
- [folder]="'ico'"
- [icon]="'profile'"
- [iconClass]="'icon-32'"
- (action)="clickProfileButton()"
- />
- </div>
+ <app-notifications *ngIf="isLoggedIn" class="hide-on-desktop" />
<div class="rightHeader">
<div class="menuItems" role="menu">
<a
@@ -111,19 +102,23 @@
Administration
</a>
</div>
- <app-button
+ <app-notifications *ngIf="isLoggedIn" class="hide-on-mobile" />
+ <button
*ngIf="isLoggedIn"
+ type="button"
class="connected"
ariaLabel="Ouvrir le menu Mon compte - {{ displayName }}"
- [variant]="'primary'"
- [label]="displayName"
- [size]="'small'"
- (action)="clickProfileButton()"
- />
+ (click)="clickProfileButton()"
+ >
+ <app-svg-icon [iconClass]="'icon-32'" [folder]="'avatar'" [icon]="avatar || 'avatar1'" />
+ <span>{{ displayName }}</span>
+ </button>
+
<app-button
*ngIf="!isLoggedIn"
+ class="login"
ariaLabel="Se connecter"
- [variant]="'primaryBlack'"
+ [variant]="'secondary'"
[label]="'Se connecter'"
[size]="'small'"
(action)="clickProfileButton()"
@@ -132,7 +127,7 @@
</nav>
</header>
-<div *ngIf="showMenu" role="menu" class="mobileMenu" [@slideInOut]>
+<div *ngIf="showMenu" role="menu" class="mobileMenu" cdkTrapFocus [@slideInOut]>
<div class="menuContent">
<div class="title">
<span>Menu</span>
@@ -143,8 +138,31 @@
role="button"
(click)="closeMenu()"
(keyup.enter)="closeMenu()"
- ></div>
+ >
+ <app-svg-icon [iconClass]="'icon-28'" [folder]="'ico'" [icon]="'cross'" />
+ </div>
+ </div>
+
+ <div *ngIf="!isLoggedIn" class="connexion">
+ <app-button [variant]="'primaryBlack'" [label]="'Se connecter'" [size]="'small'" (action)="goToLoginPage()" />
+ <app-button
+ [variant]="'tertiary'"
+ [label]="'Se créer un compte'"
+ [size]="'small'"
+ (action)="goToAccountCreation()"
+ />
+ </div>
+
+ <div *ngIf="isLoggedIn" class="profileInformation menu">
+ <app-svg-icon alt="" [folder]="'avatar'" [icon]="avatar || 'avatar1'" [iconClass]="'icon-32'" />
+ <span class="profileDetails">
+ <span class="name">{{ displayFullName }}</span>
+ <span class="job">{{ displayJobAndEmployer }}</span>
+ </span>
</div>
+
+ <app-profile-nav *ngIf="isLoggedIn" [location]="'mobile-menu'" (click)="closeMenu()" />
+
<div class="links">
<a
routerLink="/actualites"
@@ -250,6 +268,10 @@
>Contact</a
>
</div>
+
+ <div *ngIf="isLoggedIn" class="profileButton menu">
+ <app-button [variant]="'tertiary'" [label]="'Se déconnecter'" [size]="'small'" (action)="logout()" />
+ </div>
</div>
<div
class="outside"
@@ -261,27 +283,50 @@
></div>
</div>
-<div *ngIf="showProfileMenu && isLoggedIn" class="profileModal" role="menu" cdkTrapFocus [@toggle]>
- <div
- class="overlay"
- tabindex="0"
- role="button"
- aria-label="Fermer le menu Mon compte"
- (click)="closeProfileMenu()"
- (keyup.enter)="closeProfileMenu()"
- >
- <div class="overlay-header"></div>
- <div class="overlay-content" [@fadeInOut]></div>
+<div
+ *ngIf="showProfileMenu && isLoggedIn"
+ class="profileModal"
+ role="menu"
+ cdkTrapFocus
+ tabindex="-1"
+ [cdkTrapFocusAutoCapture]="true"
+ [@toggle]
+ (click)="closeProfileMenu()"
+ (keyup)="(0)"
+>
+ <div *ngIf="showProfileMenu && isLoggedIn" class="profileModal" role="menu">
+ <div
+ class="overlay"
+ tabindex="-1"
+ role="button"
+ aria-label="Fermer le menu Mon compte"
+ (click)="closeProfileMenu()"
+ (keyup.enter)="closeProfileMenu()"
+ ></div>
</div>
<div class="profileMenu" [@fadeInOut]>
<div class="profileInformation">
<app-svg-icon alt="" [folder]="'avatar'" [icon]="avatar || 'avatar1'" [iconClass]="'icon-40'" />
- <span class="name">{{ displayFullName }}</span>
+ <span class="profileDetails">
+ <span class="name">{{ displayFullName }}</span>
+ <span class="job">{{ displayJobAndEmployer }}</span>
+ </span>
+ </div>
+ <div class="profileLinks">
+ <app-profile-nav [isPublic]="false" [location]="'header'" (onLinkClick)="closeProfileMenu()" />
</div>
- <div class="profileMenuButtons">
- <app-button [variant]="'primaryBlack'" [label]="'Voir mon compte'" [size]="'small'" (action)="goToProfile()" />
- <app-button [variant]="'secondary'" [label]="'Se déconnecter'" [size]="'small'" (action)="logout()" />
+ <div class="profileButton">
+ <app-button [variant]="'tertiary'" [label]="'Se déconnecter'" [size]="'small'" (action)="logout()" />
</div>
+ <a
+ tabindex="0"
+ class="visually-hidden"
+ role="menuitem"
+ (click)="showProfileMenu = false"
+ (keyup.enter)="showProfileMenu = false"
+ >
+ Fermer le menu Mon compte
+ </a>
</div>
</div>
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
index 927939a3412393fc878bcdbc6afbc4f2b540b42d..b06e1a475bc4922cbab1ae51f8e3474e9cd54568 100644
--- a/src/app/header/header.component.scss
+++ b/src/app/header/header.component.scss
@@ -38,8 +38,38 @@ header > nav {
gap: 3vw;
}
}
- .connected {
- box-shadow: 0px 4px 8px 0px $red-20;
+
+ .login {
+ ::ng-deep button.secondary {
+ border-radius: 24px;
+ border: 1px solid $grey-4;
+ width: 130px;
+ height: 40px;
+ }
+ }
+
+ button.connected {
+ display: flex;
+ align-items: center;
+ min-width: fit-content;
+ max-width: 150px;
+ padding: 4px 8px 4px 4px;
+ gap: 8px;
+ border-radius: 24px;
+ border: 1px solid $grey-8;
+ background: $grey-10;
+ box-shadow: $box-shadow;
+ overflow: hidden;
+ cursor: pointer;
+ app-svg-icon {
+ flex-shrink: 0;
+ }
+ span {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ min-width: 0;
+ max-width: 100px;
+ }
}
}
@@ -62,6 +92,7 @@ a {
color: $grey-2;
height: 100%;
align-content: center;
+ text-align: center;
// "display: grid;" : aligns menu link items vertically in Firefox 115 (current metropole version) without affecting any other style/layout. Can be removed when Firefox is upgraded.
display: grid;
&:hover {
@@ -73,6 +104,9 @@ a {
color: $grey-1;
border-bottom: 3px solid $red;
text-decoration: none;
+ @media #{$tablet} {
+ border-bottom-width: 1px;
+ }
}
&::before {
display: block;
@@ -89,20 +123,6 @@ a {
}
}
-.containerIconMenu {
- &.profile {
- border-radius: 50%;
- box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.12);
- ::ng-deep div {
- height: 32px;
- }
- }
- display: none;
- @media #{$tablet} {
- display: block;
- }
-}
-
.mobileMenu {
display: flex;
position: fixed;
@@ -116,11 +136,14 @@ a {
.menuContent {
overflow-y: scroll;
max-width: 80vw;
+ background-color: $white;
+ width: 280px;
.title {
- margin-bottom: 35px;
display: flex;
+ padding: calc($header-height + 16px) 16px 16px;
justify-content: space-between;
- @include font-regular-26;
+ align-items: center;
+ @include font-regular-24;
span {
color: $grey-2;
}
@@ -129,17 +152,18 @@ a {
.links {
display: flex;
flex-direction: column;
- gap: 2rem;
align-items: flex-start;
+ padding: 16px;
+ border-top: 1px solid $grey-7;
+ a {
+ text-decoration: none;
+ padding: 8px 0;
+ }
}
-
- background-color: $white;
- width: 350px;
- padding: 27px 25px;
}
.outside {
position: absolute;
- left: 350px;
+ left: 280px;
width: 100vw;
height: 100vh;
}
@@ -154,49 +178,82 @@ a {
flex-direction: column;
.overlay-header {
height: $header-height;
- background-color: $modal-background-transparent;
}
.overlay-content {
flex-grow: 1;
- background-color: $modal-background;
}
}
-
.profileMenu {
position: absolute;
top: 8 + $header-height;
z-index: $modal-z-index;
- right: 8px;
- width: 184px;
+ right: 16px;
+ width: 300px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
- gap: 1.5rem;
- padding: 1rem;
background: $white;
border-radius: 8px;
box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.35);
-
- .profileInformation {
- display: flex;
- align-items: center;
- gap: 12px;
- .name {
- @include font-bold-16;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- overflow: hidden;
- }
+ div {
+ padding: 12px 20px;
+ border-top: 1px solid $grey-7;
+ box-sizing: border-box;
+ }
+ .profileLinks {
+ padding: 16px 20px;
+ width: 100%;
}
+ }
+}
- .profileMenuButtons {
- display: inline-flex;
- flex-direction: column;
- margin: auto;
- gap: 12px;
+.connexion {
+ display: flex;
+ flex-direction: column;
+ border-top: 1px solid $grey-7;
+ gap: 16px;
+ padding: 16px 0;
+ width: 100%;
+ align-items: center;
+}
+
+.profileInformation {
+ display: flex;
+ align-items: center;
+ box-sizing: border-box;
+ gap: 16px;
+ width: 100%;
+ max-width: 100%;
+ padding: 12px 20px;
+ &.menu {
+ border-top: 1px solid $grey-7;
+ }
+ .profileDetails {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ .name {
+ @include font-bold-16;
+ overflow: hidden;
}
+ .job {
+ @include font-regular-12;
+ color: $grey-4-5-1;
+ overflow: hidden;
+ }
+ }
+}
+.profileButton {
+ display: inline-flex;
+ flex-direction: column;
+ gap: 12px;
+ width: 100%;
+ align-items: center;
+ &.menu {
+ border-top: 1px solid $grey-7;
+ padding: 12px 20px;
+ box-sizing: border-box;
}
}
@@ -228,8 +285,35 @@ a {
}
}
+.visually-hidden {
+ clip-path: inset(100%);
+ clip: rect(0 0 0 0);
+ height: 1px;
+ width: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+}
+
@media print {
.hide-on-print {
display: none !important;
}
}
+
+// styles for header between tablet and desktop size with long menu
+@media only screen and (min-width: #{$width-tablet}) and (max-width: #{$width-desktop}) {
+ header > nav {
+ padding: 0 1rem;
+ .rightHeader {
+ gap: 2vw;
+ .menuItems {
+ gap: 2vw;
+ }
+ }
+ }
+ .logo {
+ margin-right: 40px;
+ }
+}
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
index 0fd0155008a2d2c534ffb59e451d213fbdd55c63..93af4da0e1e8e15a48d3fbaa6b424a5dea48b97b 100644
--- a/src/app/header/header.component.ts
+++ b/src/app/header/header.component.ts
@@ -60,10 +60,6 @@ export class HeaderComponent {
this.closeMenu();
this.router.navigateByUrl('/home');
}
- public goToProfile(): void {
- this.showProfileMenu = false;
- this.router.navigateByUrl('/profil');
- }
public toggleMenu(): void {
this.showMenu = !this.showMenu;
@@ -114,6 +110,11 @@ export class HeaderComponent {
}
public goToLoginPage(): void {
this.router.navigateByUrl('connexion');
+ this.closeMenu();
+ }
+ public goToAccountCreation(): void {
+ this.router.navigateByUrl('formulaire/creation-compte');
+ this.closeMenu();
}
public get isAdmin(): boolean {
return this.profileService.isAdmin();
@@ -127,6 +128,10 @@ export class HeaderComponent {
return this.authService.getUserFullNameDisplay();
}
+ public get displayJobAndEmployer(): string {
+ return this.authService.getJobAndEmployer();
+ }
+
public get avatar(): string {
return this.authService.getUserAvatar();
}
diff --git a/src/app/header/notifications/notifications.component.html b/src/app/header/notifications/notifications.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..bec37e6f9796f32d9223ca6ebb8b10e390c701b2
--- /dev/null
+++ b/src/app/header/notifications/notifications.component.html
@@ -0,0 +1,5 @@
+<div class="notifications">
+ <a aria-label="notifications" role="menuitem" [routerLink]="'/profil/tableau-de-bord/'">
+ <app-svg-icon [iconClass]="'icon-24'" [folder]="'ico'" [icon]="'notification'" />
+ </a>
+</div>
diff --git a/src/app/header/notifications/notifications.component.scss b/src/app/header/notifications/notifications.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b631572ce12c8d2f4ebddd91c25b7c480d2787d7
--- /dev/null
+++ b/src/app/header/notifications/notifications.component.scss
@@ -0,0 +1,23 @@
+@import 'typography';
+@import 'layout';
+@import 'color';
+@import 'breakpoint';
+@import 'z-index';
+
+.notifications {
+ width: 32px;
+ height: 32px;
+ border: 1px solid transparent;
+ place-content: center;
+ a {
+ place-content: center;
+ display: flex;
+ }
+ &:hover {
+ border-radius: 4px;
+ border: 1px solid $grey-3;
+ }
+ &:active {
+ background-color: $grey-8;
+ }
+}
diff --git a/src/app/header/notifications/notifications.component.ts b/src/app/header/notifications/notifications.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..78b7db0e8aca56233d451facd12ecfd92082120a
--- /dev/null
+++ b/src/app/header/notifications/notifications.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-notifications',
+ templateUrl: './notifications.component.html',
+ styleUrls: ['./notifications.component.scss'],
+})
+export class NotificationsComponent {}
diff --git a/src/app/models/user-auth.model.ts b/src/app/models/user-auth.model.ts
index f705eddfa391099c1ce487eed2d03dd66a0d5f08..d11044b4a786944ac04f6e1969db9aa26c43b534 100644
--- a/src/app/models/user-auth.model.ts
+++ b/src/app/models/user-auth.model.ts
@@ -1,7 +1,12 @@
+import { Employer } from './employer.model';
+import { Job } from './job.model';
+
export class UserAuth {
username: string;
name: string;
surname: string;
+ job?: Job;
+ employer?: Employer;
avatar?: string;
accessToken: string;
expiresAt: string;
diff --git a/src/app/profile/my-structures/my-structures.component.scss b/src/app/profile/my-structures/my-structures.component.scss
index a64517e24a922bd0742ea679a711bedd96c37532..105a1936944becfdec119a9fb3f3b3ce7b264076 100644
--- a/src/app/profile/my-structures/my-structures.component.scss
+++ b/src/app/profile/my-structures/my-structures.component.scss
@@ -17,7 +17,7 @@
padding: 32px 48px;
gap: 32px;
width: 100%;
- max-width: 980px;
+ max-width: 1030px;
@media #{$tablet} {
padding: 24px;
}
@@ -41,7 +41,7 @@
section {
width: 100%;
- max-width: 980px;
+ max-width: 1030px;
display: flex;
gap: 2em;
flex-direction: column;
diff --git a/src/app/profile/profile-nav/profile-nav.component.html b/src/app/profile/profile-nav/profile-nav.component.html
index 291ac9c0a138a913ee96f812b143d1f362270154..6701af42fdbe6df8078e9b8cf581b13c49beaa09 100644
--- a/src/app/profile/profile-nav/profile-nav.component.html
+++ b/src/app/profile/profile-nav/profile-nav.component.html
@@ -1,4 +1,4 @@
-<nav *ngIf="!isPublic" class="hide-on-mobile">
+<nav *ngIf="!isPublic" [ngClass]="location">
<a routerLinkActive="selected" role="menuitem" [routerLink]="'/profil/tableau-de-bord'">
<app-svg-icon [iconClass]="'icon-16'" [folder]="'ico'" [icon]="'dashboard'" />
Tableau de bord
@@ -7,7 +7,7 @@
role="menuitem"
routerLinkActive="selected"
[routerLink]="'/profil/mes-structures'"
- [ngPlural]="userProfile.structuresLink.length + this.userProfile.pendingStructuresLink.length"
+ [ngPlural]="totalStructuresCount"
>
<app-svg-icon [iconClass]="'icon-16'" [folder]="'ico'" [icon]="'myStructures'" />
<ng-template ngPluralCase="1">Ma structure</ng-template>
diff --git a/src/app/profile/profile-nav/profile-nav.component.scss b/src/app/profile/profile-nav/profile-nav.component.scss
index f3ad718da4c7e6ccaee4b12103c6a90ea3b52fe6..34288c7e6dada325d24f37daf1ff484ddcad9cba 100644
--- a/src/app/profile/profile-nav/profile-nav.component.scss
+++ b/src/app/profile/profile-nav/profile-nav.component.scss
@@ -4,9 +4,6 @@
@import 'layout';
nav {
- position: sticky;
- top: 0;
- overflow-y: auto;
display: flex;
flex-direction: column;
align-self: stretch;
@@ -17,6 +14,9 @@ nav {
padding: 32px;
gap: 16px;
border-right: 1px solid $grey-7;
+ @media #{$tablet} {
+ display: none;
+ }
a {
display: flex;
padding: 4px 12px;
@@ -30,6 +30,7 @@ nav {
background: $grey-8;
border-radius: 4px;
color: $grey-1;
+ font-weight: bold;
}
&.selected {
background: $grey-7;
@@ -38,4 +39,49 @@ nav {
font-weight: bold;
}
}
+
+ // location : header
+ &.header {
+ padding: 0;
+ height: fit-content;
+ border: none;
+ width: 100%;
+ @media #{$tablet} {
+ display: flex;
+ }
+ a {
+ @include font-regular-14;
+ padding: 0 12px;
+ &.selected {
+ font-weight: bold;
+ }
+ &:hover {
+ background: $grey-8;
+ border-radius: 4px;
+ color: $grey-1;
+ font-weight: bold;
+ }
+ }
+ }
+
+ // location : mobile menu
+ &.mobile-menu {
+ padding: 16px;
+ height: fit-content;
+ border: none;
+ gap: 8px;
+ width: 100%;
+ border-top: 1px solid $grey-9;
+ @media #{$tablet} {
+ display: flex;
+ }
+ a {
+ @include font-regular-14;
+ color: $grey-1;
+ padding: 0 12px;
+ app-svg-icon {
+ display: none;
+ }
+ }
+ }
}
diff --git a/src/app/profile/profile-nav/profile-nav.component.ts b/src/app/profile/profile-nav/profile-nav.component.ts
index 1fa54a10240e2a15b6ada7028936d8e2c9acef86..9bd25ff9bfba16f566fa4589692f3c90a70d5e93 100644
--- a/src/app/profile/profile-nav/profile-nav.component.ts
+++ b/src/app/profile/profile-nav/profile-nav.component.ts
@@ -11,6 +11,7 @@ import { ProfileService } from '../services/profile.service';
})
export class ProfileNavComponent implements OnInit {
@Input() isPublic!: boolean;
+ @Input() location?: string;
public userProfile: User;
@@ -24,4 +25,8 @@ export class ProfileNavComponent implements OnInit {
this.userProfile = new User(profile);
});
}
+
+ get totalStructuresCount(): number {
+ return (this.userProfile?.structuresLink?.length ?? 0) + (this.userProfile?.pendingStructuresLink?.length ?? 0);
+ }
}
diff --git a/src/app/profile/profile.component.scss b/src/app/profile/profile.component.scss
index bde3668b68742920dffa4360ebea89d558c38050..a9fa40e105fc6706cbe3f9fbb4eb280eb3236d00 100644
--- a/src/app/profile/profile.component.scss
+++ b/src/app/profile/profile.component.scss
@@ -16,7 +16,7 @@
&.public {
display: flex;
flex-direction: column;
- max-width: 980px;
+ max-width: 1030px;
margin: 0 auto;
section {
@@ -40,7 +40,7 @@
}
.goBack {
- max-width: 980px;
+ max-width: 1030px;
width: 100%;
padding: 32px 0 0 48px;
}
@@ -52,7 +52,7 @@
padding: 32px 48px;
gap: 32px;
width: 100%;
- max-width: 980px;
+ max-width: 1030px;
@media #{$tablet} {
padding: 24px;
}
@@ -84,7 +84,7 @@
box-sizing: border-box;
border-radius: 8px;
border: 1px solid $grey-6;
- max-width: 980px;
+ max-width: 1030px;
@media #{$phone} {
padding: 32px 0 0;
border: none;
diff --git a/src/app/profile/profile.module.ts b/src/app/profile/profile.module.ts
index ed6a4b2acf0e2f4dd84bae0d24da3d5b63e88265..aa90cf489b33d651e13cab5b2e1c6e525e3b7905 100644
--- a/src/app/profile/profile.module.ts
+++ b/src/app/profile/profile.module.ts
@@ -6,7 +6,6 @@ import { DashboardComponent } from './dashboard/dashboard.component';
import { EditComponent } from './edit/edit.component';
import { MyStructuresComponent } from './my-structures/my-structures.component';
import { PersonalOfferEditionComponent } from './personal-offer-edition/personal-offer-edition.component';
-import { ProfileNavComponent } from './profile-nav/profile-nav.component';
import { ProfileNewsletterComponent } from './profile-newsletter/profile-newsletter.component';
import { ProfileRoutingModule } from './profile-routing.module';
import { PersonalOfferComponent } from './profile-structure/personal-offer/personal-offer.component';
@@ -32,7 +31,6 @@ import { StructuresManagementComponent } from './structures-management/structure
StructuresManagementComponent,
PersonalOfferComponent,
PersonalOfferEditionComponent,
- ProfileNavComponent,
ProfileNewsletterComponent,
ResetEmailComponent,
MyStructuresComponent,
diff --git a/src/app/services/auth.service.ts b/src/app/services/auth.service.ts
index 4e007021eb975de1368d27c1ad10582c5a68778e..001e2db14ee3b2848e526eb70e99ef789560d854 100644
--- a/src/app/services/auth.service.ts
+++ b/src/app/services/auth.service.ts
@@ -72,6 +72,12 @@ export class AuthService {
return `${this.userValue.username}`;
}
+ public getJobAndEmployer(): string {
+ const job = this.userValue.job?.name || '';
+ const employer = this.userValue.employer?.name || '';
+ return [job, employer].filter(Boolean).join(', ');
+ }
+
public getUserAvatar(): string {
return this.userValue.avatar;
}
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 741c7c8ef467ab3fe6983f052308df37ebb9e1f9..82d6015991d0654ef6890a74ec7fb47d98624c89 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
+import { ProfileNavComponent } from '../profile/profile-nav/profile-nav.component';
import { SharedComponents } from './components';
import { AddressAutocompleteComponent } from './components/address-autocomplete/address-autocomplete.component';
import { AppointmentChoiceComponent } from './components/appointment-choice/appointment-choice.component';
@@ -31,6 +32,7 @@ import { SharedPipes } from './pipes';
RadioOptionComponent,
SelectOrCreateComponent,
YesNoComponent,
+ ProfileNavComponent,
],
exports: [
...SharedPipes,
@@ -40,6 +42,7 @@ import { SharedPipes } from './pipes';
RouterModule,
FormsModule,
ReactiveFormsModule,
+ ProfileNavComponent,
],
})
export class SharedModule {}
diff --git a/src/assets/ico/sprite.svg b/src/assets/ico/sprite.svg
index fdb6874d1a0d7dcada03d758d967ea870b0f991e..876a1ff9fe0aa408f5257379976f6bee7d4a5ea9 100644
--- a/src/assets/ico/sprite.svg
+++ b/src/assets/ico/sprite.svg
@@ -417,6 +417,10 @@
<path d="M8.0026 1.33398C4.3226 1.33398 1.33594 4.32065 1.33594 8.00065C1.33594 11.6807 4.3226 14.6673 8.0026 14.6673C11.6826 14.6673 14.6693 11.6807 14.6693 8.00065C14.6693 4.32065 11.6826 1.33398 8.0026 1.33398ZM8.0026 3.33398C9.10927 3.33398 10.0026 4.22732 10.0026 5.33398C10.0026 6.44065 9.10927 7.33398 8.0026 7.33398C6.89594 7.33398 6.0026 6.44065 6.0026 5.33398C6.0026 4.22732 6.89594 3.33398 8.0026 3.33398ZM8.0026 12.8007C6.33594 12.8007 4.8626 11.9473 4.0026 10.654C4.0226 9.32732 6.66927 8.60065 8.0026 8.60065C9.32927 8.60065 11.9826 9.32732 12.0026 10.654C11.1426 11.9473 9.66927 12.8007 8.0026 12.8007Z" fill="#333333"/>
</symbol>
+ <symbol id="notification" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+ <path d="M12 22C13.1 22 14 21.1 14 20H10C10 21.1 10.9 22 12 22ZM18 16V11C18 7.93 16.37 5.36 13.5 4.68V4C13.5 3.17 12.83 2.5 12 2.5C11.17 2.5 10.5 3.17 10.5 4V4.68C7.64 5.36 6 7.92 6 11V16L4 18V19H20V18L18 16ZM16 17H8V11C8 8.52 9.51 6.5 12 6.5C14.49 6.5 16 8.52 16 11V17Z" fill="#949494"/>
+ </symbol>
+
<symbol id="openInNew" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 12.6667H4C3.63333 12.6667 3.33333 12.3667 3.33333 12V4C3.33333 3.63333 3.63333 3.33333 4 3.33333H7.33333C7.7 3.33333 8 3.03333 8 2.66667C8 2.3 7.7 2 7.33333 2H3.33333C2.59333 2 2 2.6 2 3.33333V12.6667C2 13.4 2.6 14 3.33333 14H12.6667C13.4 14 14 13.4 14 12.6667V8.66667C14 8.3 13.7 8 13.3333 8C12.9667 8 12.6667 8.3 12.6667 8.66667V12C12.6667 12.3667 12.3667 12.6667 12 12.6667ZM9.33333 2.66667C9.33333 3.03333 9.63333 3.33333 10 3.33333H11.7267L5.64 9.42C5.38 9.68 5.38 10.1 5.64 10.36C5.9 10.62 6.32 10.62 6.58 10.36L12.6667 4.27333V6C12.6667 6.36667 12.9667 6.66667 13.3333 6.66667C13.7 6.66667 14 6.36667 14 6V2.66667C14 2.3 13.7 2 13.3333 2H10C9.63333 2 9.33333 2.3 9.33333 2.66667Z" fill="#333333"/>
</symbol>