sekolah_adiwiyata/public/assets/src/template/include/_page-header.hbs

107 lines
3.6 KiB
Handlebars

<header class="page-header" role="banner">
<!-- we need this logo when user switches to nav-function-top -->
{{> include/_logo }}
{{#if appLayoutShortcut}}
<!-- DOC: nav menu layout change shortcut -->
<div class="hidden-md-down dropdown-icon-menu position-relative">
<a href="#" class="header-btn btn js-waves-off" data-action="toggle" data-class="nav-function-hidden" title="Hide Navigation">
<i class="ni ni-menu"></i>
</a>
<ul>
<li>
<a href="#" class="btn js-waves-off" data-action="toggle" data-class="nav-function-minify" title="Minify Navigation">
<i class="ni ni-minify-nav"></i>
</a>
</li>
<li>
<a href="#" class="btn js-waves-off" data-action="toggle" data-class="nav-function-fixed" title="Lock Navigation">
<i class="ni ni-lock-nav"></i>
</a>
</li>
</ul>
</div>
{{/if}}
<!-- DOC: mobile button appears during mobile width -->
<div class="hidden-lg-up">
<a href="#" class="header-btn btn press-scale-down" data-action="toggle" data-class="mobile-nav-on">
<i class="ni ni-menu"></i>
</a>
</div>
<div class="search">
<form class="app-forms hidden-xs-down" role="search" action="page_search.html" autocomplete="off">
{{!-- <i class="fal fa-search position-absolute fs-xl m-2 p-1 text-muted pos-left"></i> --}}
<input type="text" id="search-field" placeholder="Search for anything" class="form-control" tabindex="1">
<a href="#" onclick="return false;" class="btn-danger btn-search-close js-waves-off d-none" data-action="toggle" data-class="mobile-search-on">
<i class="fal fa-times"></i>
</a>
</form>
</div>
<div class="ml-auto d-flex">
<!-- activate app search icon (mobile) -->
<div class="hidden-sm-up">
<a href="#" class="header-icon" data-action="toggle" data-class="mobile-search-on" data-focus="search-field" title="Search">
<i class="fal fa-search"></i>
</a>
</div>
{{#if layoutSettings}}
<!-- app settings -->
<div class="hidden-md-down">
<a href="#" class="header-icon" data-toggle="modal" data-target=".js-modal-settings">
<i class="fal fa-cog"></i>
</a>
</div>
{{/if}}
<!-- app shortcuts -->
<div>
<a href="#" class="header-icon" data-toggle="dropdown" title="My Apps">
<i class="fal fa-cube"></i>
</a>
<div class="dropdown-menu dropdown-menu-animated w-auto h-auto">
{{> include/_dropdown-app}}
</div>
</div>
{{#if chatInterface}}
<!-- app message -->
<a href="#" class="header-icon" data-toggle="modal" data-target=".js-modal-messenger">
<i class="fal fa-globe"></i>
<span class="badge badge-icon">!</span>
</a>
{{/if}}
<!-- app notification -->
<div>
<a href="#" class="header-icon" data-toggle="dropdown" title="You got 11 notifications">
<i class="fal fa-bell"></i>
<span class="badge badge-icon">11</span>
</a>
<div class="dropdown-menu dropdown-menu-animated dropdown-xl">
{{> include/_dropdown-notification}}
</div>
</div>
<!-- app user menu -->
<div>
<a href="#" data-toggle="dropdown" title="{{email}}" class="header-icon d-flex align-items-center justify-content-center ml-2">
<img src="img/demo/avatars/{{avatar}}" class="profile-image rounded-circle" alt="{{user}}">
<!-- you can also add username next to the avatar with the codes below:
<span class="ml-1 mr-1 text-truncate text-truncate-header hidden-xs-down">Me</span>
<i class="ni ni-chevron-down hidden-xs-down"></i> -->
</a>
<div class="dropdown-menu dropdown-menu-animated dropdown-lg">
{{> include/_dropdown-menu}}
</div>
</div>
</div>
</header>