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;
}

 

 

GitHub: https://github.com/Sokhavuth/khmerweb-job

Heroku: https://khmerweb-job.herokuapp.com