Piwigo/admin/themes/default/template/include/admin_nav.inc.tpl

<div id="menubar" class="enlarged">
  <div id="menubar-content">
  
    <div id="user-actions-container" class="menu-block">
      <div class="user-actions">
        <div class="username-container">
          <span>
            <div class="user-container-initials-wrapper">
              <span class="icon-green"><!-- initials --></span>
            </div>
            <span id="menu-username" class="reduced-hidden">{$USERNAME}</span>
          </span>
          <i class="icon-left-open reduced-hidden"></i>
        </div>

     
        <div class="user-sub-link-container">
          <div class="user-infos">
            <p id="dropdown-username" class="username">{$USERNAME}</p>
            <p class="">{$USER_EMAIL}</p>
          </div>
          <div id="apperance-switch-controller">
            <p><i class="icon-moon-inv"></i>Apperance</p>
          
            <span>
              <div id="apperance-switch" class="tiptip" title="{'Switch to clear or dark colors for administration'|translate}">
                  <label class="font-checkbox no-bold">
                    <span class="icon-dot-circled"></span>
                    <input type="radio" name="appearance" value="auto" onclick="checkModeSelection()">
                    Automatic
                  </label>

                  <label class="font-checkbox no-bold">
                    <span class="icon-dot-circled"></span>
                    <input type="radio" name="appearance" value="clear" onclick="checkModeSelection()">
                    Light
                  </label>

                  <label class="font-checkbox no-bold">
                    <span class="icon-dot-circled"></span>
                    <input type="radio" name="appearance" value="roma" onclick="checkModeSelection()">
                    Dark
                  </label>

              </div>
            </span>
          </div>
          <a href="{$U_PROFILE}"><i class="icon-brush"></i>Edit my profil</a>
          <a href="{$U_FAQ}"><i class="icon-help-circled"></i>Help me</a>
          <a id="log-out"><i class="icon-logout"></i>Log out</a>
        </div>
      </div>
      <div class="tiptip" title="{'Gallery'|translate}">
        <a class="gallery-link mobile-hidden" href="{$U_RETURN}"><i class="icon-home"></i><span class="reduced-hidden">{'Gallery'|@translate}&nbsp;</span></a>
      </div>
    </div>

    <div id="admin-pages" class="menu-block">
      <div id="adminHome" class="page-link {if "dashboard" == $ACTIVE_PAGE}active{/if}" title="{'Dashboard'|translate}">
        <span class="active-border"></span>
        <a href="{$U_ADMIN}"><i class="icon-television"></i><span class="reduced-hidden">{'Dashboard'|@translate}&nbsp;</span></a>
        <span class="hover"></span>
      </div>
      
      {* Photos section *}
      <div class="page-link {if "photo" == $ACTIVE_PAGE}active{/if}" title="{'Photos'|translate}">
        <span>
          <i class="icon-picture"></i><span class="reduced-hidden">{'Photos'|@translate}&nbsp;</span>
          <span class="hover">
            <i class="icon-down-open"></i>
          </span>
        </span>
        <div class="sub-link-container">
          {* Photos sub-link prefilter start *}
          <a href="{$U_ADD_PHOTOS}" class="sub-link"><i class="icon-plus-circled"></i>{'Add'|@translate}</a>
{if $SHOW_RATING}
          <a href="{$U_RATING}" class="sub-link"><i class="icon-star"></i>{'Rating'|@translate}</a>
{/if}
          <a href="{$U_TAGS}" class="sub-link"><i class="icon-tags"></i>{'Tags'|@translate}</a>
          <a href="{$U_RECENT_SET}" class="sub-link"><i class="icon-clock"></i>{'Recent photos'|@translate}</a>
          <a href="{$U_BATCH}" class="sub-link"><i class="icon-th"></i>{'Batch Manager'|@translate}</a>
{if $NB_PHOTOS_IN_CADDIE > 0}
          <a href="{$U_CADDIE}" class="sub-link"><i class="icon-flag"></i>{'Pinned'|@translate}<span class="adminMenubarCounter">{$NB_PHOTOS_IN_CADDIE}</span></a>
{/if}
{if $NB_ORPHANS > 0}
          <a href="{$U_ORPHANS}" class="sub-link"><i class="icon-heart-broken"></i>{'Orphans'|@translate}<span class="adminMenubarCounter">{$NB_ORPHANS}</span></a>
{/if}
          {* Photos sub-link prefilter end *}
        </div>
      </div>

      {* Albums section *}
      <div class="page-link {if "album" == $ACTIVE_PAGE}active{/if}">
        <span>
          <i class="icon-sitemap"></i><span class="reduced-hidden">{'Albums'|@translate}&nbsp;</span>
          <span class="hover">
            <i class="icon-down-open"></i>
          </span>
        </span>
        <div class="sub-link-container">
          {* Albums sub-link prefilter start *}
          <a href="{$U_ALBUMS}" class="sub-link"><i class="icon-folder-open"></i>{'Manage'|@translate}</a>
          <a href="{$U_CAT_OPTIONS}" class="sub-link"><i class="icon-pencil"></i>{'Properties'|@translate}</a>
          <a href="{$U_PERMALINKS}" class="sub-link"><i class="icon-link-1"></i>{'Permalinks'|@translate}</a>
          {* Albums sub-link prefilter end *}
        </div>
      </div>

      {* Users section *}
      <div class="page-link {if "user" == $ACTIVE_PAGE}active{/if}">
        <span>
          <i class="icon-users"></i><span class="reduced-hidden">{'Users'|@translate}&nbsp;</span>
          <span class="hover">
            <i class="icon-down-open"></i>
          </span>
        </span>
        <div class="sub-link-container">
          {* Users sub-link prefilter start *}
          <a href="{$U_USERS}" class="sub-link"><i class="icon-user-add"></i>{'Manage'|@translate}</a>
          <a href="{$U_GROUPS}" class="sub-link"><i class="icon-group"></i>{'Groups'|@translate}</a>
          <a href="{$U_ACTIVITY}" class="sub-link"><i class="icon-pulse"></i>{'Activity'|@translate}</a>
          <a href="{$U_NOTIFICATION_BY_MAIL}" class="sub-link"><i class="icon-mail-1"></i>{'Notification'|@translate}</a>
          {* Users sub-link prefilter end *}
        </div>
      </div>

      {* Plugins section *}
      <div class="page-link {if "plugin" == $ACTIVE_PAGE}active{/if}">
        <span class="active-border"></span>
        <a href="{$U_PLUGINS}"><i class="icon-puzzle"></i><span class="reduced-hidden">{'Plugins'|@translate}&nbsp;</span></a>
        <span class="hover"></span>
      </div>

      {* Tools section *}
      <div class="page-link {if "tool" == $ACTIVE_PAGE}active{/if}">
        <span>
          <i class="icon-wrench"></i><span class="reduced-hidden">{'Tools'|@translate}&nbsp;</span>
          <span class="hover">
            <i class="icon-down-open"></i>
          </span>
        </span>
        <div class="sub-link-container">
          {* Tools sub-link prefilter start *}
{if $ENABLE_SYNCHRONIZATION}
          <a href="{$U_CAT_UPDATE}" class="sub-link"><i class="icon-exchange"></i>{'Synchronize'|@translate}</a>
{/if}
          <a href="{$U_HISTORY_STAT}" class="sub-link"><i class="icon-signal"></i>{'History'|@translate}</a>
          <a href="{$U_MAINTENANCE}" class="sub-link"><i class="icon-tools"></i>{'Maintenance'|@translate}</a>
{if isset($U_COMMENTS)}
          <a href="{$U_COMMENTS}" class="sub-link">
            <i class="icon-chat"></i>{'Comments'|@translate}
  {if isset($NB_PENDING_COMMENTS) and $NB_PENDING_COMMENTS > 0}
            <span class="adminMenubarCounter" title="{'%d waiting for validation'|translate:$NB_PENDING_COMMENTS}">{$NB_PENDING_COMMENTS}</span>
  {/if}
          </a>
{/if}
{if isset($U_UPDATES)}
          <a href="{$U_UPDATES}" class="sub-link"><i class="icon-arrows-cw"></i>{'Updates'|@translate}</a>
{/if}
          {* Tools sub-link prefilter end *}
        </div>
      </div>

      {* Configuration section *}
      <div class="page-link {if "configuration" == $ACTIVE_PAGE}active{/if}">
        <span>
          <i class="icon-cog"></i><span class="reduced-hidden">{'Configuration'|@translate}&nbsp;</span>
          <span class="hover">
            <i class="icon-down-open"></i>
          </span>
        </span>
        <div class="sub-link-container">
          {* Confguration sub-link prefilter start *}
          <a href="{$U_CONFIG_GENERAL}" class="sub-link"><i class="icon-cog-alt"></i>{'Options'|@translate}</a>
          <a href="{$U_CONFIG_MENUBAR}" class="sub-link"><i class="icon-menu"></i>{'Menu Management'|@translate}</a>
{if {$U_SHOW_TEMPLATE_TAB}}
          <a href="{$U_CONFIG_EXTENTS}" class="sub-link"><i class="icon-code"></i>{'Templates'|@translate}</a>
{/if}
          <a href="{$U_CONFIG_LANGUAGES}" class="sub-link"><i class="icon-language"></i>{'Languages'|@translate}</a>
          <a href="{$U_CONFIG_THEMES}" class="sub-link"><i class="icon-brush"></i>{'Themes'|@translate}</a>
          {* Confguration sub-link prefilter end *}
        </div>
      </div>

    </div>

    <div id="shortcut-links" class="menu-block">
    </div>

  </div>

  <div id="dekstop-menu-footer" class="menu-block">
    <div id="reduce-enlarge">
        <div class="reduced-hidden"><i class="icon-reduce"></i><span>{'Reduce'|translate}&nbsp;</span></div>
        <div class="enlarged-hidden"><i class="icon-enlarge"></i></div>
    </div>
        
    <div>
      <a class="externalLink tiptip piwigo-logo" href="{$PHPWG_URL}" title="{'Visit Piwigo project website'|translate}">
        <img class="reduced-hidden" src="admin/themes/default/images/piwigo-grey.svg">
        <img class="enlarged-hidden" src="admin/themes/default/images/piwigo-grey-icon.svg">
      </a>
      {if isset($DISPLAY_BELL) and $DISPLAY_BELL}
      <span id="whats_new_notification" class="icon-blue tiptip" onclick="show_user_whats_new()" title="{'What\'s new in version %s'|translate:$WHATS_NEW_MAJOR_VERSION}">
        <i class="icon-bell"></i>
      </span>
      {/if}
    </div>
  </div>

  <div id="mobile-menu-footer" class="menu-block">
    <a class="gallery-link" href="{$U_RETURN}"><i class="icon-home"></i></a>
    <div>
      <span class="mobile-reduced">
        <i class="icon-menu" id="menu-toggle"></i>
      </span>
      <span class="">
        <i class="icon-cross"></i>
      </span>
    </div>
  </div>

</div>

<!-- menubar -->