1 {{* we have modified the navmenu (look at function frio_remote_nav() ) to have remote links. *}}
4 {{* {{$langselector}} *}}
6 <div id="site-location">{{$sitelocation}}</div>
7 <div id="banner" class="hidden-sm hidden-xs">
8 {{* show on remote/visitor connections an other logo which symbols that fact*}}
10 <a href="{{$baseurl}}">
11 <div id="remote-logo-img" aria-label="{{$home}}"></div>
14 {{* #logo-img is the the placeholder to insert a mask (friendica logo) into this div
15 For Firefox we have to call the paths of the mask (look at the bottom of this file).
16 Because for FF we need relative paths we apply them with js after the page is loaded (look at theme.js *}}
17 <a href="{{$baseurl}}">
18 <div id="logo-img" aria-label="{{$home}}"></div>
23 <nav id="topbar-first" class="topbar">
24 <div class="container">
25 <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 no-padding">
26 <!-- div for navbar width-->
27 <!-- Brand and toggle get grouped for better mobile display -->
28 <div class="topbar-nav" role="navigation">
30 {{* Buttons for the mobile view *}}
31 <button type="button" class="navbar-toggle offcanvas-right-toggle pull-right"
32 aria-controls="offcanvasUsermenu" aria-haspopup="true">
33 <span class="sr-only">Toggle navigation</span>
34 <i class="fa fa-ellipsis-v fa-fw fa-lg" aria-hidden="true"></i>
36 <button type="button" class="navbar-toggle collapsed pull-right" data-toggle="collapse"
37 data-target="#search-mobile" aria-expanded="false" aria-controls="search-mobile">
38 <span class="sr-only">Toggle Search</span>
39 <i class="fa fa-search fa-fw fa-lg" aria-hidden="true"></i>
41 <button type="button" class="navbar-toggle collapsed pull-left visible-sm visible-xs"
42 data-toggle="offcanvas" data-target="aside" aria-haspopup="true">
43 <span class="sr-only">Toggle navigation</span>
44 <i class="fa fa-ellipsis-v fa-fw fa-lg" aria-hidden="true"></i>
47 {{* Left section of the NavBar with navigation shortcuts/icons *}}
48 <ul class="nav navbar-left" role="menubar">
50 <li class="nav-segment">
51 <a accesskey="n" class="nav-menu {{$sel.network}}" href="{{$nav.network.0}}"
52 data-toggle="tooltip" aria-label="{{$nav.network.3}}" title="{{$nav.network.3}}"><i
53 class="fa fa-lg fa-th fa-fw" aria-hidden="true"></i><span id="net-update"
54 class="nav-network-badge badge nav-notification"></span></a>
58 <li class="nav-segment">
59 <a accesskey="p" class="nav-menu {{$sel.home}}" href="{{$nav.home.0}}" data-toggle="tooltip"
60 aria-label="{{$nav.home.3}}" title="{{$nav.home.3}}"><i class="fa fa-lg fa-home fa-fw"
61 aria-hidden="true"></i><span id="home-update"
62 class="nav-home-badge badge nav-notification"></span></a>
67 <li class="nav-segment">
68 <a accesskey="c" class="nav-menu {{$sel.community}}" href="{{$nav.community.0}}"
69 data-toggle="tooltip" aria-label="{{$nav.community.3}}" title="{{$nav.community.3}}"><i
70 class="fa fa-lg fa-bullseye fa-fw" aria-hidden="true"></i></a>
75 <li class="nav-segment hidden-xs">
76 <a accesskey="m" id="nav-messages-link" href="{{$nav.messages.0}}" data-toggle="tooltip"
77 aria-label="{{$nav.messages.1}}" title="{{$nav.messages.1}}"
78 class="nav-menu {{$sel.messages}}"><i class="fa fa-envelope fa-lg fa-fw"
79 aria-hidden="true"></i><span id="mail-update"
80 class="nav-mail-badge badge nav-notification"></span></a>
85 <li class="nav-segment hidden-xs">
86 <a accesskey="e" id="nav-calendar-link" href="{{$nav.calendar.0}}" data-toggle="tooltip"
87 aria-label="{{$nav.calendar.1}}" title="{{$nav.calendar.1}}" class="nav-menu"><i
88 class="fa fa-lg fa-calendar fa-fw"></i></a>
93 <li class="nav-segment hidden-xs">
94 <a accesskey="k" id="nav-contacts-link" href="{{$nav.contacts.0}}" data-toggle="tooltip"
95 aria-label="{{$nav.contacts.1}}" title="{{$nav.contacts.1}}"
96 class="nav-menu {{$sel.contacts}} {{$nav.contacts.2}}"><i
97 class="fa fa-users fa-lg fa-fw"></i></a>
101 {{* The notifications dropdown *}}
102 {{if $nav.notifications}}
103 <li id="nav-notification" class="nav-segment dropdown" role="presentation">
104 <button id="nav-notifications-menu-btn" class="btn-link dropdown-toggle" data-toggle="dropdown"
105 type="button" aria-haspopup="true" aria-expanded="false"
106 aria-controls="nav-notifications-menu">
107 <span id="notification-update" class="nav-notification-badge badge nav-notification"></span>
108 <i class="fa fa-bell fa-lg" aria-label="{{$nav.notifications.1}}"></i>
110 {{* The notifications dropdown menu. There are two parts of menu. The second is at the bottom of this file. It is loaded via js. Look at nav-notifications-template *}}
111 <ul id="nav-notifications-menu" class="dropdown-menu menu-popup" role="menu"
112 aria-labelledby="nav-notifications-menu-btn">
113 {{* the following list entry must have the id "nav-notifications-mark-all". Without it this isn't visible. ....strange behavior :-/ *}}
114 <li role="presentation" id="nav-notifications-mark-all" class="dropdown-header">
115 <div class="arrow"></div>
116 {{$nav.notifications.1}}
117 <div class="dropdown-header-link">
118 <button role="menuitem" type="button" class="btn-link"
119 onclick="notificationMarkAll();" data-toggle="tooltip"
120 aria-label="{{$nav.notifications.mark.3}}"
121 title="{{$nav.notifications.mark.3}}">{{$nav.notifications.mark.1}}</button>
126 <li role="presentation">
127 <p role="menuitem" class="text-muted"><i>{{$emptynotifications}}</i></p>
136 {{* This is the right part of the NavBar. It includes the search and the user menu *}}
137 <div class="topbar-actions pull-right">
140 {{* The search box *}}
142 <li id="search-box" class="hidden-xs">
143 <form class="navbar-form" role="search" method="get" action="{{$nav.search.0}}">
144 <div class="form-group form-group-search">
145 <input accesskey="s" id="nav-search-input-field" class="form-control form-search"
146 type="text" name="q" data-toggle="tooltip" title="{{$search_hint}}"
147 placeholder="{{$nav.search.1}}">
148 <button class="btn btn-default btn-sm form-button-search"
149 type="submit">{{$nav.search.1}}</button>
155 {{* The user dropdown menu *}}
157 <li id="nav-user-linkmenu" class="dropdown account nav-menu hidden-xs">
158 <button accesskey="u" id="main-menu" class="btn-link dropdown-toggle nav-avatar"
159 data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false"
160 aria-controls="nav-user-menu">
161 <div aria-hidden="true" class="user-title pull-left hidden-xs hidden-sm hidden-md">
162 <strong>{{$userinfo.name}}</strong><br>
163 {{if $nav.remote}}<span class="trunctate">{{$nav.remote}}</span>{{/if}}
166 <img id="avatar" src="{{$userinfo.icon}}" alt="{{$userinfo.name}}">
167 <span class="caret"></span>
170 {{* The list of available usermenu links *}}
171 <ul id="nav-user-menu" class="dropdown-menu pull-right menu-popup" role="menu"
172 aria-labelledby="main-menu">
175 <li id="nav-sitename" role="menuitem">{{$nav.sitename}}</li>
176 <li role="presentation" class="divider"></li>
179 {{foreach $nav.usermenu as $usermenu}}
180 <li role="presentation">
181 <a role="menuitem" class="{{$usermenu.2}}" href="{{$usermenu.0}}"
182 title="{{$usermenu.3}}">
187 <li role="presentation" class="divider"></li>
188 {{if $nav.notifications}}
189 <li role="presentation">
190 <a role="menuitem" href="{{$nav.notifications.all.0}}" title="{{$nav.notifications.1}}">
191 <i class="fa fa-bell fa-fw" aria-hidden="true"></i>
192 {{$nav.notifications.1}}
197 <li role="presentation">
199 class="nav-commlink {{$nav.messages.2}} {{$sel.messages}}"
200 href="{{$nav.messages.0}}" title="{{$nav.messages.3}}">
201 <i class="fa fa-envelope fa-fw" aria-hidden="true"></i>
202 {{$nav.messages.1}} <span id="mail-update-li"
203 class="nav-mail-badge badge nav-notification"></span>
207 <li role="presentation" class="divider"></li>
209 <li role="presentation">
210 <a role="menuitem" id="nav-menu-contacts-link"
211 class="nav-link {{$nav.contacts.2}}" href="{{$nav.contacts.0}}"
212 title="{{$nav.contacts.3}}">
213 <i class="fa fa-users fa-fw" aria-hidden="true"></i>
218 {{if $nav.delegation}}
219 <li role="presentation">
220 <a role="menuitem" id="nav-delegation-link"
221 class="nav-commlink {{$nav.delegation.2}} {{$sel.delegation}}"
222 href="{{$nav.delegation.0}}" title="{{$nav.delegation.3}}">
223 <i class="fa fa-flag fa-fw" aria-hidden="true"></i> {{$nav.delegation.1}}
227 <li role="presentation">
228 <a role="menuitem" id="nav-directory-link" class="nav-link {{$nav.directory.2}}"
229 href="{{$nav.directory.0}}" title="{{$nav.directory.3}}">
230 <i class="fa fa-sitemap fa-fw" aria-hidden="true"></i>{{$nav.directory.1}}
233 <li role="presentation" class="divider"></li>
235 <li role="presentation">
236 <a role="menuitem" id="nav-apps-link" class="nav-link {{$nav.apps.2}}"
237 href="{{$nav.apps.0}}" title="{{$nav.apps.3}}">
238 <i class="fa fa-puzzle-piece fa-fw" aria-hidden="true"></i> {{$nav.apps.1}}
241 <li role="presentation" class="divider"></li>
244 <li role="presentation">
245 <a role="menuitem" id="nav-help-link" class="nav-link {{$nav.help.2}}"
246 href="{{$nav.help.0}}" title="{{$nav.help.3}}">
247 <i class="fa fa-question-circle fa-fw" aria-hidden="true"></i> {{$nav.help.1}}
252 <li role="presentation">
253 <a role="menuitem" id="nav-settings-link" class="nav-link {{$nav.settings.2}}"
254 href="{{$nav.settings.0}}" title="{{$nav.settings.3}}">
255 <i class="fa fa-cog fa-fw" aria-hidden="true"></i> {{$nav.settings.1}}
260 <li role="presentation">
261 <a accesskey="a" role="menuitem" id="nav-admin-link"
262 class="nav-link {{$nav.admin.2}}" href="{{$nav.admin.0}}"
263 title="{{$nav.admin.3}}"><i class="fa fa-user-secret fa-fw" aria-hidden="true"></i>
268 {{if $nav.moderation}}
269 <li role="presentation">
270 <a accesskey="m" role="menuitem" id="nav-moderation-link"
271 class="nav-link {{$nav.moderation.2}}" href="{{$nav.moderation.0}}"
272 title="{{$nav.moderation.3}}"><i class="fa fa-gavel fa-fw" aria-hidden="true"></i>
273 {{$nav.moderation.1}}
278 <li role="presentation" class="divider"></li>
279 <li role="presentation">
280 <a role="menuitem" id="nav-tos-link" class="nav-link {{$nav.tos.2}}"
281 href="{{$nav.tos.0}}" title="{{$nav.tos.3}}"><i class="fa fa-file-text"
282 aria-hidden="true"></i> {{$nav.tos.1}}
286 <li role="presentation" class="divider"></li>
288 <li role="presentation">
289 <a role="menuitem" id="nav-logout-link"
290 class="nav-link {{$nav.logout.2}}" href="{{$nav.logout.0}}"
291 title="{{$nav.logout.3}}"><i class="fa fa fa-sign-out fa-fw" aria-hidden="true"></i>
296 <li role="presentation">
297 <a role="menuitem" id="nav-login-link"
298 class="nav-login-link {{$nav.login.2}}" href="{{$nav.login.0}}"
299 title="{{$nav.login.3}}"><i class="fa fa-power-off fa-fw" aria-hidden="true"></i>
305 </li>{{* End of userinfo dropdown menu *}}
308 <!-- Language selector, I do not find it relevant, activate if necessary.
309 <li>{{$langselector}}</li>
312 </div>{{* End of right navbar *}}
314 {{* The usermenu dropdown for the mobile view. Offcanvas on the right side of the screen.
315 It is called via the buttons. Have a look at the top of this file *}}
316 <div class="offcanvas-right-overlay visible-xs-block"></div>
317 <div id="offcanvasUsermenu" class="offcanvas-right visible-xs-block">
318 <div class="nav-container">
319 <ul role="menu" class="list-group">
322 <li role="menuitem" class="nav-sitename list-group-item">{{$nav.sitename}}</li>
325 <li role="presentation" class="list-group-item">
326 <img src="{{$userinfo.icon}}" alt="{{$userinfo.name}}"
327 style="max-width:15px; max-height:15px; min-width:15px; min-height:15px; width:15px; height:15px;">
328 {{$userinfo.name}}{{if $nav.remote}} ({{$nav.remote}}){{/if}}
330 {{foreach $nav.usermenu as $usermenu}}
331 <li role="presentation" class="list-group-item">
332 <a role="menuitem" class="{{$usermenu.2}}"
333 href="{{$usermenu.0}}" title="{{$usermenu.3}}">{{$usermenu.1}}
337 {{if $nav.notifications || $nav.contacts || $nav.messages || $nav.delegation}}
338 <li role="presentation" class="divider"></li>
340 {{if $nav.notifications}}
341 <li role="presentation" class="list-group-item">
343 href="{{$nav.notifications.all.0}}" title="{{$nav.notifications.1}}"><i
344 class="fa fa-bell fa-fw" aria-hidden="true"></i> {{$nav.notifications.1}}
349 <li role="presentation" class="list-group-item">
351 class="nav-link {{$nav.contacts.2}}" href="{{$nav.contacts.0}}"
352 title="{{$nav.contacts.3}}"><i class="fa fa-users fa-fw" aria-hidden="true"></i>
358 <li role="presentation" class="list-group-item">
360 class="nav-link {{$nav.messages.2}} {{$sel.messages}}" href="{{$nav.messages.0}}"
361 title="{{$nav.messages.3}}"><i class="fa fa-envelope fa-fw" aria-hidden="true"></i>
366 {{if $nav.delegation}}
367 <li role="presentation" class="list-group-item">
369 class="nav-commlink {{$nav.delegation.2}} {{$sel.delegation}}"
370 href="{{$nav.delegation.0}}" title="{{$nav.delegation.3}}"><i class="fa fa-flag fa-fw"
371 aria-hidden="true"></i> {{$nav.delegation.1}}
375 {{if $nav.settings || $nav.admin || $nav.logout}}
376 <li role="presentation" class="divider"></li>
379 <li role="presentation" class="list-group-item">
380 <a role="menuitem" class="nav-link {{$nav.settings.2}}" href="{{$nav.settings.0}}"
381 title="{{$nav.settings.3}}"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>
387 <li role="presentation" class="list-group-item">
389 class="nav-link {{$nav.admin.2}}" href="{{$nav.admin.0}}" title="{{$nav.admin.3}}"><i
390 class="fa fa-user-secret fa-fw" aria-hidden="true"></i>
395 {{if $nav.moderation}}
396 <li role="presentation" class="list-group-item">
398 class="nav-link {{$nav.moderation.2}}" href="{{$nav.moderation.0}}" title="{{$nav.moderation.3}}"><i
399 class="fa fa-gavel fa-fw" aria-hidden="true"></i>
400 {{$nav.moderation.1}}
405 <li role="presentation" class="list-group-item">
407 class="nav-link {{$nav.logout.2}}" href="{{$nav.logout.0}}" title="{{$nav.logout.3}}"><i
408 class="fa fa fa-sign-out fa-fw" aria-hidden="true"></i>
413 <li role="presentation" class="list-group-item">
415 class="nav-login-link {{$nav.login.2}}" href="{{$nav.login.0}}"
416 title="{{$nav.login.3}}"><i class="fa fa-power-off fa-fw" aria-hidden="true"></i>
424 <!--/.sidebar-offcanvas-->
425 </div><!-- end of div for navbar width-->
426 </div><!-- /.container -->
427 </nav><!-- /.navbar -->
429 {{* The navbar for users which are not logged in *}}
430 <nav class="navbar navbar-fixed-top">
431 <div class="container">
432 <div class="navbar-header pull-left">
433 <button type="button" class="navbar-toggle collapsed pull-left visible-sm visible-xs"
434 data-toggle="offcanvas" data-target="aside" aria-haspopup="true">
435 <span class="sr-only">Toggle navigation</span>
436 <i class="fa fa-ellipsis-v fa-fw fa-lg" aria-hidden="true"></i>
438 <a class="navbar-brand" href="#">
439 <div id="navbrand-container">
440 <div id="logo-img"></div>
441 <div id="navbar-brand-text"> Friendica</div>
445 <div class="pull-right">
446 <ul class="nav navbar-nav navbar-right">
447 <li role="presentation">
448 <a href="login?mode=none" id="nav-login" data-toggle="tooltip" aria-label="{{$nav.login.3}}"
449 title="{{$nav.login.3}}">
450 <i class="fa fa-sign-in fa-fw" aria-hidden="true"></i>
453 <li role="presentation">
454 <a href="{{$nav.about.0}}" id="nav-about" data-toggle="tooltip" aria-label="{{$nav.about.3}}"
455 title="{{$nav.about.3}}">
456 <i class="fa fa-info fa-fw" aria-hidden="true"></i>
465 {{* provide a a search input for mobile view, which expands by pressing the search icon *}}
466 <div id="search-mobile" class="hidden-lg hidden-md hidden-sm collapse row well">
467 <div class="col-xs-12">
468 <form class="navbar-form" role="search" method="get" action="{{$nav.search.0}}">
469 <div class="form-group form-group-search">
470 <input id="nav-search-input-field-mobile" class="form-control form-search" type="text" name="q"
471 data-toggle="tooltip" title="{{$search_hint}}" placeholder="{{$nav.search.1}}">
472 <button class="btn btn-default btn-sm form-button-search" type="submit">{{$nav.search.1}}</button>
478 {{* The second navbar which contains nav points of the actual page - (nav points are actual handled by this theme throug js *}}
479 <div id="topbar-second" class="topbar">
480 <div class="container">
481 <div class="col-lg-3 col-md-3 hidden-sm hidden-xs" id="nav-short-info"></div>
482 <div class="col-lg-7 col-md-7 col-sm-11 col-xs-10" id="tabmenu"></div>
483 <div class="col-lg-2 col-md-2 col-sm-1 col-xs-2" id="navbar-button"></div>
487 {{* This is the mask of the firefox logo. We set the background of #logo-img to the user icon color and apply this mask to it
488 The result is a friendica logo in the user icon color.*}}
489 <svg id="friendica-logo-mask" x="0px" y="0px" width="0px" height="0px" viewBox="0 0 250 250">
491 <mask id="logo-mask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
492 <path style="fill-rule:evenodd;clip-rule:evenodd;fill:#ffffff;"
493 d="M0.796,0L0.172,0.004C0.068,0.008,0.008,0.068,0,0.172V0.824c0,0.076,0.06,0.16,0.168,0.172h0.652c0.072,0,0.148-0.06,0.172-0.144V0.14C1,0.06,0.908,0,0.796,0zM0.812,0.968H0.36v-0.224h0.312v-0.24H0.36V0.3h0.316l0-0.264l0.116-0c0.088,0,0.164,0.044,0.164,0.096l0,0.696C0.96,0.912,0.876,0.968,0.812,0.968z">