bigbluebutton-Github/bigbluebutton-html5/app/client/main.html

<template name="header">
  <nav id="navbar" class="myNavbar top-bar" role="navigation">
    {{> makeButton btn_class="btn toggleUserlistButton navbarButton sl-hamburger sl-ham-la-cw sl-portrait-mobile sl-portrait-keyboard" rel="tooltip" title="Toggle Userlist" span=true notification="all_chats"}}

      {{#if amIInAudio}}
        <div class="audioNavbarSection">
          {{#if amIListenOnlyAudio}}
            {{> makeButton btn_class="navbarButton leaveAudioButton" i_class="icon fi-volume-none" rel="tooltip" title="Exit Audio"}}
          {{else}}
            {{#if isCurrentUserMuted}}
              <!-- if you are muted the button representing your status will show volume off -->
              {{> makeButton btn_class="navbarButton muteIcon" i_class="ion-ios-mic-off" rel="tooltip" title="Unmute"}}
            {{else}}
              {{#if isCurrentUserTalking}}
                <!-- you are talking. Display a high volume/volume up representing voice activity -->
                {{> makeButton btn_class="navbarButton muteIcon" i_class="ion-ios-mic" rel="tooltip" title="Mute"}}
              {{else}}
                <!-- you are not talking. Display low volume/volume down representing no voice activity -->
                {{> makeButton btn_class="navbarButton muteIcon" i_class="ion-ios-mic-outline" rel="tooltip" title="Mute"}}
              {{/if}}
            {{/if}}
          {{/if}}
        </div>
        <span class="navbarTitle shiftedTitle">
          {{getWhiteboardTitle}}
        </span>
      {{else}}
        <span class="navbarTitle defaultTitle">
          {{getWhiteboardTitle}}
        </span>
      {{/if}}

    <div class="rightNavbarSection">
      {{> makeButton id="settingsIcon" btn_class="settingsIcon navbarButton" i_class="ion-gear-b" rel="tooltip"
      title="BigBlueButton Settings"}}

      {{> makeButton id="logout" btn_class="signOutIcon navbarButton" i_class="ion-log-out" rel="tooltip"
      title="Logout"}}
    </div>
    {{> makeButton btn_class="btn toggleMenuButton navbarButton sl-hamburger sl-ham-ra-cw sl-portrait-mobile sl-portrait-keyboard" rel="tooltip" title="Toggle Menu" span=true}}
  </nav>
</template>

<template name="main">
  <div id="container" class="{{containerPosition}}">
    {{#if isDisconnected}}
      {{>status}}
    {{else}}
      <div class="sl-left-drawer sl-left-drawer-content-delay sl-portrait-mobile sl-portrait-keyboard">
        {{> usersList id="users" name="usersList"}}
      </div>
      <div class="sl-right-drawer sl-portrait-mobile sl-portrait-keyboard">
        <div class="titleArea"></div>
        {{> menu id="menu"}}
      </div>
      <div id="main">
        {{> header}}
        <div id="panels">
          <div class="shield"></div>
          {{> whiteboard id="whiteboard" name="whiteboard"}}
          {{#if getInSession "display_chatbar"}}
            {{> chatbar id="chat" title="Chat" name="chatbar"}}
          {{/if}}
        </div>
        {{> modals}}
      </div>
    {{/if}}
  </div>
</template>

<template name="modals">
  <div id="settingsModal" class="reveal-modal small" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog" data-options="close_on_background_click:false">
    {{> settingsModal}}
  </div>
  <div id="logoutModal" class="reveal-modal tiny" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog" data-options="close_on_background_click:false">
    {{> logoutModal}}
  </div>
  <audio id="remote-media" autoplay="autoplay"></audio>
</template>

<template name="recordingStatus">
</template>

<template name="menu">
  <div id="{{id}}">
    {{> makeButton btn_class="slideButton toggleChatButton" i_class="ion-chatbubble" label="Chat"}}
    {{> makeButton btn_class="slideButton settingsIcon" i_class="ion-gear-b" label="Settings"}}
    {{> makeButton btn_class="slideButton signOutIcon" i_class="ion-log-out" label="Log out"}}
  </div>
</template>