bansho/app/components/topbar/topbar.html

<nav ng-app="adagios.topbar" id="topbar" class="topbar" role="navigation" ng-controller="TopBarCtrl">
  <ul class="topbar__list topbar__list--left">
    <li class="topbar__item topbar__toggle-sidebar">
      <button class="topbar__button"
              type="button"
              data-toggle="collapse"
              data-target="#sidebarWrapper"
              aria-expanded="false"
              aria-controls="sidebarWrapper">
        <span class="visuallyhidden">Ouvrir la barre de navigation latérale</span>
        <i class="ico-menu"></i>
      </button>
    </li>
    <li class="topbar__item topbar__notifications">
      <button class="topbar__button"
              id="notifications"
              type="button"
              data-toggle="collapse"
              data-target="#notificationsPanel"
              aria-expanded="false"
              aria-controls="notificationsPanel">
        <span class="visuallyhidden">Voir les notifications</span>
        <i class="ico-bell-alt" data-notifications="{{ notifications }}"></i>
      </button>
      
      <div class="topbar__panel--fromleft collapse" id="notificationsPanel">
        <div class="topbar__panel__content tabpanel">
          <ul class="tablist clearfix">
            <li role="presentation" class="tablist__item active">
              <a href="#topOpenProblems"
                 class="tabpanel__tab"
                 aria-controls="topOpenProblems"
                 aria-expanded="true"
                 role="tab"
                 data-toggle="tab"
                 data-problems="27">Open problems
              </a>
            </li>
            <li role="presentation" class="tablist__item">
              <a href="#topAllProblems"
                 class="tabpanel__tab"
                 aria-controls="topAllProblems"
                 aria-expanded="false"
                 role="tab"
                 data-toggle="tab"
                 data-problems="38">All problems
              </a>
            </li>
          </ul>
          
          <div class="tab-content">
            <div role="tabpanel" class="problems tab-pane active" id="topOpenProblems">
              <ol class="problems__list">
                <li class="problems__item">
                  <strong class="problems__host state--ok">localhost</strong>
                  
                  <dl class="problems__desclist">
                    <dt class="problems__name state--warning">
                      <span>Root partition</span>
                      <small class="problems__duration">2 days, 8 hours</small>
                    </dt>
                    <dd class="problems__description">Disk warning - free space : / 673 MB (12% inode = 59%)</dd>
                  </dl>
                </li>
                <li class="problems__item">
                  <strong class="problems__host state--warning">www.theatlantic.com</strong>
                  
                  <dl class="problems__desclist">
                    <dt class="problems__name state--warning">
                      <span>HTTP www.theatlantic.com</span>
                      <small class="problems__duration">6 days, 5 hours</small>
                    </dt>
                    <dd class="problems__description">Check_http: invalid onedirection - $</dd>
                  </dl>
                </li>
                <li class="problems__item">
                  <strong class="problems__host state--error">www.savoirfairelinux.com</strong>
                  
                  <dl class="problems__desclist">
                    <dt class="problems__name state--warning">
                      <span>Verbis se superiores opere enim</span>
                      <small class="problems__duration">8 days, 5 hours</small>
                    </dt>
                    <dd class="problems__description">Check_http: invalid onedirection option - $</dd>
                    
                    <dt class="problems__name state--error">
                      <span>CPU utilization</span>
                      <small class="problems__duration">1 days, 3 hours</small>
                    </dt>
                    <dd class="problems__description">NRPE: Command checkCPU not defined</dd>
                    
                    <dt class="problems__name state--ok">
                      <span>Runnning services</span>
                      <small class="problems__duration">1 days, 12 hours</small>
                    </dt>
                    <dd class="problems__description">Levandi amicitias se fere - $</dd>
                  </dl>
                </li>
              </ol>
              
              <button class="problems__viewall" type="button">View all open problems</button>
            </div>
            
            <div role="tabpanel" class="tab-pane" id="topAllProblems">
              ALL PROBLEMS
            </div>
          </div>
        </div>
    </li>
  </ul>
  
  <ul class="topbar__list topbar__list--right">
    <li class="topbar__item topbar__settings">
      <button class="topbar__button"
              id="settings"
              data-toggle="collapse"
              data-target="#settingsPanel"
              aria-expanded="false"
              aria-controls="settingsPanel">
        <span class="visuallyhidden">Afficher la liste des paramètres</span>
        <i class="ico-sliders"></i>
      </button>
      
      <div class="topbar__panel--fromright collapse" id="settingsPanel">
        <nav class="topbar__panel__content" role="navigation">
          <ul class="topbar__settings__list">
            <li class="topbar__settings__item">
              <span class="topbar__settings__category">Adagios</span>
              
              <ul class="topbar__settings__sublist">
                <li class="topbar__settings__subitem"><a href="#">Missing Plugins</a></li>
                <li class="topbar__settings__subitem"><a href="#">Object History</a></li>
                <li class="topbar__settings__subitem"><a href="#">Configure</a></li>
              </ul>
            </li>
            <li class="topbar__settings__item">
              <span class="topbar__settings__category">Nagios</span>
              
              <ul class="topbar__settings__sublist">
                <li class="topbar__settings__subitem"><a href="#">Settings</a></li>
                <li class="topbar__settings__subitem"><a href="#">Edit nagios.cfg</a></li>
                <li class="topbar__settings__subitem"><a href="#">Nagios Service</a></li>
                <li class="topbar__settings__subitem"><a href="#">Pnp intergration</a></li>
              </ul>
            </li>
          </ul>
        </nav>
      </div>
    </li>
    <li class="topbar__item topbar__search">
      <form class="topbar-form topbar-left" role="search" id="search">
        <button class="topbar__button" type="button">
          <span class="visuallyhidden">Lancer une recherche</span>
          <i class="ico-search"></i>
        </button>
        
        <label class="visuallyhidden" for="searchfield">Recherche</label>
        <input id="searchfield" type="search" class="topbar__searchfield form-control" placeholder="Search hosts, services, ...">
      </form>
    </li>
  </ul>
</nav>