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