Add resizing for navbar (#65)

* Adjust resizing for nav-bar

* Reduce size of logo and logo font
* Reduce padding of login and signup buttons
* Hide overflow on nav-bar
* Change vh to dvh for resizing based on mobile dynamic viewport

* Fix linting

Author: McNaBry

frontend/src/app/account/account.component.css

@@ -1,7 +1,7 @@
 .layout-container {
     display: flex;
     flex-direction: column;
-    min-height: calc(100vh - 80px); 
+    min-height: calc(100dvh - 160px); 
     width: 100%;
     justify-content: center; 
     align-items: center; 

frontend/src/app/matching/matching.component.css

@@ -3,7 +3,7 @@
     justify-content: center;
     align-items: center;
     width: 100%;
-    min-height: calc(100vh - 160px);
+    min-height: calc(100dvh - 160px);
     padding: 1rem;
 }
 

frontend/src/app/navigation-bar/navigation-bar.component.css

@@ -8,7 +8,10 @@
     z-index: 100;
     backdrop-filter: blur(10px);
     justify-content: center;
+    align-items: center;
     height: 80px;
+    width: 100%;
+    overflow: hidden;
 }
 
 :host ::ng-deep p-menubarsub {
@@ -24,6 +27,8 @@
     background: transparent;
     border: transparent;
     color: white;
+    padding: 5px;
+    border-radius: 0.5rem;
 }
 
 a.fill-div {
@@ -38,14 +43,14 @@ a.fill-div {
     font-family: "Poppins", sans-serif;
     font-weight: 100;
     font-style: normal;
-  }
+}
 
-  .poppins-bold {
+.poppins-bold {
     font-family: "Poppins", sans-serif;
     font-weight: 700;
     font-style: normal;
-  }
+}
 
 p.logo-font-size {
-    font-size: 28px;
+    font-size: 1.5rem;
 }

frontend/src/app/navigation-bar/navigation-bar.component.html

@@ -1,30 +1,26 @@
 <p-menubar>
     <ng-template pTemplate="start">
         <div class="pl-2 flex align-items-center" style="cursor: pointer" [routerLink]="['/matching']">
-            <img src="/logo.png" alt="logo" style="width: auto; height: 55px" />
+            <img src="/logo.png" alt="logo" style="width: auto; height: 35px" />
             <p class="pl-2 mr-3 poppins-bold logo-font-size">PeerPrep</p>
         </div>
     </ng-template>
     <ng-template pTemplate="end">
         @if (user) {
             <p-menu #menu [model]="items" [popup]="true" appendTo="body"></p-menu>
-            <p-button
-                [label]="user.username"
-                (onClick)="menu.toggle($event)"
-                icon="pi pi-user"
-                class="nav-dropdown"></p-button>
+            <p-button [label]="user.username" (onClick)="menu.toggle($event)" icon="pi pi-user" class="nav-dropdown" />
         } @else {
-            <div class="flex flex-row gap-2">
+            <div class="flex flex-row gap-2 p-2">
                 <p-button
                     label="Login"
                     icon="pi pi-sign-in"
                     class="nav-dropdown min-w-max"
-                    routerLink="account/login"></p-button>
+                    routerLink="account/login" />
                 <p-button
                     label="Sign Up"
                     icon="pi pi-pen-to-square"
                     class="nav-dropdown min-w-max"
-                    routerLink="/account/register"></p-button>
+                    routerLink="/account/register" />
             </div>
         }
     </ng-template>