Skip to content
Snippets Groups Projects
Commit 312d87d0 authored by Dorine Lambinet's avatar Dorine Lambinet
Browse files

Harmonise le design de la navbar avec celle du budget

parent 1101a1d2
Branches
Tags
1 merge request!42Harmonise le design de la navbar avec celle du budget
Show whitespace changes
Inline Side-by-side
src/lib/components/NavBar.svelte
+ 123
− 82
View file @ 312d87d0
......@@ -22,15 +22,15 @@
</script>
<div class="fixed top-0 w-full z-50">
<nav class="bg-le-jaune h-14 shadow-md mx-auto px-4 lg:px-8 w-full">
<nav class="bg-le-jaune h-14 shadow-md mx-auto px-5 lg:pr-10 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 items-center">
<div class="flex w-1/3 items-center">
<!-- logo assemblee nationale -->
<a href={portalUrl}>
<img
class="pr-2 pl-2 pb-4 pt-0 w-16 object-scale-down items-start "
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"
/>
......@@ -77,10 +77,16 @@
"comment-fonctionnent-les-simulateurs",
portalUrl,
).toString()}
class="border-b-4 block px-4 py-3 text-sm text-gray-700 hover:bg-gray-100"
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={new URL("contribuer", portalUrl).toString()}
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"
......@@ -140,48 +146,23 @@
<!-- Troisième div pour les commandes avancées-->
<!-- Contribuer et connexion/déconnexion -->
<div class="flex w-64 justify-end md:justify-between items-center">
<div class="flex">
<a
href="/contribuer"
class="hidden md:inline-flex text-white uppercase text-sm rounded-sm focus:outline-none hover:bg-gray-400 hover:bg-opacity-20 hover:text-white p-1"
type="button"
>
<div class="flex items-center">
<!-- Material icon: Volunteer Activism-->
<svg
class="fill-current text-white inline rounded m-3 md:m-0"
xmlns="http://www.w3.org/2000/svg"
enable-background="new 0 0 24 24"
height="18px"
viewBox="0 0 22 22"
width="18px"
><g><rect fill="none" height="24" width="2" /></g><g
><g
><rect height="11" width="4" x="1" y="11" /><path
d="M16,3.25C16.65,2.49,17.66,2,18.7,2C20.55,2,22,3.45,22,5.3c0,2.27-2.91,4.9-6,7.7c-3.09-2.81-6-5.44-6-7.7 C10,3.45,11.45,2,13.3,2C14.34,2,15.35,2.49,16,3.25z"
/><path
d="M20,17h-7l-2.09-0.73l0.33-0.94L13,16h2.82c0.65,0,1.18-0.53,1.18-1.18v0c0-0.49-0.31-0.93-0.77-1.11L8.97,11H7v9.02 L14,22l8.01-3v0C22,17.9,21.11,17,20,17z"
/></g
></g
></svg
>
<p class="hidden md:inline-block pl-1">Contribuer</p>
</div>
</a>
</div>
<div class="flex w-1/3 justify-end items-center">
{#if authenticationEnabled}
{#if user === undefined}
<div class="flex">
<a
title="Vers le simulateur CSG Budget de la Sécurité sociale"
href="/authentication/signin/leximpact?redirect={$page.path}"
class="text-white uppercase text-sm rounded-sm focus:outline-none hover:bg-gray-400 hover:bg-opacity-20 hover:text-white p-1"
class="bg-le-jaune-dark text-white uppercase text-sm rounded-sm focus:outline-none hover:bg-black hover:bg-opacity-20 hover:text-white shadow-md"
type="button"
>
<div class="flex items-center">
<div class="flex items-center m-1">
<div>
<p class="hidden md:inline-block pl-1">Budget CSG</p>
</div>
<!-- Material icon: VPN key-->
<svg
class="fill-current text-white inline rounded m-3 md:m-0"
class="fill-current text-white inline rounded mx-2"
xmlns="http://www.w3.org/2000/svg"
height="18px"
viewBox="0 0 22 22"
......@@ -190,24 +171,25 @@
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
>
<p class="hidden md:inline-block pl-1">Se connecter</p>
</div>
</a>
</div>
{:else}
<!-- User profile + se déconnecter -->
<div class="flex">
<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"
class="text-white capitalize text-sm rounded focus:outline-none hover:bg-gray-400 hover:bg-opacity-20 hover:text-white px-2 py-1 "
id="user-menu"
on:click={() => (openUserMenu = !openUserMenu)}
type="button"
>
<!-- Material icon: Account circle-->
<div class="inline-flex items-center">
<svg
class="fill-current text-white inline rounded m-3 md:m-0"
class="h-6 w-6 fill-current text-white rounded "
xmlns="http://www.w3.org/2000/svg"
height="18px"
viewBox="0 0 24 24"
......@@ -219,9 +201,49 @@
>
<span class="sr-only ">Open user menu</span>
<div class="hidden xl:flex">
{user.preferred_username}
</div>
</div>
</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 sur le budget de la Sécurité sociale"
href="https://budget.leximpact.an.fr/budget"
class=""
type="button"
>
<div class="flex items-center m-1">
<div>
<p class="hidden lg:inline-block xl:hidden p-1">
Budget CSG
</p>
<p
class="hidden md:inline-block lg:hidden xl:inline-block p-1"
>
Budget CSG
</p>
</div>
<!-- Material icon: arrow forward-->
<svg
class="fill-current text-white inline rounded mx-2 lg:ml-0"
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
......@@ -234,7 +256,7 @@
To: "transform opacity-0 scale-95"
-->
<div
class="absolute mt-14 mr-8 right-0 top-0 w- rounded shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-50"
class="absolute mt-14 md:mr-24 lg:mr-56 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"
......@@ -343,12 +365,12 @@
{#if user === undefined}
<a
href="/authentication/signin/leximpact?redirect={$page.path}"
class="border-b block px-4 py-3 text-sm text-gray-700 font-bold hover:bg-gray-100"
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 text-gray-700 inline rounded mr-2"
class="fill-current inline rounded mr-2"
xmlns="http://www.w3.org/2000/svg"
height="18px"
viewBox="0 0 22 22"
......@@ -356,9 +378,28 @@
><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
>Se connecter</a
>Estimer la CSG - budget de la Sécurité sociale</a
>
{:else}
<a
href="https://socio-fiscal.leximpact.an.fr/"
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
>
Estimer 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"
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment