Skip to content
Snippets Groups Projects
Commit 4770e815 authored by sandcha's avatar sandcha
Browse files

Remove unused NavBarBudget component

parent 06fd06a4
No related branches found
No related tags found
1 merge request!6Met à jour les dépendances de l'application
Show whitespace changes
Inline Side-by-side
src/lib/components/NavBarBudget.svelte deleted 100644 → 0
+ 0
− 500
View file @ 06fd06a4
<script lang="ts">
import { page, session } from "$app/stores"
const portalUrl = $session.portalUrl
// let open = false
let openAproposMenu = false
let openUserMenu = false
$: authenticationEnabled = $session.authenticationEnabled
$: pageUrlPath = $page.path.replace(/\/+$/, "") || "/"
$: title = $session.title
$: user = $session.user
// function activeMenuItem(href: string) {
// return pageUrlPath === href || pageUrlPath.startsWith(href + "/")
// }
</script>
<div class="fixed top-0 w-full z-50">
<nav class="bg-le-jaune h-14 shadow-md mx-auto px-5 w-full">
<!-- Création d'un div sur l'ensemble de la nav bar pour répartir les blocs-->
<div class="hidden md:flex justify-between">
<!-- Premier div pour le logo AN et le menu A propos-->
<div class="flex w-64 lg:w-96 items-center">
<!-- logo assemblee nationale -->
<a href={portalUrl}>
<img
class="pr-2 pt-0 w-16 pb-2 object-scale-down items-start "
src="/logo-assemblee-nationale-blanc-blanc.png"
alt="Logo de l'Assemblée nationale"
/>
</a>
<!-- À propos dropdown -->
<div class="flex space-x-5 justify-start ml-2 items-center">
<div class="">
<button
aria-expanded={openAproposMenu}
aria-haspopup="true"
class="text-white uppercase text-sm rounded-sm focus:outline-none hover:bg-gray-400 hover:bg-opacity-20 hover:text-white p-1"
id="user-menu"
on:click={() => (openAproposMenu = !openAproposMenu)}
type="button"
>
<span class="sr-only">Open user menu</span>
À propos
</button>
</div>
{#if openAproposMenu}
<!--
Dropdown menu
Entering: "transition ease-out duration-100"
From: "opacity-0 scale-95"
To: "opacity-100 scale-100"
Leaving: "transition ease-in duration-75"
From: "opacity-100 scale-100"
To: "opacity-0 scale-95"
-->
<div
class="absolute mt-14 mr-6 left-16 top-0 w-64 rounded shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-50"
role="menu"
aria-orientation="vertical"
aria-labelledby="user-menu"
>
<a
href={new URL("a-propos", portalUrl).toString()}
class="border-b block px-4 py-3 font-bold text-sm text-gray-700 hover:bg-gray-100"
role="menuitem">À propos de LexImpact</a
>
<a
href={new URL(
"comment-fonctionnent-les-simulateurs",
portalUrl,
).toString()}
class="border-b block px-4 py-3 text-sm text-gray-700 hover:bg-gray-100"
role="menuitem"
>Comment fonctionnent les simulateurs LexImpact ?</a
>
<a
href="/contribuer"
class="border-b-4 block px-4 py-3 text-sm text-gray-700 hover:bg-gray-100"
>
Contribuer
</a>
<a
href={new URL("statistiques", portalUrl).toString()}
class="border-b block px-4 py-3 text-sm text-gray-700 hover:bg-gray-100"
role="menuitem">Statistiques d'usage</a
>
<a
href={new URL("cgu", portalUrl).toString()}
class="border-b block px-4 py-3 text-sm text-gray-700 hover:bg-gray-100"
role="menuitem">Conditions d'utilisation</a
>
<a
href={new URL("mentions-legales", portalUrl).toString()}
class="border-b block px-4 py-3 text-sm text-gray-700 hover:bg-gray-100"
role="menuitem">Mentions légales</a
>
<a
href={portalUrl}
class="border-b block px-4 py-3 text-sm bg-gray-200 text-gray-900 hover:bg-gray-400"
role="menuitem"
>
<!-- Material icon: Volunteer Activism-->
<svg
class="fill-current text-gray-700 inline rounded mr-2"
xmlns="http://www.w3.org/2000/svg"
height="18px"
viewBox="0 0 22 22"
width="18px"
fill="#000000"
><path d="M0 0h24v24H0z" fill="none" /><path
d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
/></svg
>Retour en page d'accueil</a
>
</div>
{/if}
</div>
</div>
<!-- Deuxième div pour le logo Contrib. & prestas sociales-->
<div class="hidden md:flex">
<a href="/">
<div
class="space-y-1 flex items-center h-14 gap-2 rounded text-white p-1"
>
<div class="row-span-3 text-4xl font-light uppercase">
LexImpact
</div>
<div class="space-y-0">
<div class="text-xs font-bold uppercase">Budget État&Sécu.</div>
<div class="text-xs font-bold uppercase">CSG & CRDS</div>
</div>
</div>
</a>
</div>
<!-- Troisième div pour les commandes avancées-->
<!-- connexion/déconnexion -->
<div class="flex w-64 lg:w-96 justify-end items-center">
{#if authenticationEnabled}
{#if user === undefined}
<div class="flex">
<a
title="Accès sous authentification au simulateur CSG et CRDS sur les budgets de l'État et de la Sécurité sociale"
href="/authentication/signin/leximpact?redirect={$page.path}"
class="bg-le-jaune-dark text-white uppercase text-sm rounded-sm focus:outline-none hover:bg-gray-400 hover:bg-opacity-20 hover:text-white p-1 shadow-md"
type="button"
>
<div class="flex items-center m-1">
<div>
<p class="hidden md:inline-block pl-1">
Cotis.& Presta. sociales
</p>
</div>
<!-- Material icon: VPN key-->
<svg
class="fill-current text-white inline rounded mx-2"
xmlns="http://www.w3.org/2000/svg"
height="18px"
viewBox="0 0 22 22"
width="18px"
><path d="M0 0h24v24H0z" fill="none" /><path
d="M12.65 10C11.83 7.67 9.61 6 7 6c-3.31 0-6 2.69-6 6s2.69 6 6 6c2.61 0 4.83-1.67 5.65-4H17v4h4v-4h2v-4H12.65zM7 14c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"
/></svg
>
</div>
</a>
</div>
{:else}
<!-- User profile + se déconnecter -->
<div class="flex justify-between gap-2 items-center">
<div>
<button
aria-expanded={openUserMenu}
aria-haspopup="true"
class="text-white capitalize text-sm rounded focus:outline-none hover:bg-gray-400 hover:bg-opacity-20 hover:text-white p-1"
id="user-menu"
on:click={() => (openUserMenu = !openUserMenu)}
type="button"
>
<!-- Material icon: Account circle-->
<svg
class="fill-current text-white inline rounded m-3 md:m-0"
xmlns="http://www.w3.org/2000/svg"
height="18px"
viewBox="0 0 24 24"
width="18px"
fill="#000000"
><path d="M0 0h24v24H0z" fill="none" /><path
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"
/></svg
>
<span class="sr-only">Open user menu</span>
{user.preferred_username}
</button>
</div>
<div
class="bg-le-jaune-dark text-white uppercase text-sm rounded-sm focus:outline-none hover:bg-gray-400 hover:bg-opacity-20 hover:text-white shadow-md"
>
<a
title="Accès au simulateur CSG et CRDS sur les budgets de l'État et de la Sécurité sociale"
href="/"
class=""
type="button"
>
<!-- titre erroné ? -->
<div class="flex items-center m-1">
<div>
<p class="hidden lg:inline-block p-1">
Cotisations & Prestations
</p>
<p class="hidden md:inline-block lg:hidden pl-1">
Cotis.& Presta.
</p>
</div>
<!-- Material icon: arrow forward-->
<svg
class="fill-current text-white inline rounded mx-2"
xmlns="http://www.w3.org/2000/svg"
height="18px"
viewBox="0 0 22 22"
width="18px"
fill="#000000"
><path d="M0 0h24v24H0z" fill="none" /><path
d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
/></svg
>
</div>
</a>
</div>
</div>
{#if openUserMenu}
<!--
Dropdown menu
Entering: "transition ease-out duration-100"
From: "opacity-0 scale-95"
To: "opacity-100 scale-100"
Leaving: "transition ease-in duration-75"
From: "opacity-100 scale-100"
To: "opacity-0 scale-95"
-->
<div
class="absolute mt-14 mr-28 right-0 top-0 rounded shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-50"
role="menu"
aria-orientation="vertical"
aria-labelledby="user-menu"
>
<a
href="/authentication/signout"
class="uppercase rounded-sm focus:outline-none hover:bg-opacity-20
border-b block px-4 py-4 text-xs text-black hover:bg-gray-300"
type="button"
>
<div class="flex items-center">
<!-- Material icon: Power Settings New-->
<svg
class="fill-current text-black inline rounded m-3 md:m-0"
xmlns="http://www.w3.org/2000/svg"
height="18px"
viewBox="0 0 24 24"
width="18px"
fill="#000000"
><path d="M0 0h24v24H0z" fill="none" /><path
d="M13 3h-2v10h2V3zm4.83 2.17l-1.42 1.42C17.99 7.86 19 9.81 19 12c0 3.87-3.13 7-7 7s-7-3.13-7-7c0-2.19 1.01-4.14 2.58-5.42L6.17 5.17C4.23 6.82 3 9.26 3 12c0 4.97 4.03 9 9 9s9-4.03 9-9c0-2.74-1.23-5.18-3.17-6.83z"
/></svg
>
<p class="inline-block pl-1">Se déconnecter</p>
</div>
</a>
</div>
{/if}
{/if}
{/if}
</div>
</div>
<!--Menu écran téléphone-->
<div class="md:hidden flex justify-between items-center">
<!-- Premier div pour le logo AN et le menu A propos-->
<div class="w-16">
<!-- logo assemblee nationale -->
<a href={portalUrl}>
<img
class="pr-2 pl-0 pb-1 pt-0 w-16 object-scale-down items-start "
src="/logo-assemblee-nationale-blanc-blanc.png"
alt="Logo de l'Assemblée nationale"
/>
</a>
</div>
<!-- Deuxième div pour le logo Contrib. & prestas sociales-->
<div>
<div
class="block object-center text-center rounded text-2xl text-white font-light uppercase h-7"
>
LexImpact
</div>
<div
class="block rounded object-center text-center text-xs text-white font-bold uppercase"
>
Budget État/Sécu. CSG & CRDS
</div>
</div>
<!-- Troisième div pour le bouton menu-->
<div class="w-16 flex justify-end ">
<div>
<button
aria-expanded={openAproposMenu}
aria-haspopup="true"
class="text-white uppercase text-sm rounded-sm focus:outline-none hover:bg-gray-400 hover:bg-opacity-20 hover:text-white p-1 justify-self-end"
id="user-menu"
on:click={() => (openAproposMenu = !openAproposMenu)}
type="button"
>
<span class="sr-only">Open user menu</span>
<!-- Material icon : menu -->
<svg
class="md:hidden fill-current text-white"
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 0 24 24"
width="24px"
><path d="M0 0h24v24H0z" fill="none" /><path
d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
/></svg
>
</button>
</div>
</div>
{#if openAproposMenu}
<!--
Dropdown menu
Entering: "transition ease-out duration-100"
From: "opacity-0 scale-95"
To: "opacity-100 scale-100"
Leaving: "transition ease-in duration-75"
From: "opacity-100 scale-100"
To: "opacity-0 scale-95"
-->
<div
class="absolute mt-14 right-0 top-0 w-full rounded shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-50"
role="menu"
aria-orientation="vertical"
aria-labelledby="user-menu"
>
{#if authenticationEnabled}
{#if user === undefined}
<a
title="Accès sous authentification au simulateur CSG et CRDS sur les budgets de l'État et de la Sécurité sociale"
href="/authentication/signin/leximpact?redirect={$page.path}"
class="border-b block px-4 py-3 text-sm bg-le-jaune-dark text-white hover:text-black"
role="menuitem"
>
<!-- Material icon: VPN key-->
<svg
class="fill-current inline rounded mr-2"
xmlns="http://www.w3.org/2000/svg"
height="18px"
viewBox="0 0 22 22"
width="18px"
><path d="M0 0h24v24H0z" fill="none" /><path
d="M12.65 10C11.83 7.67 9.61 6 7 6c-3.31 0-6 2.69-6 6s2.69 6 6 6c2.61 0 4.83-1.67 5.65-4H17v4h4v-4h2v-4H12.65zM7 14c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"
/></svg
>Simulateur cotisations & prestations sur particulier type</a
>
{:else}
<a
href="/"
class="border-b block px-4 py-3 text-sm bg-le-jaune-dark text-white hover:text-black"
role="menuitem"
>
<!-- Material icon: arrow forward-->
<svg
class="fill-current inline rounded mr-2"
xmlns="http://www.w3.org/2000/svg"
height="18px"
viewBox="0 0 22 22"
width="18px"
fill="#000000"
><path d="M0 0h24v24H0z" fill="none" /><path
d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
/></svg
>
Simulateur cotisations & prestations sur particulier type</a
>
<a
href="/authentication/signout"
class="border-b-4 block px-4 py-3 text-sm text-gray-700 hover:bg-gray-100"
role="menuitem"
>
<!-- Material icon: Power Settings New-->
<svg
class="fill-current text-gray-700 inline rounded mr-2"
xmlns="http://www.w3.org/2000/svg"
height="18px"
viewBox="0 0 24 24"
width="18px"
fill="#000000"
><path d="M0 0h24v24H0z" fill="none" /><path
d="M13 3h-2v10h2V3zm4.83 2.17l-1.42 1.42C17.99 7.86 19 9.81 19 12c0 3.87-3.13 7-7 7s-7-3.13-7-7c0-2.19 1.01-4.14 2.58-5.42L6.17 5.17C4.23 6.82 3 9.26 3 12c0 4.97 4.03 9 9 9s9-4.03 9-9c0-2.74-1.23-5.18-3.17-6.83z"
/></svg
>Se déconnecter ({user.preferred_username})</a
>
{/if}
{/if}
<a
href={new URL("a-propos", portalUrl).toString()}
class="border-b block px-4 py-3 font-bold text-sm text-gray-700 hover:bg-gray-100"
role="menuitem">À propos de LexImpact</a
>
<a
href={new URL(
"comment-fonctionnent-les-simulateurs",
portalUrl,
).toString()}
class=" border-b block px-4 py-3 text-sm text-gray-700 hover:bg-gray-100"
role="menuitem">Comment fonctionnent les simulateurs LexImpact ?</a
>
<a
href="/contribuer"
class="border-b-4 block px-4 py-3 text-sm text-gray-700 hover:bg-gray-100"
role="menuitem"
>
Contribuer</a
>
<a
href={new URL("statistiques", portalUrl).toString()}
class="border-b block px-4 py-3 text-sm text-gray-700 hover:bg-gray-100"
role="menuitem">Statistiques d'usage</a
>
<a
href={new URL("cgu", portalUrl).toString()}
class="border-b block px-4 py-3 text-sm text-gray-700 hover:bg-gray-100"
role="menuitem">Conditions d'utilisation</a
>
<a
href={new URL("mentions-legales", portalUrl).toString()}
class="border-b block px-4 py-3 text-sm text-gray-700 hover:bg-gray-100"
role="menuitem">Mentions légales</a
>
<a
href={portalUrl}
class="border-b block px-4 py-3 text-sm bg-gray-200 text-gray-900 hover:bg-gray-400"
role="menuitem"
>
<!-- Material icon: Volunteer Activism-->
<svg
class="fill-current text-gray-700 inline rounded mr-2"
xmlns="http://www.w3.org/2000/svg"
height="18px"
viewBox="0 0 22 22"
width="18px"
fill="#000000"
><path d="M0 0h24v24H0z" fill="none" /><path
d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
/></svg
>Retour en page d'accueil</a
>
</div>
{/if}
</div>
</nav>
<div
class="flex fond-bandeau-en-construction h-8 w-full items-center justify-center shadow-lg border-b border-t border-black"
>
<div>
<p class="text-center text-black tracking-wider font-base uppercase">
🚧 Simulateur en construction
</p>
</div>
</div>
</div>
<style>
.fond-bandeau-en-construction {
background-color: #ffffff;
background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ece322' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
}
</style>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment