After defining a route for the dashboard, we can start to build it from scratch by building its header first.
<!--view/admin/index.ejs-->
<link rel="stylesheet" href="/styles/admin/index.css" />
<section class="Header">
<div class="menu region">
<div class="logo"><%= data.pageTitle %></div>
<form>
<select name="adminSearch">
<option>ការងារ</option>
</select>
<input type="text" name="q" required placeholder="Search" />
<input type="submit" value="ស្វែងរក" />
</form>
<div class="logout"><a href="/">ទំព័រមុខ</a> | <a href="/logout">ចេញក្រៅ</a></div>
</div>
</section>
/* static/styles/admin/index.css */
.Header{
background: var(--background-dark);
border-bottom: 7px solid white;
}
.Header .menu{
display: grid;
grid-template-columns: 25% auto 25%;
align-items: center;
padding: 5px 0;
}
.Header .logo{
font: 26px/1.5 Oswald, Limonf3;
}
.Header form{
display: grid;
grid-template-columns: 20% auto 20%;
}
.Header form input, .Header form select{
font: var(--body-font);
padding: 2px 5px 2px 10px;
}
.Header .logout{
text-align: right;
}