Add Header Menu Right

src/app/components/popup/popup.html

@@ -0,0 +1,13 @@
+<header class="popup-header">
+  <div class="header-left">
+    <ng-content select="[header-left]"></ng-content>
+  </div>
+
+  <div class="header-right">
+    <button class="material-symbols-outlined icon-24 chevron" (click)="onClose()">close</button>
+  </div>
+</header>
+
+<div class="popup-body">
+  <ng-content></ng-content>
+</div>

src/app/components/popup/popup.ts

@@ -0,0 +1,16 @@
+import { Component, input, model, output } from '@angular/core';
+import { Dropdown } from '../../components/dropdown/dropdown';
+import { Switch } from '../../components/switch/switch';
+
+@Component({
+  selector: 'popup',
+  templateUrl: './popup.html',
+  styleUrl: './popup.scss',
+})
+export class PopupComponent {
+  close = output<void>();
+
+  onClose() {
+    this.close.emit()
+  }
+}

src/app/ui/header-menu/header-menu.html

@@ -9,3 +9,8 @@
   <span>Leaderboard</span>
   <span>About</span>
 </div>
+
+<div class="menu-right">
+  <span>Login</span>
+  <span>Signup</span>
+</div>

src/app/ui/header-menu/header-menu.scss

@@ -18,14 +18,16 @@
   isolation: isolate;
   z-index: 100;
 
-  .menu-left {
+  .menu-left, .menu-right {
     display: flex;
     flex-direction: row;
     align-items: center;
-    justify-content: start;
     gap: 48px;
     padding: 12px;
+  }
 
+  .menu-left {
+    justify-content: start;
     .brand {
       display: flex;
       flex-direction: row;
@@ -53,4 +55,9 @@
       white-space: nowrap;
     }
   }
+
+  .menu-right {
+    flex-grow: 1;
+    justify-content: flex-end;
+  }
 }

src/app/ui/settings/popup.html

@@ -0,0 +1,16 @@
+<!--<popup (close)="handleClose()">
+  <div header-left class="profile-section">
+    <img [src]="userProfileImg" alt="profile" class="avatar">
+    <span>{{ userName }}</span>
+  </div>
+
+  <div class="settings-content">
+    <label>Language</label>
+    <dropdown [options]="languages"
+              placeholder="Choose Language"></dropdown>
+    <switch></switch>
+
+    <label>Appearance</label>
+
+  </div>
+</popup>-->

src/app/ui/settings/settings.ts

@@ -0,0 +1,12 @@
+import { Component, input, model, output } from '@angular/core';
+import { Dropdown } from '../../components/dropdown/dropdown';
+import { Switch } from '../../components/switch/switch';
+import { PopupComponent } from '../../components/popup/popup';
+
+@Component({
+  selector: 'settings-popup',
+  imports: [PopupComponent, Dropdown, Switch],
+  templateUrl: './popup.html',
+  styleUrl: './popup.scss',
+})
+export class SettingsPopup {}

src/styles.scss

@@ -8,5 +8,6 @@ body {
   margin: 0;
 
   overscroll-behavior-x: none;
+  background-color: white;
 }