<!--views/admin/index.tpl-->
<link href="/static/styles/admin/index.css" rel="stylesheet" />
 
<section class='Index'>
    <div class="header-wrapper">
    <header class='region'>
        <div class='logo'>{{ data['pageTitle'] }}</div>
 
        <form action='/admin/search' method='post'>
            <select name="select">
                <option>ការផ្សាយ</option>
                <option>ជំពូក</option>
                <option>សៀវភៅ</option>
                <option>អ្នក​ប្រើប្រាស់</option>
            </select>
            <input type='text' name="q" placeholder="Search" required />
            <input type="submit" value='បញ្ជូន'​ />
        </form>
 
        <div class='logout'><a href='/'>ទំព័រ​មុខ</a> | <a href='/login/logout'>ចេញ​ក្រៅ</a></div>
    </header>
    </div>
</section>

/* public/styles/admin/index.css */
.Index .header-wrapper {
    background: var(--background-dark);
}

.Index .header-wrapper header{
    display: grid;
    grid-template-columns: 25% auto 25%;
    align-items: center;
    padding: 10px 0;
}

.Index .header-wrapper header .logo{
    font: 24px/1.5 Limonf3;
}

.Index .header-wrapper header form{
    display: grid;
    grid-template-columns: 20% auto 20%;
}

.Index .header-wrapper header form input,
.Index .header-wrapper header form select{
    font: var(--body-font);
    padding: 2px 5px;
}

.Index .header-wrapper header .logout{
    text-align: right;
}

.Index .header-wrapper header .logout a{
    color: white;
    font-size: 16px;
}

Vercel: https://khmerweb-vlog.vercel.app

GitHub: https://github.com/Sokhavuth/vlog