We could create dashboard footer by adding HTML and CSS codes as below:

 

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

<section class="Main">
    <div class="main region">
        <div class="sidebar">
            <div class="wrapper">
                <a href="/admin/job"><img src="/images/jobs.png" /></a>
                <a href="/admin/job">ការងារ</a>

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

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

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

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

<section class="Footer">
    <div class="footer region">
        <div class="info">សរុប​ទាំងអស់​​មាន​ចំនួនៈ</div>
        <ul class="list">
        <% if(data.items){ %>
            <% for(let item of data.items) { %>
            <li>
                <div class='thumb'>
                    <a href='/<%= data.type %>/<%= item.id %>'><img src='<%= item.thumb %>'/></a>  
                </div>
                <div class="title">
                    <a href="/<%= data.type %>/<%= item.id %>"><%= item.title %></a>
                    <div><%= (new Date(item.date)).toLocaleDateString('it-IT') %></div>
                </div>
                <div class="edit">
                    <a href="<%= data.route %>/edit/<%= item.id %>"><img src="/images/edit.png"/></a>
                    <a href="<%= data.route %>/delete/<%= item.id %>"><img src="/images/delete.png"/></a>
                </div> 
            </li>
            <% } %>
        <% } %>
        </ul>

        <% if(data.route === '/admin/user'){ %>
            <script>
            $('.Listing .list li').css({'grid-template-columns':'13% auto 25%'})
            $('.Listing .list li .thumb').css({'padding-top':'100%'})
            $('.Listing .list li .thumb img').css({'border-radius':'50%'})
            </script>
        <% } %>

        <div class="paginate region">
            <img onclick="paginate('<%= data.route %>')" src="/images/load-more.png"/>
        </div>
    </div>
</section>

 

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

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

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

.Main .main .sidebar{
    background: var(--background);
    margin-right: 10px;
    padding: 20px;
}

.Main .main .sidebar .wrapper{
    display: grid;
    grid-template-columns: 25% auto;
    grid-gap: 15px;
    align-items: center;
    height: 380px;
}

.Main .main .sidebar .wrapper a{
    font: 20px/1.5 Oswald, Bayon;
}

.Main .main .sidebar .wrapper a img{
    width: 100%;
}

.Footer{
    padding-top: 10px;
}

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

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

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

 

 

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

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