view/theme/frio/templates/nav.tpl

   1 {{* we have modified the navmenu (look at function frio_remote_nav() ) to have remote links. $nav.userinfo is a new variable and replaces the original $userinfo variable *}}
   2 {{if $nav.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 an other logo which symols that fact*}}
   9                 {{if $nav.remote}}
  10                 <a href="{{$baseurl}}"><div id="remote-logo-img" aria-label="{{$home}}"></div></a>
  11                 {{else}}
  12                 {{* #logo-img is the the placeholder to insert a mask (friendica logo) into this div
  13                 For Firefox we have to call the paths of the mask (look at the bottom of this file).
  14                 Because for FF we need relative paths we apply them with js after the page is loaded (look at theme.js *}}
  15                 <a href="{{$baseurl}}"><div id="logo-img" aria-label="{{$home}}"></div></a>
  16                 {{/if}}
  17         </div>
  18 </header>
  19 <nav id="topbar-first" class="topbar">
  20         <div class="container">
  21                 <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 no-padding"><!-- div for navbar width-->
  22                         <!-- Brand and toggle get grouped for better mobile display -->
  23                         <div class="topbar-nav" role="navigation">
  24
  25                                 {{* Buttons for the mobile view *}}
  26                                 <button type="button" class="navbar-toggle collapsed pull-right" data-toggle="offcanvas" data-target="#myNavmenu" aria-controls="myNavmenu" aria-haspopup="true">
  27                                         <span class="sr-only">Toggle navigation</span>
  28                                         <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
  29                                 </button>
  30                                 <button type="button" class="navbar-toggle collapsed pull-right" data-toggle="collapse" data-target="#search-mobile" aria-expanded="false" aria-controls="search-mobile">
  31                                         <span class="sr-only">Toggle Search</span>
  32                                         <i class="fa fa-search" aria-hidden="true" style="color:#FFF;"></i>
  33                                 </button>
  34                                 <button type="button" class="navbar-toggle collapsed pull-left visible-sm visible-xs" data-toggle="offcanvas" data-target="aside" aria-haspopup="true">
  35                                         <span class="sr-only">Toggle navigation</span>
  36                                         <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
  37                                 </button>
  38
  39                                 {{* Left section of the NavBar with navigation shortcuts/icons *}}
  40                                 <ul class="nav navbar-nav navbar-left" role="menubar">
  41                                         {{if $nav.network}}
  42                                         <li class="nav-segment">
  43                                                 <a accesskey="n" class="nav-menu {{$sel.network}}" href="{{$nav.network.0}}" data-toggle="tooltip" aria-label="{{$nav.network.3}}" title="{{$nav.network.3}}"><i class="fa fa-lg fa-th" aria-hidden="true"></i><span id="net-update" class="nav-network-badge badge nav-notification"></span></a>
  44                                         </li>
  45                                         {{/if}}
  46                                         {{if $nav.home}}
  47                                         <li class="nav-segment">
  48                                                 <a accesskey="p" class="nav-menu {{$sel.home}}" href="{{$nav.home.0}}" data-toggle="tooltip" aria-label="{{$nav.home.3}}" title="{{$nav.home.3}}"><i class="fa fa-lg fa-home" aria-hidden="true"></i><span id="home-update" class="nav-home-badge badge nav-notification"></span></a>
  49                                         </li>
  50                                         {{/if}}
  51
  52                                         {{if $nav.community}}
  53                                         <li class="nav-segment">
  54                                                 <a accesskey="c" class="nav-menu {{$sel.community}}" href="{{$nav.community.0}}" data-toggle="tooltip" aria-label="{{$nav.community.3}}" title="{{$nav.community.3}}"><i class="fa fa-lg fa-bullseye" aria-hidden="true"></i></a>
  55                                         </li>
  56                                         {{/if}}
  57
  58                                         {{if $nav.messages}}
  59                                         <li class="nav-segment hidden-xs">
  60                                                 <a accesskey="m" id="nav-messages-link" href="{{$nav.messages.0}}" data-toggle="tooltip" aria-label="{{$nav.messages.1}}" title="{{$nav.messages.1}}" class="nav-menu {{$sel.messages}}"><i class="fa fa-envelope fa-lg" aria-hidden="true"></i><span id="mail-update" class="nav-mail-badge badge nav-notification"></span></a>
  61                                         </li>
  62                                         {{/if}}
  63
  64                                         {{if $nav.events}}
  65                                         <li class="nav-segment hidden-xs">
  66                                                 <a accesskey="e" id="nav-events-link" href="{{$nav.events.0}}" data-toggle="tooltip" aria-label="{{$nav.events.1}}" title="{{$nav.events.1}}" class="nav-menu"><i class="fa fa-lg fa-calendar"></i></a>
  67                                         </li>
  68                                         {{/if}}
  69
  70                                         {{if $nav.contacts}}
  71                                         <li class="nav-segment hidden-xs">
  72                                                 <a accesskey="k" id="nav-contacts-link" href="{{$nav.contacts.0}}" data-toggle="tooltip" aria-label="{{$nav.contacts.1}}" title="{{$nav.contacts.1}}"class="nav-menu {{$sel.contacts}} {{$nav.contacts.2}}"><i class="fa fa-users fa-lg"></i></a>
  73 <!--                                            <span id="intro-update" aria-hidden="true" class="nav-intro-badge badge nav-notification" onclick="window.location.href = '{{$nav.introductions.0}}' " data-toggle="tooltip" title="{{$nav.introductions.3}}"></span>
  74 -->
  75                                         </li>
  76                                         {{/if}}
  77
  78                                         {{* The notifications dropdown *}}
  79                                         {{if $nav.notifications}}
  80
  81                                                 <li id="nav-notification" class="nav-segment dropdown" role="presentation">
  82 <!--
  83                                                         <a href="{{$nav.notifications.0}}" class="dropdown-toggle" rel="#nav-notifications-menu" data-toggle="tooltip" aria-label="{{$nav.notifications.1}}" title="{{$nav.notifications.1}}" role="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-controls="nav-notifications-menu">
  84 -->
  85                                                         <button id="dropdownMenu1" class="btn-link dropdown-toggle" data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="nav-notifications-menu">
  86                                                                 <span id="notification-update" class="nav-notification-badge badge nav-notification dropdown" data-toggle="dropdown"></span>
  87                                                                 <i class="fa fa-bell fa-lg" aria-label="{{$nav.notifications.1}}"></i>
  88                                                 </button>
  89 <!--                                                    </a>
  90 -->
  91                                                         {{* 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 *}}
  92                                                         <ul id="nav-notifications-menu" class="dropdown-menu menu-popup" role="menu" aria-labelledby="dropdownMenu1">
  93 <!--                                                    <ul id="nav-notifications-menu" class="dropdown-menu menu-popup" role="menu" aria-labelledby="dropdownMenu1" style="display: none;">
  94 -->
  95                                                                 {{* the following list entry must have the id "nav-notificaionts-mark-all". Without it this isn't visable. ....strange behavior :-/ *}}
  96                                                                 <li role="presentation" id="nav-notifications-mark-all" class="dropdown-header">
  97                                                                         <div class="arrow"></div>
  98                                                                         {{$nav.notifications.1}}
  99                                                                         <div class="dropdown-header-link">
 100                                                                                 <button role="menuitem" type="button" class="btn-link" onclick="notificationMarkAll();" data-toggle="tooltip" aria-label="{{$nav.notifications.mark.3}}" title="{{$nav.notifications.mark.3}}">{{$nav.notifications.mark.1}}</button>
 101                                                                         </div>
 102
 103                                                                 </li>
 104
 105                                                                 <li role="presentation">
 106                                                                         <p role="menuitem" class="text-muted"><i>{{$emptynotifications}}</i></p>
 107                                                                 </li>
 108                                                         </ul>
 109                                                 </li>
 110                                         {{/if}}
 111
 112                                 </ul>
 113                         </div>
 114
 115                         {{* This is the right part of the NavBar. It includes the search and the user menu *}}
 116                         <div class="topbar-actions pull-right">
 117                                 <ul class="nav">
 118
 119                                         {{* The search box *}}
 120                                         {{if $nav.search}}
 121                                         <li id="search-box" class="hidden-xs">
 122                                                         <form class="navbar-form" role="search" method="get" action="{{$nav.search.0}}">
 123                                                                 <!-- <img class="hidden-xs" src="{{$nav.userinfo.icon}}" alt="{{$nav.userinfo.name}}" style="max-width:33px; max-height:33px; min-width:33px; min-height:33px; width:33px; height:33px;"> -->
 124                                                                 <div class="form-group form-group-search">
 125                                                                         <input accesskey="s" id="nav-search-input-field" class="form-control form-search" type="text" name="q" data-toggle="tooltip" title="{{$search_hint}}" placeholder="{{$nav.search.1}}">
 126                                                                         <button class="btn btn-default btn-sm form-button-search" type="submit">{{$nav.search.1}}</button>
 127                                                                 </div>
 128                                                         </form>
 129                                         </li>
 130                                         {{/if}}
 131
 132                                         {{* The user dropdown menu *}}
 133                                         {{if $nav.userinfo}}
 134                                         <li id="nav-user-linkmenu" class="dropdown account nav-menu hidden-xs">
 135                                                 <button accesskey="u" id="main-menu" class="btn-link dropdown-toggle nav-avatar" data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="nav-user-menu">
 136                                                         <div aria-hidden="true" class="user-title pull-left hidden-xs hidden-sm hidden-md">
 137                                                                 <strong>{{$nav.userinfo.name}}</strong><br>
 138                                                                 {{if $nav.remote}}<span class="trunctate">{{$nav.remote}}</span>{{/if}}
 139                                                         </div>
 140
 141                                                         <img id="avatar" src="{{$nav.userinfo.icon}}" alt="{{$nav.userinfo.name}}">
 142                                                         <span class="caret"></span>
 143                                                 </button>
 144
 145                                                 {{* The list of available usermenu links *}}
 146                                                 <ul id="nav-user-menu" class="dropdown-menu pull-right menu-popup" role="menu" aria-labelledby="main-menu">
 147                                                         {{if $nav.remote}}{{if $nav.sitename}}
 148                                                         <li id="nav-sitename" role="menuitem">{{$nav.sitename}}</li>
 149                                                         <li role="presentation" class="divider"></li>
 150                                                         {{/if}}{{/if}}
 151                                                         {{foreach $nav.usermenu as $usermenu}}
 152                                                         <li role="presentation"><a role="menuitem" class="{{$usermenu.2}}" href="{{$usermenu.0}}" title="{{$usermenu.3}}">{{$usermenu.1}}</a></li>
 153                                                         {{/foreach}}
 154                                                         <li role="presentation" class="divider"></li>
 155                                                         {{if $nav.notifications}}
 156                                                         <li role="presentation"><a role="menuitem" href="{{$nav.notifications.all.0}}" title="{{$nav.notifications.1}}"><i class="fa fa-bell fa-fw" aria-hidden="true"></i> {{$nav.notifications.1}}</a></li>
 157                                                         {{/if}}
 158                                                         {{if $nav.messages}}
 159                                                         <li role="presentation"><a role="menuitem" class="nav-commlink {{$nav.messages.2}} {{$sel.messages}}" href="{{$nav.messages.0}}" title="{{$nav.messages.3}}" ><i class="fa fa-envelope fa-fw" aria-hidden="true"></i> {{$nav.messages.1}} <span id="mail-update-li" class="nav-mail-badge badge nav-notification"></span></a></li>
 160                                                         {{/if}}
 161                                                         <li role="presentation" class="divider"></li>
 162                                                         {{if $nav.contacts}}
 163                                                         <li role="presentation"><a role="menuitem" id="nav-menu-contacts-link" class="nav-link {{$nav.contacts.2}}" href="{{$nav.contacts.0}}" title="{{$nav.contacts.3}}"><i class="fa fa-users fa-fw" aria-hidden="true"></i> {{$nav.contacts.1}}</a><span id="intro-update-li" class="nav-intro-badge badge nav-notification"></span></li>
 164                                                         {{/if}}
 165                                                         {{if $nav.delegation}}
 166                                                         <li role="presentation"><a role="menuitem" id="nav-delegation-link" class="nav-commlink {{$nav.delegation.2}} {{$sel.delegation}}" href="{{$nav.delegation.0}}" title="{{$nav.delegation.3}}"><i class="fa fa-flag fa-fw" aria-hidden="true"></i> {{$nav.delegation.1}}</a></li>
 167                                                         {{/if}}
 168                                                         <li role="presentation"><a role="menuitem" id="nav-directory-link" class="nav-link {{$nav.directory.2}}" href="{{$nav.directory.0}}" title="{{$nav.directory.3}}"><i class="fa fa-sitemap fa-fw" aria-hidden="true"></i>{{$nav.directory.1}}</a></li>
 169                                                         <li role="presentation" class="divider"></li>
 170                                                         {{if $nav.apps}}
 171                                                         <li role="presentation"><a role="menuitem" id="nav-apps-link" class="nav-link {{$nav.apps.2}}" href="{{$nav.apps.0}}" title="{{$nav.apps.3}}" ><i class="fa fa-puzzle-piece fa-fw" aria-hidden="true"></i> {{$nav.apps.1}}</a>
 172                                                         <li role="presentation" class="divider"></li>
 173                                                         {{/if}}
 174                                                         {{if $nav.help}}
 175                                                         <li role="presentation"><a role="menuitem" id="nav-help-link" class="nav-link {{$nav.help.2}}" href="{{$nav.help.0}}" title="{{$nav.help.3}}" ><i class="fa fa-question-circle fa-fw" aria-hidden="true"></i> {{$nav.help.1}}</a></li>
 176                                                         {{/if}}
 177                                                         {{if $nav.settings}}
 178                                                         <li role="presentation"><a role="menuitem" id="nav-settings-link" class="nav-link {{$nav.settings.2}}" href="{{$nav.settings.0}}" title="{{$nav.settings.3}}"><i class="fa fa-cog fa-fw" aria-hidden="true"></i> {{$nav.settings.1}}</a></li>
 179                                                         {{/if}}
 180                                                         {{if $nav.admin}}
 181                                                         <li role="presentation"><a accesskey="a" role="menuitem" id="nav-admin-link" class="nav-link {{$nav.admin.2}}" href="{{$nav.admin.0}}" title="{{$nav.admin.3}}" ><i class="fa fa-user-secret fa-fw" aria-hidden="true"></i> {{$nav.admin.1}}</a></li>
 182                                                         {{/if}}
 183                                                         {{if $nav.tos}}
 184                                                         <li role="presentation" class="divider"></li>
 185                                                         <li role="presentation"><a role="menuitem" id="nav-tos-link" class="nav-link {{$nav.tos.2}}" href="{{$nav.tos.0}}" title="{{$nav.tos.3}}" ><i class="fa fa-file-text" aria-hidden="true"></i> {{$nav.tos.1}}</a></li>
 186                                                         {{/if}}
 187                                                         <li role="presentation" class="divider"></li>
 188                                                         {{if $nav.logout}}
 189                                                         <li role="presentation"><a role="menuitem" id="nav-logout-link" class="nav-link {{$nav.logout.2}}" href="{{$nav.logout.0}}" title="{{$nav.logout.3}}" ><i class="fa fa fa-sign-out fa-fw" aria-hidden="true"></i> {{$nav.logout.1}}</a></li>
 190                                                         {{else}}
 191                                                         <li role="presentation"><a role="menuitem" id="nav-login-link" class="nav-login-link {{$nav.login.2}}" href="{{$nav.login.0}}" title="{{$nav.login.3}}" ><i class="fa fa-power-off fa-fw" aria-hidden="true"></i> {{$nav.login.1}}</a></li>
 192                                                         {{/if}}
 193                                                 </ul>
 194                                         </li>{{* End of userinfo dropdown menu *}}
 195                                         {{/if}}
 196
 197                                 <!-- Language selector, I do not find it relevant, activate if necessary.
 198                                         <li>{{$langselector}}</li>
 199                                 -->
 200                                 </ul>
 201                         </div>{{* End of right navbar *}}
 202
 203                         {{* The usermenu dropdown for the mobile view. It is called via the buttons. Have a look at the top of this file *}}
 204                         <div id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-right offcanvas">
 205                                 <div class="nav-container">
 206                                         <ul role="menu" class="list-group">
 207                                                 {{if $nav.remote}}{{if $nav.sitename}}
 208                                                 <li role="menuitem" class="nav-sitename list-group-item">{{$nav.sitename}}</li>
 209                                                 {{/if}}{{/if}}
 210                                                 <li role="presentation" class="list-group-item"><img src="{{$nav.userinfo.icon}}" alt="{{$nav.userinfo.name}}" style="max-width:15px; max-height:15px; min-width:15px; min-height:15px; width:15px; height:15px;"> {{$nav.userinfo.name}}{{if $nav.remote}} ({{$nav.remote}}){{/if}}</li>
 211                                                 {{foreach $nav.usermenu as $usermenu}}
 212                                                 <li role="menuitem" class="list-group-item"><a role="menuitem" class="{{$usermenu.2}}" href="{{$usermenu.0}}" title="{{$usermenu.3}}">{{$usermenu.1}}</a></li>
 213                                                 {{/foreach}}
 214                                                 {{if $nav.notifications}}
 215                                                 <li role="presentation" class="list-group-item"><a role="menuitem" href="{{$nav.notifications.all.0}}" title="{{$nav.notifications.1}}"><i class="fa fa-bell fa-fw" aria-hidden="true"></i> {{$nav.notifications.1}}</a></li>
 216                                                 {{/if}}
 217                                                 {{if $nav.contacts}}
 218                                                 <li role="presentation" class="list-group-item"><a role="menuitem" class="nav-link {{$nav.contacts.2}}" href="{{$nav.contacts.0}}" title="{{$nav.contacts.3}}"><i class="fa fa-users fa-fw" aria-hidden="true"></i> {{$nav.contacts.1}}</a></li>
 219                                                 {{/if}}
 220                                                 {{if $nav.messages}}
 221                                                 <li role="presentation" class="list-group-item"><a role="menuitem" class="nav-link {{$nav.messages.2}} {{$sel.messages}}" href="{{$nav.messages.0}}" title="{{$nav.messages.3}}" ><i class="fa fa-envelope fa-fw" aria-hidden="true"></i> {{$nav.messages.1}}</a></li>
 222                                                 {{/if}}
 223                                                 {{if $nav.delegation}}
 224                                                 <li role="presentation" class="list-group-item"><a role="menuitem" class="nav-commlink {{$nav.delegation.2}} {{$sel.delegation}}" href="{{$nav.delegation.0}}" title="{{$nav.delegation.3}}"><i class="fa fa-flag fa-fw" aria-hidden="true"></i> {{$nav.delegation.1}}</a></li>
 225                                                 {{/if}}
 226                                                 {{if $nav.settings}}
 227                                                 <li role="presentation" class="list-group-item"><a role="menuitem" class="nav-link {{$nav.settings.2}}" href="{{$nav.settings.0}}" title="{{$nav.settings.3}}"><i class="fa fa-cog fa-fw" aria-hidden="true"></i> {{$nav.settings.1}}</a></li>
 228                                                 {{/if}}
 229                                                 {{if $nav.admin}}
 230                                                 <li role="presentation" class="list-group-item"><a role="menuitem" class="nav-link {{$nav.admin.2}}" href="{{$nav.admin.0}}" title="{{$nav.admin.3}}" ><i class="fa fa-user-secret fa-fw" aria-hidden="true"></i> {{$nav.admin.1}}</a></li>
 231                                                 {{/if}}
 232                                                 {{if $nav.logout}}
 233                                                 <li role="presentation" class="list-group-item"><a role="menuitem" class="nav-link {{$nav.logout.2}}" href="{{$nav.logout.0}}" title="{{$nav.logout.3}}" ><i class="fa fa fa-sign-out fa-fw" aria-hidden="true"></i> {{$nav.logout.1}}</a></li>
 234                                                 {{else}}
 235                                                 <li role="presentation" class="list-group-item"><a role="menuitem" class="nav-login-link {{$nav.login.2}}" href="{{$nav.login.0}}" title="{{$nav.login.3}}" ><i class="fa fa-power-off fa-fw" aria-hidden="true"></i> {{$nav.login.1}}</a></li>
 236                                                 {{/if}}
 237                                         </ul>
 238                                 </div>
 239                         </div><!--/.sidebar-offcanvas-->
 240                 </div><!-- end of div for navbar width-->
 241         </div><!-- /.container -->
 242 </nav><!-- /.navbar -->
 243 {{/if}}
 244
 245
 246 {{* The navbar for users which are not logged in *}}
 247 {{if $nav.userinfo == ''}}
 248 <nav class="navbar navbar-fixed-top">
 249         <div class="container">
 250                 <div class="navbar-header pull-left">
 251                         <a class="navbar-brand" href="#"><div id="navbrand-container">
 252                                 <div id="logo-img"></div>
 253                                 <div id="navbar-brand-text"> Friendica</div></div>
 254                         </a>
 255                 </div>
 256                 <div class="pull-right">
 257                         <ul class="nav navbar-nav navbar-right">
 258                                 <li role="presentation">
 259                                         <a href="login?mode=none" id="nav-login"
 260                                                 data-toggle="tooltip" aria-label="{{$nav.login.3}}" title="{{$nav.login.3}}">
 261                                                         <i class="fa fa-sign-in fa-fw" aria-hidden="true"></i>
 262                                         </a>
 263                                 </li>
 264                                 <li role="presentation">
 265                                         <a href="{{$nav.about.0}}" id="nav-about" data-toggle="tooltip" aria-label="{{$nav.about.3}}" title="{{$nav.about.3}}">
 266                                                 <i class="fa fa-info fa-fw" aria-hidden="true"></i>
 267                                         </a>
 268                                 </li>
 269                         </ul>
 270                 </div>
 271         </div>
 272 </nav>
 273
 274 {{/if}}
 275
 276 {{* provide a a search input for mobile view, which expands by pressing the search icon *}}
 277 <div id="search-mobile" class="hidden-lg hidden-md collapse">
 278         <form class="navbar-form" role="search" method="get" action="{{$nav.search.0}}">
 279                 <!-- <img class="hidden-xs" src="{{$nav.userinfo.icon}}" alt="{{$nav.userinfo.name}}" style="max-width:33px; max-height:33px; min-width:33px; min-height:33px; width:33px; height:33px;"> -->
 280                 <div class="form-group form-group-search">
 281                         <input id="nav-search-input-field-mobile" class="form-control form-search" type="text" name="q" data-toggle="tooltip" title="{{$search_hint}}" placeholder="{{$nav.search.1}}">
 282                         <button class="btn btn-default btn-sm form-button-search" type="submit">{{$nav.search.1}}</button>
 283                 </div>
 284         </form>
 285 </div>
 286
 287 {{* The second navbar which contains nav points of the actual page - (nav points are actual handled by this theme throug js *}}
 288 <div id="topbar-second" class="topbar">
 289         <div class="container">
 290                 <div class="col-lg-3 col-md-3 hidden-sm hidden-xs" id="nav-short-info"></div>
 291                 <div class="col-lg-7 col-md-7 col-sm-11 col-xs-10" id="tabmenu"></div>
 292                 <div class="col-lg-2 col-md-2 col-sm-1 col-xs-2" id="navbar-button"></div>
 293         </div>
 294 </div>
 295
 296 {{*The second part of the notifications dropdown menu. It handles the notifications *}}
 297 {{if $nav.notifications}}
 298 <ul id="nav-notifications-template" class="media-list" style="display:none;" rel="template">
 299         <li class="{4} notif-entry">
 300                 <div class="notif-entry-wrapper media">
 301                         <div class="notif-photo-wrapper media-object pull-left" aria-hidden="true"><a href="{6}" class="userinfo click-card" tabIndex="-1"><img data-src="{1}"></a></div>
 302                         <a href="{0}" class="notif-desc-wrapper media-body">
 303                                 {2}
 304                                 <div><time class="notif-when time" data-toggle="tooltip" title="{5}">{3}</time></div>
 305                         </a>
 306                 </div>
 307         </li>
 308 </ul>
 309 {{/if}}
 310
 311 {{* 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
 312 The result is a friendica logo in the user icon color.*}}
 313 <svg id="friendica-logo-mask" x="0px" y="0px" width="0px" height="0px" viewBox="0 0 250 250">
 314         <defs>
 315                 <mask id="logo-mask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
 316                         <path style="fill-rule:evenodd;clip-rule:evenodd;fill:#ffffff;" 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"></path>
 317                 </mask>
 318         </defs>
 319 </svg>