Nav bar fix (#55)

* Fix hamburger issues

* Update fonts to store locally

* Revert wrong angular cli version

* Ensure match page requires login

* Fix erlang issues

docker-library/rabbitmq#114

* Fix nav bar css having global effect

---------

Co-authored-by: Samuel Lim <[email protected]>

compose.yml

@@ -118,6 +118,7 @@ services:
     container_name: match-broker
     hostname: match-broker
     image: rabbitmq:4.0.2
+    user: rabbitmq
     networks:
       - match-db-network
     healthcheck:

frontend/angular.json

@@ -27,7 +27,8 @@
               }
             ],
             "styles": [
-              "src/styles.css"
+              "src/styles.css",
+              "node_modules/typeface-poppins/index.css"
             ],
             "scripts": []
           },

frontend/package.json

@@ -25,6 +25,7 @@
     "primeng": "^17.18.10",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
+    "typeface-poppins": "^1.1.13",
     "zone.js": "~0.14.10"
   },
   "devDependencies": {

frontend/src/app/app.routes.ts

@@ -18,5 +18,6 @@ export const routes: Routes = [
     {
         path: 'matching',
         component: MatchingComponent,
+        canActivate: [AuthGuardService],
     },
 ];

frontend/src/app/matching/finding-match/finding-match.component.css

@@ -1,11 +1,11 @@
-::ng-deep .easy-chip .p-chip {
+:host ::ng-deep .easy-chip .p-chip {
     background-color: var(--green-700);
 }
 
-::ng-deep .medium-chip .p-chip {
+:host ::ng-deep .medium-chip .p-chip {
     background-color: var(--orange-600);
 }
 
-::ng-deep .hard-chip .p-chip {
+:host ::ng-deep .hard-chip .p-chip {
     background-color: var(--red-700);
 }

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

@@ -1,4 +1,4 @@
-::ng-deep .p-menubar {
+:host ::ng-deep .p-menubar {
     border-radius: 0;
     border-style: none;
     position: sticky;
@@ -15,11 +15,17 @@
     width: 100%;
 }
 
-::ng-deep .p-submenu-list {
+:host ::ng-deep .p-submenu-list {
     right: 0%;
     left: unset;
 }
 
+:host ::ng-deep .p-button {
+    background: transparent;
+    border: transparent;
+    color: white;
+}
+
 a.fill-div {
     display: block;
     height: 100%;
@@ -43,4 +49,3 @@ a.fill-div {
 p.logo-font-size {
     font-size: 28px;
 }
-

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

@@ -1,18 +1,31 @@
-<link rel="preconnect" href="https://fonts.googleapis.com" />
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;700&display=swap" rel="stylesheet" />
-
-<p-menubar [model]="items">
+<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" />
             <p class="pl-2 mr-3 poppins-bold logo-font-size">PeerPrep</p>
         </div>
     </ng-template>
-    <ng-template pTemplate="item" let-item>
-        <a [routerLink]="item.route" class="p-menuitem-link">
-            <span [class]="item.icon"></span>
-            <span class="ml-2">{{ item.label }}</span>
-        </a>
+    <ng-template pTemplate="end">
+        @if (user) {
+            <p-menu #menu [model]="items" [popup]="true"></p-menu>
+            <p-button
+                [label]="user.username"
+                (onClick)="menu.toggle($event)"
+                icon="pi pi-user"
+                class="nav-dropdown"></p-button>
+        } @else {
+            <div class="flex flex-row gap-2">
+                <p-button
+                    label="Login"
+                    icon="pi pi-sign-in"
+                    class="nav-dropdown min-w-max"
+                    routerLink="account/login"></p-button>
+                <p-button
+                    label="Sign Up"
+                    icon="pi pi-pen-to-square"
+                    class="nav-dropdown min-w-max"
+                    routerLink="/account/register"></p-button>
+            </div>
+        }
     </ng-template>
 </p-menubar>