view/theme/frio/templates/nav.tpl

   1 {{* we have modified the navmenu (look at function frio_remote_nav() ) to have remote links. *}}
   2 {{if $userinfo}}
   3         <header>
   4                 {{* {{$langselector}} *}}
   5
   6                 <div id="site-location">{{$sitelocation}}</div>
   7                 <div id="banner" class="hidden-sm hidden-xs">
   8                         {{* show on remote/visitor connections another logo which symbols that fact*}}
   9                         {{if $nav.remote}}
  10                                 <a href="{{$baseurl}}">
  11                                         <div id="remote-logo-img" aria-label="{{$home}}"></div>
  12                                 </a>
  13                         {{else}}
  14                                 {{* #logo-img is 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>
  19                                 </a>
  20                         {{/if}}
  21                 </div>
  22         </header>
  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">
  29
  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>
  35                                         </button>
  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>
  40                                         </button>
  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>
  45                                         </button>
  46
  47                                         {{* Left section of the NavBar with navigation shortcuts/icons *}}
  48                                         <ul class="nav navbar-left" role="menubar">
  49                                                 {{if $nav.network}}
  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>
  55                                                         </li>
  56                                                 {{/if}}
  57                                                 {{if $nav.home}}
  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>
  63                                                         </li>
  64                                                 {{/if}}
  65
  66                                                 {{if $nav.community}}
  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>
  71                                                         </li>
  72                                                 {{/if}}
  73
  74                                                 {{if $nav.messages}}
  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>
  81                                                         </li>
  82                                                 {{/if}}
  83
  84                                                 {{if $nav.calendar}}
  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>
  89                                                         </li>
  90                                                 {{/if}}
  91
  92                                                 {{if $nav.contacts}}
  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>
  98                                                         </li>
  99                                                 {{/if}}
 100
 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>
 109                                                                 </button>
 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>
 122                                                                                 </div>
 123
 124                                                                         </li>
 125
 126                                                                         <li role="presentation">
 127                                                                                 <p role="menuitem" class="text-muted"><i>{{$emptynotifications}}</i></p>
 128                                                                         </li>
 129                                                                 </ul>
 130                                                         </li>
 131                                                 {{/if}}
 132
 133                                         </ul>
 134                                 </div>
 135
 136                                 {{* This is the right part of the NavBar. It includes the search and the user menu *}}
 137                                 <div class="topbar-actions pull-right">
 138                                         <ul class="nav">
 139
 140                                                 {{* The search box *}}
 141                                                 {{if $nav.search}}
 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>
 150                                                                         </div>
 151                                                                 </form>
 152                                                         </li>
 153                                                 {{/if}}
 154
 155                                                 {{* The user dropdown menu *}}
 156                                                 {{if $userinfo}}
 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}}
 164                                                                         </div>
 165
 166                                                                         <img id="avatar" src="{{$userinfo.icon}}" alt="{{$userinfo.name}}">
 167                                                                         <span class="caret"></span>
 168                                                                 </button>
 169
 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">
 173                                                                         {{if $nav.remote}}
 174                                                                                 {{if $nav.sitename}}
 175                                                                                         <li id="nav-sitename" role="menuitem">{{$nav.sitename}}</li>
 176                                                                                         <li role="presentation" class="divider"></li>
 177                                                                                 {{/if}}
 178                                                                         {{/if}}
 179                                                                         {{foreach $nav.usermenu as $usermenu}}
 180                                                                                 <li role="presentation">
 181                                                                                         <a role="menuitem" class="{{$usermenu.2}}" href="{{$usermenu.0}}"
 182                                                                                                 title="{{$usermenu.3}}">
 183                                                                                                 {{$usermenu.1}}
 184                                                                                         </a>
 185                                                                                 </li>
 186                                                                         {{/foreach}}
 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}}
 193                                                                                         </a>
 194                                                                                 </li>
 195                                                                         {{/if}}
 196                                                                         {{if $nav.messages}}
 197                                                                                 <li role="presentation">
 198                                                                                         <a role="menuitem"
 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>
 204                                                                                         </a>
 205                                                                                 </li>
 206                                                                         {{/if}}
 207                                                                         <li role="presentation" class="divider"></li>
 208                                                                         {{if $nav.contacts}}
 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>
 214                                                                                                 {{$nav.contacts.1}}
 215                                                                                         </a>
 216                                                                                 </li>
 217                                                                         {{/if}}
 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}}
 224                                                                                         </a>
 225                                                                                 </li>
 226                                                                         {{/if}}
 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}}
 231                                                                                 </a>
 232                                                                         </li>
 233                                                                         <li role="presentation" class="divider"></li>
 234                                                                         {{if $nav.apps}}
 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}}
 239                                                                                         </a>
 240                                                                                 </li>
 241                                                                                 <li role="presentation" class="divider"></li>
 242                                                                         {{/if}}
 243                                                                         {{if $nav.help}}
 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}}
 248                                                                                         </a>
 249                                                                                 </li>
 250                                                                         {{/if}}
 251                                                                         {{if $nav.settings}}
 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}}
 256                                                                                         </a>
 257                                                                                 </li>
 258                                                                         {{/if}}
 259                                                                         {{if $nav.admin}}
 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>
 264                                                                                                 {{$nav.admin.1}}
 265                                                                                         </a>
 266                                                                                 </li>
 267                                                                         {{/if}}
 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}}
 274                                                                                         </a>
 275                                                                                 </li>
 276                                                                         {{/if}}
 277                                                                         {{if $nav.tos}}
 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}}
 283                                                                                         </a>
 284                                                                                 </li>
 285                                                                         {{/if}}
 286                                                                         <li role="presentation" class="divider"></li>
 287                                                                         {{if $nav.logout}}
 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>
 292                                                                                                 {{$nav.logout.1}}
 293                                                                                         </a>
 294                                                                                 </li>
 295                                                                         {{else}}
 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>
 300                                                                                                 {{$nav.login.1}}
 301                                                                                         </a>
 302                                                                                 </li>
 303                                                                         {{/if}}
 304                                                                 </ul>
 305                                                         </li>{{* End of userinfo dropdown menu *}}
 306                                                 {{/if}}
 307
 308                                                 <!-- Language selector, I do not find it relevant, activate if necessary.
 309                                                 <li>{{$langselector}}</li>
 310                                                 -->
 311                                         </ul>
 312                                 </div>{{* End of right navbar *}}
 313
 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">
 320                                                         {{if $nav.remote}}
 321                                                                 {{if $nav.sitename}}
 322                                                                         <li role="menuitem" class="nav-sitename list-group-item">{{$nav.sitename}}</li>
 323                                                                 {{/if}}
 324                                                         {{/if}}
 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}}
 329                                                         </li>
 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}}
 334                                                                         </a>
 335                                                                 </li>
 336                                                         {{/foreach}}
 337                                                         {{if $nav.notifications || $nav.contacts || $nav.messages || $nav.delegation}}
 338                                                                 <li role="presentation" class="divider"></li>
 339                                                         {{/if}}
 340                                                         {{if $nav.notifications}}
 341                                                                 <li role="presentation" class="list-group-item">
 342                                                                         <a role="menuitem"
 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}}
 345                                                                         </a>
 346                                                                 </li>
 347                                                         {{/if}}
 348                                                         {{if $nav.contacts}}
 349                                                                 <li role="presentation" class="list-group-item">
 350                                                                         <a role="menuitem"
 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>
 353                                                                                 {{$nav.contacts.1}}
 354                                                                         </a>
 355                                                                 </li>
 356                                                         {{/if}}
 357                                                         {{if $nav.messages}}
 358                                                                 <li role="presentation" class="list-group-item">
 359                                                                         <a role="menuitem"
 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>
 362                                                                                 {{$nav.messages.1}}
 363                                                                         </a>
 364                                                                 </li>
 365                                                         {{/if}}
 366                                                         {{if $nav.delegation}}
 367                                                                 <li role="presentation" class="list-group-item">
 368                                                                         <a role="menuitem"
 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}}
 372                                                                         </a>
 373                                                                 </li>
 374                                                         {{/if}}
 375                                                         {{if $nav.settings || $nav.admin || $nav.logout}}
 376                                                                 <li role="presentation" class="divider"></li>
 377                                                         {{/if}}
 378                                                         {{if $nav.settings}}
 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>
 382                                                                                 {{$nav.settings.1}}
 383                                                                         </a>
 384                                                                 </li>
 385                                                         {{/if}}
 386                                                         {{if $nav.admin}}
 387                                                                 <li role="presentation" class="list-group-item">
 388                                                                         <a role="menuitem"
 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>
 391                                                                                 {{$nav.admin.1}}
 392                                                                         </a>
 393                                                                 </li>
 394                                                         {{/if}}
 395                                                         {{if $nav.moderation}}
 396                                                                 <li role="presentation" class="list-group-item">
 397                                                                         <a role="menuitem"
 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}}
 401                                                                         </a>
 402                                                                 </li>
 403                                                         {{/if}}
 404                                                         {{if $nav.logout}}
 405                                                                 <li role="presentation" class="list-group-item">
 406                                                                         <a role="menuitem"
 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>
 409                                                                                 {{$nav.logout.1}}
 410                                                                         </a>
 411                                                                 </li>
 412                                                         {{else}}
 413                                                                 <li role="presentation" class="list-group-item">
 414                                                                         <a role="menuitem"
 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>
 417                                                                                 {{$nav.login.1}}
 418                                                                         </a>
 419                                                                 </li>
 420                                                         {{/if}}
 421                                                 </ul>
 422                                         </div>
 423                                 </div>
 424                                 <!--/.sidebar-offcanvas-->
 425                         </div><!-- end of div for navbar width-->
 426                 </div><!-- /.container -->
 427         </nav><!-- /.navbar -->
 428 {{else}}
 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>
 437                                 </button>
 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>
 442                                         </div>
 443                                 </a>
 444                         </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>
 451                                                 </a>
 452                                         </li>
 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>
 457                                                 </a>
 458                                         </li>
 459                                 </ul>
 460                         </div>
 461                 </div>
 462         </nav>
 463 {{/if}}
 464
 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>
 473                         </div>
 474                 </form>
 475         </div>
 476 </div>
 477
 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>
 484         </div>
 485 </div>
 486
 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">
 490         <defs>
 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">
 494                         </path>
 495                 </mask>
 496         </defs>
 497 </svg>