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 Gleytenhoover 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
Show stats Download patch file Download diff file Expand all files Collapse all files

1
public/logo.svg Normal file
View file

@ -0,0 +1 @@
<svg fill="none" height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg"><rect fill="white" fill-opacity="0.01" height="48" width="48"></rect><path d="M24 20C28.4183 20 32 16.4183 32 12C32 7.58172 28.4183 4 24 4C19.5817 4 16 7.58172 16 12C16 16.4183 19.5817 20 24 20Z" fill="#2F88FF" stroke="black" stroke-linejoin="round" stroke-width="4"></path><path d="M24 20V38" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"></path><path d="M16 32H12L4 44H44L36 32H32" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 604 B

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>