Revert "header and search bar changes"

This reverts commit 24166ec.

Front/kantor-angular/src/app/header/header.component.html

@@ -1,8 +1,54 @@
 
-<div class="header">
-  <div class="search-container">
+<nav class="navbar navbar-expand-lg navbar-light bg-light">
+<!--  <a class="navbar-brand" routerLink="/">-->
+<!--    <img src="assets/logo.svg" alt="Kantor Walut">-->
+<!--  </a>-->
+  <div #navburger class="nav-burger">
+    <a class="nav-link" routerLink="/">Strona Główna</a>
+    <a class="nav-link" routerLink="#">Kursy Walut</a>
+    <a class="nav-link" routerLink="#">Kontakt</a>
+  </div>
+
+  <div #navlist class="collapse navbar-collapse" id="navlist">
+    <ul class="navbar-nav mr-auto">
+      <li class="nav-item active">
+<!--        <a class="nav-link" routerLink="/">Strona Główna</a>-->
+      </li>
+<!--      <li class="nav-item">-->
+<!--        <a class="nav-link" routerLink="#">Kursy Walut</a>-->
+<!--      </li>-->
+<!--      <li class="nav-item">-->
+<!--        <a class="nav-link" routerLink="#">Kontakt</a>-->
+<!--      </li>-->
+    </ul>
+  </div>
+
+  <div #navburger class="nav-burger" id="navbarNav">
+    <div class="nav-list">
+      <a class="nav-link" routerLink="/" (click)="hideNavList()">Strona Główna</a>
+      <a class="nav-link" routerLink="#" (click)="hideNavList()">Kursy Walut</a>
+      <a class="nav-link" routerLink="#" (click)="hideNavList()">Kontakt</a>
+    </div>
+  </div>
+
+  <div class="navbar-nav ms-auto">
     <form class="form-inline my-2 my-lg-0 flex-grow-1">
       <app-search-bar (searchChange)="handleSearchChange($event)"></app-search-bar>
     </form>
+    <ng-container *ngIf="isLoggedIn; else notLoggedIn">
+      <a class="nav-item nav-link" routerLink="/settings">Ustawienia</a>
+      <a class="nav-item nav-link" routerLink="/currency-account">Konta walutowe</a>
+      <a class="nav-item nav-link" (click)="axiosService.logout()">Wyloguj</a>
+    </ng-container>
+    <ng-template #notLoggedIn>
+      <a class="nav-item nav-link" routerLink="/login">Logowanie</a>
+      <a class="nav-item nav-link" routerLink="/register">Rejestracja</a>
+    </ng-template>
   </div>
-</div>
+
+  <!--  hamburger button-->
+  <button  class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" (click)="displayBurger()">
+    <span class="navbar-toggler-icon"> </span>
+  </button>
+
+</nav>

Front/kantor-angular/src/app/header/header.component.scss

@@ -1,7 +1,151 @@
-.header{
-  display: flex;
-  justify-content: center;
+/* Custom Navbar Breakpoint */
+
+//@media (max-width: 1870px) {
+//  .navbar-expand-lg .navbar-nav .nav-link {
+//    display: none;
+//  }
+//
+//  .navbar-expand-lg .navbar-toggler {
+//    display: block;
+//  }
+//
+//  .navbar-expand-lg .navbar-collapse {
+//    display: none;
+//  }
+//
+//  .navbar-expand-lg .navbar-collapse.collapsing {
+//    display: none;
+//  }
+//
+//  .navbar-expand-lg .navbar-collapse.show {
+//    display: block;
+//  }
+//
+//}
+//
+//@media (min-width: 1871px) {
+//  .navbar-expand-lg .navbar-nav .nav-link {
+//    display: block;
+//  }
+//
+//  .navbar-expand-lg .navbar-toggler {
+//    display: none;
+//  }
+//
+//  .navbar-expand-lg .navbar-collapse {
+//    display: flex !important;
+//  }
+//
+//
+//}
+
+
+
+//nav {
+//  background-color: transparent !important;
+//}
+//
+//nav.navbar {
+//  background-color: transparent;
+//}
+
+.navbar {
+  margin-left: 324px;
+  background-color: transparent !important;
+  //background: linear-gradient(94deg, rgba(255, 255, 255, 0.04) 12.6%, rgba(255, 255, 255, 0.02) 100.13%);
+  //backdrop-filter: blur(0px);
+
+  a, p, span, h1, h2, h3, h4, h5, h6 {
+    color: #DBDBDB !important;
+  }
+}
+
+.navbar-brand {
+  // horizontal, vertical, blur radius (rgb, alpha)
+  filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5));
+}
+search-bar {
   align-items: center;
-  height: 100%;
-  width: 100%;
 }
+
+.nav-burger{  //domyślnie ukryty
+  display: none;
+  position: relative;
+
+}
+
+.nav-burger {
+  position: absolute;
+  top: 100%; // This positions the top edge of the element just below the bottom edge of its parent element (the navbar)
+  right: 0; // This aligns the left edge of the element with the left edge of its parent element
+  z-index: 1; // This ensures the dropdown appears on top of other elements
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  background-color: white;
+}
+
+.navbar-toggler{
+  margin-left: 10px;
+}
+
+
+
+/* Styles for Portrait orientation */
+@media (orientation: portrait) {
+  .navbar-expand-lg .navbar-nav .nav-link {
+    display: none;
+  }
+
+  .navbar-expand-lg .navbar-toggler {
+    display: block;
+  }
+
+  .navbar-expand-lg .navbar-collapse {
+    display: none;
+  }
+
+  .navbar-expand-lg .navbar-collapse.collapsing {
+    display: none;
+  }
+
+  .navbar-expand-lg .navbar-collapse.show {
+    display: block;
+  }
+
+  .navbar-expand-lg .navbar-nav {
+    flex-direction: column-reverse;
+  }
+
+}
+
+@media (orientation: landscape) {
+  .navbar-expand-lg .navbar-nav .nav-link {
+    display: block;
+  }
+
+  .navbar-expand-lg .navbar-toggler {
+    display: none;
+  }
+
+  .navbar-expand-lg .navbar-collapse {
+    display: flex !important;
+  }
+
+
+}
+
+
+//@media (max-width: 768px) {
+//  .body {
+//    display: block;
+//    width: 100%;
+//  }
+//}
+//
+//@media (min-width: 768px) {
+//  .body {
+//    display: inline-block;
+//  }
+//}
+
+

Front/kantor-angular/src/app/search-bar/search-bar.component.scss

@@ -5,7 +5,7 @@ body {
 .search-container {
   display: flex;
   align-items: center;
-  border: 2px solid rgba(255, 255, 255, 0.22);
+  border: 1px solid #ccc;
   border-radius: 20px;
   overflow: hidden;
   position: relative;
@@ -15,11 +15,7 @@ body {
 }
 
 .search-input {
-  border-radius: 28px;
   border: none;
-  background: linear-gradient(94deg, rgba(255, 255, 255, 0.04) 12.6%, rgba(255, 255, 255, 0.02) 100.13%);
-  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
-  backdrop-filter: blur(17.5px);
   padding: 10px;
   outline: none;
   width: 100%;
@@ -49,12 +45,11 @@ button {
   border: none;
   cursor: pointer;
   padding: 10px;
-  background-color: transparent;
+  background-color: #007BFF;
 }
 
 .material-icons {
   font-size: 24px;
-  color: #dbdbdb;
 }