<!--views/admin/index.ejs-->
<link rel="stylesheet" href="/styles/admin/index.css" />
<script src="/scripts/paginate.js"></script>

<section class="Header">
    <div class="wrapper region">
        <div class="logo"><%= data.pageTitle %></div>
        <form action="/admin/search" method="post">
            <select name="adminSelect">
                <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>
    </div>
</section>

<section class="Main">
    <div class="wrapper region">
        <div class="sidebar">
            <div class="inner">
                <a href="/admin/post"><img src="/images/bigsale.png" /></a>
                <a href="/admin/post" class="title">ទំនិញ</a>

                <a href="/admin/category"><img src="/images/category.png" /></a>
                <a href="/admin/category" class="title">ប្រភេទ</a>

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

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

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

<section class="Footer region">
    <div class="info">សរុប​ទាំងអស់​មាន​ចំនួនៈ</div>
    <ul class="list">
        <% if(data.items){ %>
            <li class="item">

            </li>
        <% } %>
    </ul>
    <div class="pagination">
        <img onClick="paginate('<%= data.route %>')" src="/images/load-more.png" />
    </div>
    <div class="credit">&copy; 2022 <a href="https://khmerweb.vercel.app/">Khmer Web</a></div>
</section>

 

/* static/admin/index.css */
.Header{
    background: var(--background-dark);
    color: white;
    padding: 5px 0;
    border-bottom: 7px solid white;
    margin-bottom: 20px;
}

.Header .wrapper{
    display: grid;
    grid-template-columns: 25% auto 25%;
    align-items: center;
}

.Header .logo{
    font: 25px/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;
}

.Header .logout{
    text-align: right;
}

.Header .logout a{
    color: white;
}

.Main .wrapper{
    display: grid;
    grid-template-columns: 25% auto;
}

.Main .wrapper .sidebar{
    background: var(--background);
    margin-right: 10px;
    min-height: 400px;
}

.Main .wrapper .sidebar .inner{
    padding: 20px;
}

.Main .wrapper .sidebar .inner{
    display: grid;
    grid-template-columns: 25% auto;
    align-items: center;
    grid-gap: 10px;
}

.Main .wrapper .sidebar .inner img{
    width: 100%;
}
.Main .wrapper .sidebar .inner .title{
    font: 16px/1.5 Oswald, Koulen;
    color: black;
}

.Footer{
    margin-top: 10px;
}

.Footer .info{
    background: var(--background);
    text-align: center;
    padding: 10px;
}

.Footer .pagination{
    text-align: center;
    background: var(--background);
    margin: 10px auto 20px;
    padding: 5px 0 0;
}

.Footer .pagination img:hover{
    cursor: pointer;
    opacity: .7;
}

.Footer .credit{
    text-align: center;
    padding: 0 0 20px;
}

 

 

Heroku: https://khmerweb-sale.herokuapp.com/login