<div class="vd-nav-primary d-print-none">
<!-- button -->
<div class="container">
<div class="row">
<div class="col-md-12 d-flex justify-content-md-end">
<button type="button" class="btn btn-primary btn-sm vd-nav-primary__button align-self-end collapsed" data-bs-toggle="collapse" data-bs-target="#nav-primary-container" aria-controls="nav-primary-container" aria-expanded="false">
<div class="d-flex justify-content-between">
<div>
<span class="vd-nav-primary__button--close">Cacher les thèmes</span>
<span class="vd-nav-primary__button--open">Afficher les thèmes</span>
</div>
<div>
<span class="vd-nav-primary__button--open fas fa-plus"></span>
<span class="vd-nav-primary__button--close fas fa-minus"></span>
</div>
</div>
</button>
</div>
</div>
</div>
<!-- menu -->
<div class="vd-nav-primary__menu-container">
<div class="collapse clearfix" id="nav-primary-container">
<div class="pb-3">
<div class="container vd-nav-primary__menu-bg-md">
<div class="vd-nav-primary__menu-bg-sm">
<div class="row">
<nav class="col-md-8 order-md-1 mt-3" id="nav-primary">
<h2 class="sr-only">Navigation par thèmes</h2>
<ul class="list-unstyled mb-0 row">
<li class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2">
<a href="domaines#culture" class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2 vd-domain-item__link-container">
<span class="vd-domain-item__link vd-link-invisible h4">Culture</span>
<span class="vd-domain-item__text">
<span class="sr-only">(Exemple de contenu: </span>Aides et subventions, passculture, Musées, Bibliothèques, Patrimoine vaudois, etc.<span class="sr-only">)</span>
</span>
</a>
</li>
<li class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2">
<a href="domaines#economie" class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2 vd-domain-item__link-container">
<span class="vd-domain-item__link vd-link-invisible h4">Economie</span>
<span class="vd-domain-item__text">
<span class="sr-only">(Exemple de contenu: </span>Registre du commerce, poursuites et faillites, Entreprise, Chômage, Agriculture, développement économique, etc.<span class="sr-only">)</span>
</span>
</a>
</li>
<li class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2">
<a href="domaines#environnement" class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2 vd-domain-item__link-container">
<span class="vd-domain-item__link vd-link-invisible h4">Environnement</span>
<span class="vd-domain-item__text">
<span class="sr-only">(Exemple de contenu: </span>Subventions pour l’énergie, faune et nature, eaux, forêts, air, développement durable, etc.<span class="sr-only">)</span>
</span>
</a>
</li>
<li class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2">
<a href="domaines#etat%2C%20droit%2C%20finance" class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2 vd-domain-item__link-container">
<span class="vd-domain-item__link vd-link-invisible h4">Etat, Droit, Finance</span>
<span class="vd-domain-item__text">
<span class="sr-only">(Exemple de contenu: </span>Justice, votations, Egalité, protection des données, Impôts, finances publiques, Etat employeur, statistiques, etc.<span class="sr-only">)</span>
</span>
</a>
</li>
<li class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2">
<a href="domaines#formation" class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2 vd-domain-item__link-container">
<span class="vd-domain-item__link vd-link-invisible h4">Formation</span>
<span class="vd-domain-item__text">
<span class="sr-only">(Exemple de contenu: </span>Vacances scolaires, scolarité obligatoire, orientation, apprentissage, gymnase, Bourses, etc.<span class="sr-only">)</span>
</span>
</a>
</li>
<li class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2">
<a href="domaines#mobilit%C3%A9" class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2 vd-domain-item__link-container">
<span class="vd-domain-item__link vd-link-invisible h4">Mobilité</span>
<span class="vd-domain-item__text">
<span class="sr-only">(Exemple de contenu: </span>Automobiles, Routes, navigation, transports publics, mobilités durables, etc.<span class="sr-only">)</span>
</span>
</a>
</li>
<li class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2">
<a href="domaines#sant%C3%A9" class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2 vd-domain-item__link-container">
<span class="vd-domain-item__link vd-link-invisible h4">Santé</span>
<span class="vd-domain-item__text">
<span class="sr-only">(Exemple de contenu: </span>Prévention, système de santé, dépendances, santé en milieu scolaire, droit des patients, les professionnels de la santé, etc.<span class="sr-only">)</span>
</span>
</a>
</li>
<li class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2">
<a href="domaines#social" class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2 vd-domain-item__link-container">
<span class="vd-domain-item__link vd-link-invisible h4">Social</span>
<span class="vd-domain-item__text">
<span class="sr-only">(Exemple de contenu: </span>Subside à l’assurance maladie, revenu d’insertion, violence, le RDU, les prestations familles, PC familles, Rente-pont, etc.<span class="sr-only">)</span>
</span>
</a>
</li>
<li class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2">
<a href="domaines#vie%20priv%C3%A9e" class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2 vd-domain-item__link-container">
<span class="vd-domain-item__link vd-link-invisible h4">Vie privée</span>
<span class="vd-domain-item__text">
<span class="sr-only">(Exemple de contenu: </span>Vacances scolaires, scolarité obligatoire, orientation, apprentissage, gymnase, Bourses, etc.<span class="sr-only">)</span>
</span>
</a>
</li>
<li class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2">
<a href="domaines#s%C3%A9curit%C3%A9" class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2 vd-domain-item__link-container">
<span class="vd-domain-item__link vd-link-invisible h4">Sécurité</span>
<span class="vd-domain-item__text">
<span class="sr-only">(Exemple de contenu: </span>Police, pénitentiaire, armée, catastrophe, protection de la population, etc.<span class="sr-only">)</span>
</span>
</a>
</li>
<li class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2">
<a href="domaines#territoire" class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2 vd-domain-item__link-container">
<span class="vd-domain-item__link vd-link-invisible h4">Territoire</span>
<span class="vd-domain-item__text">
<span class="sr-only">(Exemple de contenu: </span>Aménagement, permis de construire, registre foncier, communes, préfectures, dangers naturels, etc.<span class="sr-only">)</span>
</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="vd-nav-primary d-print-none">
<!-- button -->
<div class="container">
<div class="row">
<div class="col-md-12 d-flex justify-content-md-end">
<button type="button"
class="btn btn-primary btn-sm vd-nav-primary__button align-self-end {% if navOpen %}js-closeMenuOnMobile__button {% else %}collapsed{% endif %}"
data-bs-toggle="collapse"
data-bs-target="#nav-primary-container"
aria-controls="nav-primary-container"
aria-expanded="{%- if navOpen %}true{% else %}false{% endif -%}">
<div class="d-flex justify-content-between">
<div>
<span class="vd-nav-primary__button--close">Cacher les thèmes</span>
<span class="vd-nav-primary__button--open">Afficher les thèmes</span>
</div>
<div>
<span class="vd-nav-primary__button--open fas fa-plus"></span>
<span class="vd-nav-primary__button--close fas fa-minus"></span>
</div>
</div>
</button>
</div>
</div>
</div>
<!-- menu -->
<div class="vd-nav-primary__menu-container">
<div class="collapse {% if navOpen %}show js-closeMenuOnMobile__container {% endif %}clearfix"
id="nav-primary-container">
<div class="pb-3">
<div class="container vd-nav-primary__menu-bg-md">
<div class="vd-nav-primary__menu-bg-sm">
<div class="row">
<nav class="col-md-8 order-md-1 mt-3" id="nav-primary">
<h2 class="sr-only">Navigation par thèmes</h2>
<ul class="list-unstyled mb-0 row">
{% for domain in domains.domains %}
{% render '@domain-item--small', {name:domain.name,
styleModifier:'col-sm-6 col-lg-4 mb-2', description:domain.description}, true %}
{% endfor %}
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{
"wrapperClass": {
"wrapperClass": "col-md-4"
},
"domains": {
"activeDomain": "Economie",
"domains": [
{
"name": "Culture",
"themes": [
{
"name": "Aides et soutiens"
},
{
"name": "Ecole-Musée"
},
{
"name": "Bibliothèque cantonale et universitaire"
},
{
"name": "Musées cantonaux"
},
{
"name": "Patrimoine vaudois"
},
{
"name": "Passculture"
},
{
"name": "Formations artistiques"
},
{
"name": "Cinéma"
},
{
"name": "Assises de la culture"
}
],
"description": "Aides et subventions, passculture, Musées, Bibliothèques, Patrimoine vaudois, etc."
},
{
"name": "Economie",
"themes": [
{
"name": "Entreprises"
},
{
"name": "Marchés publics"
},
{
"name": "Emploi - Chômage"
},
{
"name": "Développement économique"
},
{
"name": "Tourisme"
},
{
"name": "Agriculture"
},
{
"name": "Protection consommateur"
},
{
"name": "Poursuites et faillites"
},
{
"name": "Registre du commerce"
},
{
"name": "Police du commerce"
}
],
"description": "Registre du commerce, poursuites et faillites, Entreprise, Chômage, Agriculture, développement économique, etc."
},
{
"name": "Environnement",
"themes": [
{
"name": "Développement durable"
},
{
"name": "Faune et nature"
},
{
"name": "Forêts"
},
{
"name": "Air"
},
{
"name": "Sols"
},
{
"name": "Eaux"
},
{
"name": "Energie"
},
{
"name": "Bruit"
},
{
"name": "Rayonnement"
},
{
"name": "Produits chimiques"
},
{
"name": "Déchets"
},
{
"name": "Sites pollués"
}
],
"description": "Subventions pour l’énergie, faune et nature, eaux, forêts, air, développement durable, etc."
},
{
"name": "Etat, Droit, Finance",
"themes": [
{
"name": "Lois / Constitution"
},
{
"name": "Votations et élections"
},
{
"name": "Justice"
},
{
"name": "Médiations"
},
{
"name": "Protection des données et transparence"
},
{
"name": "Curatelles et tutelles"
},
{
"name": "Égalité"
},
{
"name": "Impôts"
},
{
"name": "Finances publiques"
},
{
"name": "Affaires extérieures"
},
{
"name": "Personnel de l'État"
},
{
"name": "Statistiques"
}
],
"description": "Justice, votations, Egalité, protection des données, Impôts, finances publiques, Etat employeur, statistiques, etc."
},
{
"name": "Formation",
"themes": [
{
"name": "Avant l'Ecole"
},
{
"name": "Scolarité obligatoire"
},
{
"name": "Gymnase"
},
{
"name": "Apprentissage"
},
{
"name": "Enseignement supérieur"
},
{
"name": "Orientation"
},
{
"name": "Bourses"
},
{
"name": "Pédagogie spécialisée"
},
{
"name": "Santé à l'école"
},
{
"name": "Jours fériés et vacances scolaires"
},
{
"name": "Schooling"
},
{
"name": "Espace enseignant"
}
],
"description": "Vacances scolaires, scolarité obligatoire, orientation, apprentissage, gymnase, Bourses, etc."
},
{
"name": "Mobilité",
"themes": [
{
"name": "Mobilité et planification"
},
{
"name": "Mobilité douce"
},
{
"name": "Promotion des mobilités durables"
},
{
"name": "Routes"
},
{
"name": "Transports publics"
},
{
"name": "Automobile"
},
{
"name": "Navigation"
}
],
"description": "Automobiles, Routes, navigation, transports publics, mobilités durables, etc."
},
{
"name": "Santé",
"themes": [
{
"name": "Actualités"
},
{
"name": "Système de santé"
},
{
"name": "Organisation"
},
{
"name": "Lutte contre les maladies"
},
{
"name": "Prévention"
},
{
"name": "Dépendances"
},
{
"name": "Professionnels"
}
],
"description": "Prévention, système de santé, dépendances, santé en milieu scolaire, droit des patients, les professionnels de la santé, etc."
},
{
"name": "Social",
"themes": [
{
"name": "Informations sociales"
},
{
"name": "Prestations, assurances et soutien"
},
{
"name": "Vivre à domicile"
},
{
"name": "EMS"
},
{
"name": "Handicaps"
},
{
"name": "Dettes et surendettement"
},
{
"name": "Aide aux victimes et auteur-e-s de violences"
},
{
"name": "Bénévolat"
}
],
"description": "Subside à l’assurance maladie, revenu d’insertion, violence, le RDU, les prestations familles, PC familles, Rente-pont, etc."
},
{
"name": "Vie privée",
"themes": [
{
"name": "Familles"
},
{
"name": "Enfance et jeunesse"
},
{
"name": "Logement"
},
{
"name": "Contrôle des habitants"
},
{
"name": "Etat civil"
},
{
"name": "Documents d'identité"
},
{
"name": "Population étrangère"
},
{
"name": "Religions"
},
{
"name": "Animaux"
},
{
"name": "Sport"
},
{
"name": "Violence domestique"
}
],
"description": "Vacances scolaires, scolarité obligatoire, orientation, apprentissage, gymnase, Bourses, etc."
},
{
"name": "Sécurité",
"themes": [
{
"name": "Prévention"
},
{
"name": "Protection de la population"
},
{
"name": "Police"
},
{
"name": "Pompiers"
},
{
"name": "Armée"
},
{
"name": "Protection civile"
},
{
"name": "Pénitentiaire"
},
{
"name": "Catastrophe"
},
{
"name": "Service civil"
}
],
"description": "Police, pénitentiaire, armée, catastrophe, protection de la population, etc."
},
{
"name": "Territoire",
"themes": [
{
"name": "Aménagement"
},
{
"name": "Améliorations foncières"
},
{
"name": "Opérations foncières"
},
{
"name": "Géologie"
},
{
"name": "Dangers Naturels"
},
{
"name": "Informations sur le territoire"
},
{
"name": "Construction"
},
{
"name": "Registre foncier"
},
{
"name": "Districts / Préfectures"
},
{
"name": "Communes"
}
],
"description": "Aménagement, permis de construire, registre foncier, communes, préfectures, dangers naturels, etc."
}
]
}
}
@charset 'UTF-8';
@use "sass:math";
.vd-nav-empty__button {
@include media-breakpoint-up(md) {
height: 37px;
}
}
.vd-nav-primary {
margin: 0 auto;
border-bottom: 1px dotted $vd-primary;
.vd-domain-item__link {
font-family: $font-family-sans-serif;
&.h1,
&.h2,
&.h3,
&.h4,
&.h5,
&.h6 {
color: $vd-primary-dark;
}
&:visited:not(.btn) {
color: $vd-primary-dark;
}
}
}
.vd-nav-primary__menu-container {
@include vd-pattern-dotted($pattern-dotted-green);
padding-top: $spacer;
}
/**
* Set the background to white to remove the border with dotted background
*/
.vd-nav-primary__menu-bg-md {
@include media-breakpoint-up(sm) {
background: $white;
}
}
/**
* Add a dotted border background on mobile
*/
.vd-nav-primary__menu-bg-sm {
@include media-breakpoint-down(sm) {
background: $white;
padding-left: math.div($spacer, 2);
padding-right: math.div($spacer, 2);
margin-left: - math.div($spacer, 2);
margin-right: - math.div($spacer, 2);
}
}
/**
* Toggle the icon in the button
*
* 1. Fix width to match open/close state with
* 2. Override color
* 3. Toggle text and icon
* Be careful, it's based on the `.collapsed` class which is generated by
* Bootstrap
*/
.vd-nav-primary__button {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
min-width: $spacer * 11.5; /* [1] */
color: $body-color; /* [2] */
@include vd-pattern-dotted($pattern-dotted-green);
.fas,
.svg-inline--fa {
color: $body-color; /* [2] */
}
&:not(.collapsed) {
.vd-nav-primary__button--open {
display: none; /* [3] */
}
}
&.collapsed {
.vd-nav-primary__button--close {
display: none; /* [3] */
}
}
}
Used mainly to list organisms in primary nav.