1
0
mirror of https://github.com/tabler/tabler.git synced 2025-12-24 18:58:15 +04:00
Files
tabler/_includes/header.html
2018-02-19 21:19:58 +01:00

101 lines
3.9 KiB
HTML

{% assign user = site.data.users[40] %}
<div class="header">
<div class="container">
<div class="navbar p-0">
<a class="navbar-brand" href="#">
<img src="{{ site.base }}/assets/images/logo.svg" class="navbar-brand-img" alt="tabler.io">
<span class="d-none d-lg-inline-block">Bootstrap</span>
</a>
<div class="nav order-lg-2">
<div class="nav-item">
<a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
</div>
<a class="nav-link d-none d-md-flex icon">
<i class="fe fe-maximize"></i>
</a>
<div class="dropdown d-none d-md-flex">
<a class="nav-link icon" data-toggle="dropdown">
<i class="fe fe-message-square"></i>
<span class="badge badge-pill badge-danger">1</span>
</a>
<div class="dropdown-menu dropdown-menu-right">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
delectus dolore dolores maxime nesciunt qui quia totam.
</div>
</div>
<div class="dropdown d-none d-md-flex">
<a class="nav-link icon" data-toggle="dropdown">
<i class="fe fe-bell"></i>
<span class="badge badge-pill badge-danger">10</span>
</a>
<div class="dropdown-menu dropdown-menu-right">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
delectus dolore dolores maxime nesciunt qui quia totam.
</div>
</div>
<div class="dropdown">
<a href="#" class="nav-link" data-toggle="dropdown">
<span class="avatar" style="background-image: url({{ site.base }}/{{ user.photo }})"></span>
<span class="ml-2 d-none d-lg-block">
<span class="text-default">{{ user.name }} {{ user.surname }}</span>
<small class="text-muted d-block mt-1">Administrator</small>
</span>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">
<span>Profile</span>
</a>
<a class="dropdown-item" href="#">
<span>Settings</span>
</a>
<a class="dropdown-item" href="#">
<span class="float-right"><span class="badge badge-primary">6</span></span>
<span>Inbox</span>
</a>
<a class="dropdown-item" href="#">
<span>Message</span>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Need help? </a>
<a class="dropdown-item" href="#">Sign out</a>
</div>
</div>
</div>
<div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
<ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
<li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
<div class="dropdown-menu mt-2 text-color" role="menu">
<a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
<a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
<a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="header-nav d-none d-lg-flex">
<div class="container">
<div class="row align-items-center">
<div class="col">
{% include menu.html %}
</div>
<div class="col-3 ml-auto">
<form class="input-icon">
<input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
<div class="input-icon-addon">
<i class="fe fe-search"></i>
</div>
</form>
</div>
</div>
</div>
</div>