cMainNav.ftl
1 <#-- Macro: cMainNav
2
3 Description: affiche une barre de navigation.
4
5 Parameters:
6 @param - id - string - optional - identifiant unique de la barre de navigation
7 @param - class - string - optional - classe(s) css de la barre de navigation
8 @param - title - string - required - Titre du site. Par défaut récupère le nom de la variable "favorite".
9 @param - logoImg - string - required - url de l'image utilisée comme logo pour le titre du site
10 @param - href - string - required - url de redirection sur le logo du titre du site
11 @param - hasMenu - boolean - required - si true, le site possède un menu
12 @param - hasNestedMenu - boolean - optionnal - si true, le site possède un menu
13 @param - isSidebar - boolean - required - si true, le menu sera vertical calé à gauche
14 @param - isOnlyHome - boolean - required - si true, le menu ne sera affiché que sur la page d'accueil
15 @param - isSibebarCollapsible - boolean - required - si true, le menu pourra être masqué
16 @param - sidebarMenuClass - string - optionnal - Ajoute une classe au menu vertical. Par défaut vide.
17 @param - showDefaultMenu - boolean - required - si true, affiche le menu
18 @param - hasSearchMenu - boolean - required - si true, ajoute la rercherche au menu
19 @param - typeSearch - string - required - Si Field, ajoute le champs de rercherche sinon un lien paramètre sur l'url de recherche précisée dans les paramètres les propriétés du site. Si la valeur est button une icone de recherche sera positionnée après le menu.
20 @param - searchUrl - string - required - Url pour l'icone de recherche. Par défaut récupère la valeur de l'url de recherche précisée dans les paramètres les propriétés du site.
21 @param - searchAction - string - required - Url d'action pour le formulaire nécessite typeSearch='field'
22 @param - searchSolr - boolean - required - si "true" fait la recherche sur Solr et non sur le moteur de recherche par défaut.
23 @param - searchParams - string - optional - tous champs à ajouter au formulaire nécessitent typeSearch='field'
24 @param - hasLogin - boolean - required - si true, le site est authentifié et propose un bouton de login (connexion Mon Paris)
25 @param - loginClass - string - optional - classe CSS pour le bouton de login
26 @param - mainClass - string - optional - classe CSS pour la balise main
27 @param - role - string - required - role aria par défaut
28 @param - params - string - optional - permet d'ajouter des paramètres HTML à la barre de navigation
29 -->
30 <#macro cMainNav title=favourite logoImg='' href='.' hasMenu=hasDefaultMenu?boolean hasUserThemeSwitch=hasUserThemeSwitch?boolean hasNestedMenu=true isSidebar=isMainSidebarMenu?boolean isSibebarCollapsible=isMainSidebarMenuCollapse?boolean sidebarMenuClass='' isOnlyHome=isBannerOnlyHome showDefaultMenu=true hasSearchMenu=false typeSearch='field' searchUrl=urlDefaultSearch searchAction='jsp/site/Portal.jsp' searchSolr=false searchParams='' isFixed=isFixedMenu?boolean hasLogin=false loginClass='' mainClass='' id='' class='' role='' params='' deprecated...>
31 <@deprecatedWarning args=deprecated />
32 <#assign pageId><#if page_id??>${page_id!'1'}<#else>0</#if></#assign>
33 <#if isSidebar>
34 <#assign isMainSidebarMenu=isSidebar >
35 <#else>
36 <header class="sticky-top navigation<#if isFixed> is-fixed</#if><#if hasBanner?boolean><#if isOnlyHome><#if pageId?number = 1> has-banner</#if><#else> has-banner</#if></#if>" id="main-banner-${page_id!'theme'}" role="banner">
37 </#if>
38 <div class="container main-header<#if class !=''> ${class!}</#if><#if isSidebar> is-sidebar<#if sidebarMenuClass!=''> ${sidebarMenuClass}</#if><#if isFixed> is-fixed</#if><#if hasBanner?boolean><#if isOnlyHome><#if pageId?number = 1> has-banner</#if><#else> has-banner</#if></#if></#if>"<#if role !=''> role='${role!}'</#if><#if id !=''> id="${id!}"</#if><#if params!=''> ${params}</#if>>
39 <nav class="navbar navbar-expand-lg navbar-light " aria-labelledby="main-nav-title">
40 <a class="navbar-brand" href="${href!'.'}">
41 <#if logoImg !=''><img src="${logoImg}" class="img-fluid main-logo" alt="${title}" aria-hidden="true"></#if>
42 <span id="main-nav-title" class="visually-hidden-focusable">
43 ${title}
44 </span>
45 </a>
46 <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarMainMenu" aria-label="#i18n{theme.showmenu}" aria-controls="navbarMainMenu">
47 <span class="navbar-toggler-icon"><span class="visually-hidden-focusable">#i18n{theme.showmenu}</span></span>
48 </button>
49 <div class="collapse navbar-collapse text-center" aria-label="#i18n{theme.mainMenu} #i18n{theme.showmenu}" role="navigation">
50 <ul class="navbar-nav w-100 align-items-center" aria-label="#i18n{theme.mainMenu}">
51 <li class="nav-item<#if pageId = '1'> active</#if>">
52 <a class="nav-link text-capitalize" title="${title}" href="." target="_top" aria-current="<#if pageId = '1'>page<#else>false</#if>">#i18n{portal.site.page_home.label}</a>
53 </li>
54 <#if hasMenu>
55 <#assign menu=page_main_menu!>
56 <#if showDefaultMenu>${page_main_menu_html!menu}</#if>
57 </#if>
58 <#if hasNestedMenu>
59 <#nested>
60 </#if>
61 <#if hasMenu && hasSearchMenu && typeSearch='icon'>
62 <@cMainNavItem title='' class='ms-auto' url=searchUrl >
63 <@parisIcon name='search' class='main-color' />
64 <@cInline class='visually-hidden'>#i18n{portal.util.labelSearch}</@cInline>
65 </@cMainNavItem>
66 </#if>
67 <#if hasMenu && hasSearchMenu && typeSearch='field'>
68 <#assign formSearchAction><#if searchAction=''>${urlSearch!}<#else>${searchAction!}</#if></#assign>
69 <@cMainNavItem title='' url='' class='ms-auto' >
70 <@cForm action=formSearchAction class='d-none d-md-none d-lg-block p-sm' params='role="search"'>
71 <input type="hidden" name="page" value="search<#if searchSolr>-solr</#if>">
72 <#if searchParams !=''>${searchParams!}</#if>
73 <@cLabel for='header-query-top' class='visually-hidden' label='#i18n{portal.util.labelSearch}' />
74 <@cInputGroup class='mt-0'>
75 <@cInput name='query' id='header-query-top' placeholder='#i18n{portal.site.page_menu_tools.labelSearch}' autocomplete='on' />
76 <@cInputGroupAddon>
77 <@cBtn label='' id='button-main-search' class='secondary' params='aria-label="#i18n{portal.site.page_menu_tools.labelSearch}"'>
78 <@parisIcon name='search' title='#i18n{portal.site.page_menu_tools.labelSearch}' />
79 </@cBtn >
80 </@cInputGroupAddon>
81 </@cInputGroup>
82 </@cForm>
83 </@cMainNavItem>
84 <@cMainNavItem title='' class='ms-auto d-none d-md-flex d-lg-none ' urlClass='border-0' url=searchUrl>
85 <@parisIcon name='search' class='main-color' />
86 <@cInline class='visually-hidden'>#i18n{portal.util.labelSearch}</@cInline>
87 </@cMainNavItem>
88 </#if>
89 <#if hasLogin>
90 <li class="nav-item navbar-user<#if loginClass !='' > ${loginClass!}</#if> ms-auto" aria-label="#i18n{theme.labelMyAcount}">
91 ${pageinclude_userlogin?default("")}
92 </li>
93 </#if>
94 <#if hasUserThemeSwitch>
95 <li id="bs-theme-switcher" class="nav-item dropdown ms-auto" >
96 <button class="btn btn-link nav-link px-0 px-lg-2 py-2 dropdown-toggle d-flex align-items-center" id="bd-theme" type="button" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static" aria-label="Toggle theme (light)">
97 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-sun"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
98 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-moon"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
99 <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
100 </button>
101 <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme-text">
102 <li>
103 <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="light" aria-pressed="true">
104 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-sun"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
105 Light
106 </button>
107 </li>
108 <li>
109 <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
110 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-moon"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
111 Dark
112 </button>
113 </li>
114 <li>
115 <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="auto" aria-pressed="false">
116 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-sun-moon"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9.173 14.83a4 4 0 1 1 5.657 -5.657" /><path d="M11.294 12.707l.174 .247a7.5 7.5 0 0 0 8.845 2.492a9 9 0 0 1 -14.671 2.914" /><path d="M3 12h1" /><path d="M12 3v1" /><path d="M5.6 5.6l.7 .7" /><path d="M3 21l18 -18" /></svg>
117 Auto
118 </li>
119 </ul>
120 </li>
121 </#if>
122 <li class="nav-item dropdown" >
123 <#if pageId = '1'>
124 <a href="${footerLinkContact!}" class="btn btn-sm btn-primary ms-lg-4">${footerLinkContactLabel!}</a>
125 <#else>
126 <form class="form-inline search-wrapper d-none d-lg-block" action="jsp/site/Portal.jsp">
127 <input name="page" type="hidden" value="search">
128 <input id="search-by" name="query" type="search" class="form-control" placeholder="Search here ...">
129 <button class="border-0 bg-white" type="submit"><i class="ti ti-search"></i></button>
130 </form>
131 </#if>
132 </li>
133 </ul>
134
135 </div>
136 </nav>
137 </div>
138 <#if isSidebar>
139 <#assign menu=page_main_menu!>
140 <div id="layout-sidebar-wrapper">
141 <header class="theme-main-header<#if sidebarMenuClass!=''> ${sidebarMenuClass}</#if>" id="main-banner-${pageId!'theme'}" role="banner">
142 <div id="sidebar-main-menu">
143 <#if isSibebarCollapsible>
144 <button id="main-sidebar-collapse" type="button" class="btn btn-outline-primary btn-mini" aria-label="#i18n{portal.util.labelShow} / #i18n{portal.util.labelHide} #i18n{theme.mainMenu}" aria-expanded="true" aria-controls="main-menu-sidebar">
145 <@parisIcon name='burger' />
146 </button>
147 </#if>
148 <nav class="navbar-main sidebar-nav " id="main-menu-sidebar" aria-label="#i18n{theme.mainMenu}" role="navigation">
149 <ul class="navbar-nav navbar-main flex-column me-auto" aria-label="#i18n{theme.mainMenu}">
150 <#if showDefaultMenu>${page_main_menu_html!menu}</#if>
151 <#if hasSearchMenu && typeSearch='icon'>
152 <@cMainNavItem title='' url=searchUrl >
153 <svg class="paris-icon paris-icon-search main-color" role="img" aria-hidden="true" focusable="false">
154 <use xlink:href="#paris-icon-search"></use>
155 </svg>
156 <@cInline class='visually-hidden'>#i18n{portal.util.labelSearch}</@cInline>
157 </@cMainNavItem>
158 </#if>
159 <#nested>
160 </ul>
161 <#if hasSearchMenu && typeSearch='field'>
162 <#assign formSearchAction><#if searchAction=''>${urlSearch!}<#else>${searchAction!}</#if></#assign>
163 <@cForm action=formSearchAction class='mx-m' params='role="search"'>
164 <input type="hidden" name="page" value="search<#if searchSolr>-solr</#if>">
165 <#if searchParams !=''>${searchParams!}</#if>
166 <@cLabel for='header-query' class='visually-hidden' label='#i18n{portal.util.labelSearch}' />
167 <@cInputGroup>
168 <@cInput name='query' id='header-query' placeholder='#i18n{portal.site.page_menu_tools.labelSearch}' />
169 <@cInputGroupAddon>
170 <@cBtn label='' id='button-main-search-top' class='secondary' params='aria-label="#i18n{portal.site.page_menu_tools.labelSearch}"'>
171 <@parisIcon name='search' title='#i18n{portal.site.page_menu_tools.labelSearch}' />
172 </@cBtn >
173 </@cInputGroupAddon>
174 </@cInputGroup>
175 </@cForm>
176 </#if>
177 </nav>
178 </div>
179 </header>
180 <div id="layout-sidebar">
181 <main id="main"<#if mainClass !=''> class="${mainClass!}"</#if> role="main">
182 <#if hasBanner?boolean>
183 <#assign optMainBanner=.get_optional_template('../../../../site/theme_frameset_main_banner.html')>
184 <#if optMainBanner.exists><@optMainBanner.include /></#if>
185 </#if>
186 <#else>
187 <#if hasBanner?boolean>
188 <#assign optMainBanner=.get_optional_template('../../../../site/theme_frameset_main_banner.html')>
189 <#if optMainBanner.exists><@optMainBanner.include /></#if>
190 </#if>
191 </header>
192 <main id="main"<#if mainClass !=''> class="${mainClass!}"</#if> role="main">
193 </#if>
194 </#macro>