jank/employeeService
1
1
Fork 0
Code Issues 2 Pull requests 4 Projects 1 Releases Packages Wiki Activity Actions

style: add layout styles for app and navigation bar components

Browse source
This commit is contained in:
Jan Gleytenhoover 2024-12-18 09:23:34 +01:00
parent ba2e989d49
commit 66472b28f6
Signed by: jank
GPG key ID: B267751B8AE29EFE
4 changed files with 72 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/app/app.component.css
View file

@ -0,0 +1,6 @@
:host {
display: block;
height: 100vh;
width: 100vw;
}

4
src/app/components/navigation-bar/navigation-bar.component.css
View file

@ -0,0 +1,4 @@
:host {
display: block;
height: 100%;
}

54
src/app/components/navigation-bar/navigation-bar.component.html
View file

@ -1 +1,53 @@
<p>navigation-bar works!</p>
<div class="d-flex flex-column flex-shrink-0 p-3 text-bg-dark" style="width: 280px; height: 100%;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
<svg class="bi pe-none me-2" width="40" height="32"><use xlink:href="#bootstrap"></use></svg>
<span class="fs-4">Sidebar</span>
</a>
<hr>
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item">
<a href="#" class="nav-link active" aria-current="page">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#home"></use></svg>
Home
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#speedometer2"></use></svg>
Dashboard
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#table"></use></svg>
Orders
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#grid"></use></svg>
Products
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#people-circle"></use></svg>
Customers
</a>
</li>
</ul>
<hr>
<div class="dropdown">
<a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2">
<strong>mdo</strong>
</a>
<ul class="dropdown-menu dropdown-menu-dark text-small shadow">
<li><a class="dropdown-item" href="#">New project...</a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<li><a class="dropdown-item" href="#">Profile</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Sign out</a></li>
</ul>
</div>
</div>

9
src/styles.css
View file

@ -1 +1,10 @@
/* You can add global styles to this file, and also import other style files */
.container{
min-height:100vh;
}
html, body {
min-height: 100%;
height: auto;
margin: 0;
}