Navbar component staticview

src/app/general/home/home.component.html

@@ -1 +1,3 @@
-<p>home works!</p>
+<div class="dashboard-container">
+	<app-navbar></app-navbar>
+</div>

src/app/general/home/home.component.scss

@@ -0,0 +1,4 @@
+.dashboard-container {
+  padding-top: 35px;
+  height: 100%;
+}

src/app/general/home/home.component.ts

@@ -1,5 +1,6 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { HomeAnimations } from './home.animations';
+import { NavbarComponent } from 'src/app/shared/components/navbar/navbar.component';
 
 @Component({
   selector: 'app-home',
@@ -8,8 +9,26 @@ import { HomeAnimations } from './home.animations';
   changeDetection: ChangeDetectionStrategy.OnPush,
   animations: HomeAnimations,
   standalone: true,
-  imports: [],
+  imports: [
+    NavbarComponent
+  ],
 })
-export class HomeComponent {
+export class HomeComponent implements OnInit {
 
+  // --------------- INPUTS AND OUTPUTS ------------------
+
+  // --------------- LOCAL UI STATE ----------------------
+
+  // --------------- COMPUTED DATA -----------------------
+
+  // --------------- EVENT HANDLING ----------------------
+
+  // --------------- OTHER -------------------------------
+
+  constructor(
+  ) { }
+
+  // --------------- LOAD AND CLEANUP --------------------
+  ngOnInit(): void {
+  }
 }

src/app/shared/components/navbar/navbar.component.html

@@ -1 +1,18 @@
-<p>navbar works!</p>
+<div class="navbar-container">
+  <img class="logo" src="assets/images/logo.svg">
+    <div class="user-setting-section">
+      <img class="profile-pic" src="http://loremflickr.com/100/100" [matMenuTriggerFor]="menu" #menuTrigger/>
+      <mat-menu #menu="matMenu">
+        <div class="logout" >
+          <span>
+            Logout
+          </span>
+          <svg width="31" height="30" viewBox="0 0 31 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M11.5002 26.25H6.50024C5.8372 26.25 5.20132 25.9866 4.73248 25.5178C4.26364 25.0489 4.00024 24.413 4.00024 23.75V6.25C4.00024 5.58696 4.26364 4.95107 4.73248 4.48223C5.20132 4.01339 5.8372 3.75 6.50024 3.75H11.5002" stroke="#2DBDB1" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M20.2502 21.25L26.5002 15L20.2502 8.75" stroke="#2DBDB1" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M26.5002 15H11.5002" stroke="#2DBDB1" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+      </mat-menu>
+    </div>  
+</div>

src/app/shared/components/navbar/navbar.component.scss

@@ -0,0 +1,42 @@
+.navbar-container {
+  height: 70px;
+  width: 100%;
+  background: #FFFFFF;
+  box-shadow: -4px 0px 4px rgba(200, 224, 212, 0.25);
+  display: flex;
+  flex-direction: row;
+  align-items: center; // Center items vertically
+  padding: 8px 16px; // Add padding to the container
+
+  .logo {
+    width: 46px;
+    height: 46px;
+    cursor: pointer;
+    margin-right: 16px; // Add margin between logo and user section
+  }
+
+  .user-setting-section {
+    margin-left: auto; // Push to the right
+    display: flex;
+    align-items: center; // Center items vertically
+    color: #2DBDB1;
+    .profile-pic{
+      height: 46px;
+      width: 46px;
+      border-radius: 50%;
+      cursor: pointer;
+    }
+  }
+}
+
+/** material target, can't be nested */
+.logout {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  font-size: 20px;
+  font-weight: 300;
+  cursor: pointer;
+  padding: 10px;
+}

src/app/shared/components/navbar/navbar.component.ts

@@ -1,10 +1,11 @@
 import { Component, OnInit } from '@angular/core';
+import { MatMenu, MatMenuTrigger } from '@angular/material/menu';
 
 
 @Component({
   selector: 'app-navbar',
   standalone: true,
-  imports: [],
+  imports: [ MatMenuTrigger, MatMenu],
   templateUrl: './navbar.component.html',
   styleUrl: './navbar.component.scss'
 })