<!--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>

    <div class="main region">
        <div class="sidebar">
            <div class="menu">
                <a href="/admin/post"><img src="/static/images/movie.png" /></a>
                <a href="/admin/post">ការផ្សាយ</a>  

                <a href="/admin/category"><img src="/static/images/category.png" /></a>
                <a href="/admin/category">ជំពូក</a>

                <a href="/admin/upload"><img src="/static/images/upload.png" /></a>
                <a href="/admin/upload">Upload</a>

                <a href="/admin/user"><img src="/static/images/users.png" /></a>
                <a href="/admin/user">អ្នក​ប្រើប្រាស់</a>

                <a href="/admin/setting"><img src="/static/images/setting.png" /></a>
                <a href="/admin/setting">Setting</a>
            </div>
        </div>
        <div class="content"></div>
    </div>
</section>

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

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

.Index .main{
    display: grid;
    grid-template-columns: 25% auto;
}

.Index .main .sidebar{
    background: #1267b3;
    margin-right: 10px;
}

.Index .main .sidebar .menu{
    display: grid;
    grid-template-columns: 25% auto;
    align-items: center;
    padding: 20px;
    grid-gap: 15px 10px;
    height: 400px;
}

.Index .main .sidebar .menu img{
    width: 100%;
    float: left;
}

.Index .main .sidebar .menu a{
    font: 18px/1.5 Oswald,Koulen;
}

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

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