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

feat(navigation-bar): add logo and update sidebar styling

Browse source
This commit is contained in:
Jan K9f 2024-12-18 10:06:38 +01:00
parent 66472b28f6
commit 4f9ca794c4
Signed by: jank
GPG key ID: B267751B8AE29EFE
2 changed files with 13 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,52 +1,33 @@
<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>
<div class="d-flex flex-column flex-shrink-0 p-3 text-bg-light border-end border-primary" style="width: 300px; height: 100%;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-black text-decoration-none">
<img src="logo.svg" class="bi pe-none me-2" width="40" height="32"/>
<span class="fs-4">Hi-Tec GmbH</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>
<a href="#" class="nav-link active text-black" aria-current="page">
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 href="#" class="nav-link text-black">
Mitarbeiterverwaltung
</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 href="#" class="nav-link text-black">
Qualifikationsverwaltung
</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">
<a href="#" class="d-flex align-items-center text-black 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>
<strong>username</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>
<ul class="dropdown-menu dropdown-menu-light text-small shadow">
<li><a class="dropdown-item" href="#">Sign out</a></li>
</ul>
</div>