sidebar size responsive

This commit is contained in:
Tobias Gabelunke 2020-07-01 10:00:53 +02:00
parent ab720fd798
commit e80cd86302
2 changed files with 57 additions and 44 deletions

View File

@ -0,0 +1,15 @@
.sidebar-wrapper {
position: relative;
margin-top: 0px;
}
.sidebar {
position: absolute;
width: 15%;
margin-top: 10px;
}
.sidebar a:hover:not(.active) {
background-color: indigo;
color: white;
}

View File

@ -4,7 +4,7 @@
<!-- <!--
Tip 1: You can change the color of the sidebar using: data-color="blue | green | orange | red" Tip 1: You can change the color of the sidebar using: data-color="blue | green | orange | red"
--> -->
<div class="sidebar-wrapper" ps> <div class="sidebar-wrapper">
<div class="logo"> <div class="logo">
<a href="javascript:void(0)" class="simple-text logo-normal"> <a href="javascript:void(0)" class="simple-text logo-normal">
Taskboard Taskboard
@ -13,34 +13,31 @@
<ul class="nav" data-color="blue"> <ul class="nav" data-color="blue">
<li class="active "> <li class="active ">
<a href="/dashboard"> <a href="/dashboard">
<i class="tim-icons icon-chart-pie-36"></i>
<p>Dashboard</p> <p>Dashboard</p>
</a> </a>
</li> </li>
<li> <li>
<a href="/sprints"> <a href="/sprints">
<i class="tim-icons icon-atom"></i>
<p>Sprints</p> <p>Sprints</p>
</a> </a>
</li> </li>
<li> <li>
<a href="/userstories"> <a href="/userstories">
<i class="tim-icons icon-pin"></i>
<p>Userstories</p> <p>Userstories</p>
</a> </a>
</li> </li>
<li> <li>
<a href="/tasks"> <a href="/tasks">
<i class="tim-icons icon-bell-55"></i>
<p>Tasks</p> <p>Tasks</p>
</a> </a>
</li> </li>
</ul> </ul>
<div class="ps__rail-x" style="left: 0px; bottom: 0px;"><div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div></div><div class="ps__rail-y" style="top: 0px; right: 0px;"><div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 0px;"></div></div>
</div> </div>
</div> </div>
<div class="container">
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div>
<div class=" fixed-plugin"> <div class=" fixed-plugin">
<div class=" show-dropdown" ngbDropdown> <div class=" show-dropdown" ngbDropdown>
@ -80,3 +77,4 @@
</ul> </ul>
</div> </div>
</div> </div>
</div>