Dashboard sidebar could be designed 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/job.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>
/* 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: #5f5f7c;
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%;
}
