From 4f9ca794c41a16ba7be5b965471d187e54168ec5 Mon Sep 17 00:00:00 2001
From: Jan Klattenhoff <jan@kjan.de>
Date: Wed, 18 Dec 2024 10:06:38 +0100
Subject: [PATCH] feat(navigation-bar): add logo and update sidebar styling

---
 public/logo.svg                               |  1 +
 .../navigation-bar.component.html             | 43 ++++++-------------
 2 files changed, 13 insertions(+), 31 deletions(-)
 create mode 100644 public/logo.svg

diff --git a/public/logo.svg b/public/logo.svg
new file mode 100644
index 0000000..4a87af6
--- /dev/null
+++ b/public/logo.svg
@@ -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>
\ No newline at end of file
diff --git a/src/app/components/navigation-bar/navigation-bar.component.html b/src/app/components/navigation-bar/navigation-bar.component.html
index 1e8392b..00950bb 100644
--- a/src/app/components/navigation-bar/navigation-bar.component.html
+++ b/src/app/components/navigation-bar/navigation-bar.component.html
@@ -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>