535 lines
23 KiB
HTML
535 lines
23 KiB
HTML
@if (profile != undefined) {
|
|
<section
|
|
class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800"
|
|
>
|
|
<div class="container mx-auto px-4 py-6 md:py-12">
|
|
<div class="max-w-7xl mx-auto">
|
|
<!-- Header avec bannière -->
|
|
<div class="relative rounded-2xl overflow-hidden shadow-xl mb-8 animate-fade-in">
|
|
<div class="h-48 md:h-64 bg-cover bg-center bg-auth relative">
|
|
<!-- Overlay -->
|
|
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/30"></div>
|
|
|
|
<!-- Navigation -->
|
|
<div class="relative z-10 p-4 flex justify-between items-start">
|
|
<!-- Bouton retour -->
|
|
<button
|
|
(click)="location.back()"
|
|
class="group flex items-center justify-center w-10 h-10 md:w-12 md:h-12 bg-white/20 backdrop-blur-md rounded-full hover:bg-white/30 transition-all duration-300 hover:scale-110"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="currentColor"
|
|
class="w-6 h-6 text-white group-hover:-translate-x-1 transition-transform"
|
|
>
|
|
<title>Retour</title>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-4.28 9.22a.75.75 0 0 0 0 1.06l3 3a.75.75 0 1 0 1.06-1.06l-1.72-1.72h5.69a.75.75 0 0 0 0-1.5h-5.69l1.72-1.72a.75.75 0 0 0-1.06-1.06l-3 3Z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Badge vérifié -->
|
|
@if (profile().estVerifier) {
|
|
<div
|
|
class="flex items-center gap-2 bg-purple-500/20 backdrop-blur-md px-3 py-2 rounded-full animate-pulse-slow"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="currentColor"
|
|
class="w-5 h-5 md:w-6 md:h-6 text-purple-300"
|
|
>
|
|
<title>Profil vérifié</title>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M8.603 3.799A4.49 4.49 0 0 1 12 2.25c1.357 0 2.573.6 3.397 1.549a4.49 4.49 0 0 1 3.498 1.307 4.491 4.491 0 0 1 1.307 3.497A4.49 4.49 0 0 1 21.75 12a4.49 4.49 0 0 1-1.549 3.397 4.491 4.491 0 0 1-1.307 3.497 4.491 4.491 0 0 1-3.497 1.307A4.49 4.49 0 0 1 12 21.75a4.49 4.49 0 0 1-3.397-1.549 4.49 4.49 0 0 1-3.498-1.306 4.491 4.491 0 0 1-1.307-3.498A4.49 4.49 0 0 1 2.25 12c0-1.357.6-2.573 1.549-3.397a4.49 4.49 0 0 1 1.307-3.497 4.49 4.49 0 0 1 3.497-1.307Zm7.007 6.387a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
<span class="text-white text-sm font-medium hidden md:inline">Vérifié</span>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Avatar et info principale -->
|
|
<div class="relative -mt-16 md:-mt-22 px-4 md:px-8 pb-6">
|
|
<div class="flex flex-col md:flex-row items-center md:items-end gap-4 md:gap-6">
|
|
<!-- Avatar avec indicateur de visibilité -->
|
|
@if (user() != undefined) {
|
|
<div class="relative group animate-slide-up">
|
|
<div
|
|
class="w-28 h-28 md:w-36 md:h-36 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 p-1 shadow-2xl group-hover:scale-105 transition-transform duration-300"
|
|
>
|
|
<div class="w-full h-full rounded-full overflow-hidden bg-white">
|
|
@if (user()!.avatar) {
|
|
<img
|
|
alt="{{ user()!.name }}"
|
|
class="object-cover w-full h-full"
|
|
src="{{ environment.baseUrl }}/api/files/users/{{ user()!.id }}/{{
|
|
user()!.avatar
|
|
}}"
|
|
/>
|
|
} @else {
|
|
<img
|
|
alt="{{ user()!.name }}"
|
|
class="object-cover w-full h-full"
|
|
src="https://api.dicebear.com/9.x/initials/svg?seed={{
|
|
user().name
|
|
? user().name
|
|
: user().username
|
|
? user().username
|
|
: user().email
|
|
}}"
|
|
/>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Badge de visibilité sous l'avatar -->
|
|
<div class="absolute -bottom-2 left-1/2 -translate-x-1/2 w-auto min-w-max">
|
|
@if (isProfileVisible()) {
|
|
<div
|
|
class="flex items-center gap-1.5 bg-green-500 text-white px-3 py-1.5 rounded-full shadow-lg text-xs md:text-sm font-medium animate-fade-in"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="w-3.5 h-3.5 md:w-4 md:h-4"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
<span class="hidden sm:inline">Profil visible</span>
|
|
<span class="sm:hidden">Visible</span>
|
|
</div>
|
|
} @else {
|
|
<div
|
|
class="flex items-center gap-1.5 bg-orange-500 text-white px-3 py-1.5 rounded-full shadow-lg text-xs md:text-sm font-medium animate-fade-in"
|
|
[title]="'Champs manquants: ' + missingFields().join(', ')"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="w-3.5 h-3.5 md:w-4 md:h-4"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
<path
|
|
d="M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z"
|
|
/>
|
|
</svg>
|
|
<span class="hidden sm:inline">Profil non visible</span>
|
|
<span class="sm:hidden">Non visible</span>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
<!-- Nom et titre -->
|
|
@if (user() != undefined) {
|
|
<div
|
|
class="flex-1 text-center md:text-left mb-4 mt-8 md:mt-4 md:mb-0 animate-slide-up animation-delay-100"
|
|
>
|
|
@if (user()!.name) {
|
|
<h1 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1">
|
|
{{ user()!.name }}
|
|
</h1>
|
|
} @else {
|
|
<h1 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1">
|
|
{{ user()!.email }}
|
|
</h1>
|
|
}
|
|
|
|
<p class="text-lg md:text-xl text-indigo-600 dark:text-indigo-400 font-semibold">
|
|
{{ profile().profession | uppercase }}
|
|
</p>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<div class="flex flex-col md:flex-row items-center md:items-end gap-4 md:gap-6 mt-4">
|
|
<!-- Message d'information si profil non visible -->
|
|
@if (!isProfileVisible()) {
|
|
<div
|
|
class="mt-3 inline-flex items-center gap-2 bg-orange-50 dark:bg-orange-900/20 border border-orange-200 dark:border-orange-800 text-orange-700 dark:text-orange-300 px-3 py-2 rounded-lg text-sm"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="w-4 h-4 flex-shrink-0"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
<span
|
|
>Complétez votre <i class="font-bold">{{ missingFields().join(', ') }}</i> pour
|
|
être visible</span
|
|
>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contenu principal -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
|
|
<!-- Sidebar - Informations -->
|
|
<aside class="lg:col-span-1 space-y-6 animate-slide-up animation-delay-200">
|
|
<!-- Card Apropos -->
|
|
@if (profile().apropos) {
|
|
<div
|
|
class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow duration-300"
|
|
>
|
|
<h3
|
|
class="text-lg font-bold text-gray-900 dark:text-white mb-3 flex items-center gap-2"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-6 w-6 text-indigo-500"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
À propos
|
|
</h3>
|
|
<p class="text-gray-700 dark:text-gray-300 leading-relaxed text-base">
|
|
{{ profile().apropos }}
|
|
</p>
|
|
</div>
|
|
}
|
|
|
|
<!-- Card Bio -->
|
|
<div
|
|
class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow duration-300"
|
|
>
|
|
<h3
|
|
class="text-lg font-bold text-gray-900 dark:text-white mb-3 flex items-center gap-2"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-5 w-5 text-indigo-500"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
Biographie
|
|
</h3>
|
|
@if (profile().bio) {
|
|
<p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
|
|
{{ profile().bio }}
|
|
</p>
|
|
} @else {
|
|
<p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
|
|
Je suis sur la plateforme Trouve Ton Profile pour partager mon expertise et mes
|
|
compétences.
|
|
</p>
|
|
}
|
|
</div>
|
|
|
|
<!-- Card Secteur -->
|
|
@if (profile().secteur) {
|
|
<div
|
|
class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow duration-300"
|
|
>
|
|
<h3
|
|
class="text-lg font-bold text-gray-900 dark:text-white mb-3 flex items-center gap-2"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-5 w-5 text-indigo-500"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z"
|
|
/>
|
|
</svg>
|
|
Secteur
|
|
</h3>
|
|
<app-chips [sectorId]="profile().secteur" />
|
|
</div>
|
|
}
|
|
|
|
<!-- Card Réseaux -->
|
|
@if (profile().reseaux) {
|
|
<div
|
|
class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow duration-300"
|
|
>
|
|
<h3
|
|
class="text-lg font-bold text-gray-900 dark:text-white mb-3 flex items-center gap-2"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-5 w-5 text-indigo-500"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z"
|
|
/>
|
|
<path
|
|
d="M15 7v2a4 4 0 01-4 4H9.828l-1.766 1.767c.28.149.599.233.938.233h2l3 3v-3h2a2 2 0 002-2V9a2 2 0 00-2-2h-1z"
|
|
/>
|
|
</svg>
|
|
Réseaux
|
|
</h3>
|
|
<app-reseaux [reseaux]="profile().reseaux" />
|
|
</div>
|
|
}
|
|
</aside>
|
|
|
|
<!-- Contenu principal avec onglets -->
|
|
<main class="lg:col-span-3 animate-slide-up animation-delay-300">
|
|
<!-- Navigation par onglets -->
|
|
<ng-container *ngTemplateOutlet="menu_nav" />
|
|
|
|
<!-- Contenu des onglets -->
|
|
<ng-container *ngTemplateOutlet="menu_content" />
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
}
|
|
|
|
<ng-template #menu_nav>
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-4 mb-6">
|
|
<nav class="flex flex-wrap gap-2">
|
|
<button
|
|
class="tab-button flex items-center gap-2 px-4 py-2.5 rounded-lg font-medium text-sm transition-all duration-200"
|
|
[class.active-tab]="menu() === 'location'"
|
|
(click)="menu.set('location')"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke="currentColor"
|
|
class="w-5 h-5"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"
|
|
/>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"
|
|
/>
|
|
</svg>
|
|
<span class="hidden sm:inline">Localisation</span>
|
|
</button>
|
|
|
|
<button
|
|
(click)="menu.set('settings')"
|
|
[class.active-tab]="menu() === 'settings'"
|
|
class="tab-button flex items-center gap-2 px-4 py-2.5 rounded-lg font-medium text-sm transition-all duration-200"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="w-5 h-5"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
|
|
/>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
|
|
/>
|
|
</svg>
|
|
<span class="hidden sm:inline">Paramètres</span>
|
|
</button>
|
|
|
|
<button
|
|
(click)="menu.set('home')"
|
|
[class.active-tab]="menu() === 'home'"
|
|
class="tab-button flex items-center gap-2 px-4 py-2.5 rounded-lg font-medium text-sm transition-all duration-200"
|
|
>
|
|
@if (missingFields()!.includes('nom')) {
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="w-5 h-5 flex-shrink-0 text-orange-500"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
} @else {
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="w-5 h-5"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"
|
|
/>
|
|
</svg>
|
|
}
|
|
<span class="hidden sm:inline">Mon profil</span>
|
|
</button>
|
|
|
|
<button
|
|
(click)="menu.set('projects')"
|
|
[class.active-tab]="menu() === 'projects'"
|
|
class="tab-button flex items-center gap-2 px-4 py-2.5 rounded-lg font-medium text-sm transition-all duration-200"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="w-5 h-5"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23-.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5"
|
|
/>
|
|
</svg>
|
|
<span class="hidden sm:inline">Mes projets</span>
|
|
</button>
|
|
|
|
<button
|
|
(click)="menu.set('update')"
|
|
[class.active-tab]="menu() === 'update'"
|
|
class="tab-button flex items-center gap-2 px-4 py-2.5 rounded-lg font-medium text-sm transition-all duration-200"
|
|
>
|
|
@if (
|
|
missingFields()!.includes("secteur d'activité") || missingFields()!.includes('profession')
|
|
) {
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="w-5 h-5 flex-shrink-0 text-orange-500"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
} @else {
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="w-5 h-5"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
}
|
|
<span class="hidden sm:inline">Mes informations</span>
|
|
</button>
|
|
|
|
<button
|
|
(click)="menu.set('cv')"
|
|
[class.active-tab]="menu() === 'cv'"
|
|
class="tab-button flex items-center gap-2 px-4 py-2.5 rounded-lg font-medium text-sm transition-all duration-200"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="w-5 h-5"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
|
|
/>
|
|
</svg>
|
|
<span class="hidden sm:inline">Lecteur PDF</span>
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
</ng-template>
|
|
|
|
<ng-template #menu_content>
|
|
<div class="tab-content">
|
|
@switch (menu().toLowerCase()) {
|
|
@case ('location') {
|
|
<app-my-profile-map [profile]="profile()" />
|
|
}
|
|
@case ('settings') {
|
|
<app-settings [profile]="profile()" />
|
|
}
|
|
@case ('home') {
|
|
@if (!userLoading().isLoading) {
|
|
<app-update-user [user]="user()" />
|
|
} @else {
|
|
<app-loading message="Chargement encours..." />
|
|
}
|
|
}
|
|
@case ('projects') {
|
|
<app-my-profile-project-list [projectIds]="profile().projets" [userId]="user().id" />
|
|
<router-outlet />
|
|
}
|
|
@case ('update') {
|
|
<app-my-profile-update-form [profile]="profile()" />
|
|
}
|
|
@case ('cv') {
|
|
<app-pdf-viewer [profile]="profile()" />
|
|
}
|
|
@default {
|
|
@if (!userLoading().isLoading) {
|
|
<app-update-user [user]="user()" />
|
|
} @else {
|
|
<app-loading message="Chargement encours..." />
|
|
}
|
|
}
|
|
}
|
|
</div>
|
|
</ng-template>
|