From 68655d30784674c4d4f4d66b0c5f7651a2577d22 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=BB=A8=ED=8A=B8=EB=A1=A4DELTA?= <controld3785@gmail.com>
Date: Tue, 17 Mar 2026 08:42:24 +0900
Subject: [PATCH] Add Settings Icon to Header Menu

---
 src/app/ui/header-menu/header-menu.html |  6 ++++--
 src/app/ui/header-menu/header-menu.scss | 19 +++++++++---------
 src/styles.scss                         | 26 +++++++++++++++++++++++++
 src/styles/_library.scss                | 20 -------------------
 4 files changed, 40 insertions(+), 31 deletions(-)

diff --git a/src/app/ui/header-menu/header-menu.html b/src/app/ui/header-menu/header-menu.html
index e290c5c..9238ab9 100644
--- a/src/app/ui/header-menu/header-menu.html
+++ b/src/app/ui/header-menu/header-menu.html
@@ -1,7 +1,7 @@
 <div class="menu-left">
   <div class="brand">
     <img src="/logo_inverted.svg" alt="logo"/>
-    <span>ADOFAI Editor Forum</span>
+    <span><strong>ADOFAI Editor Forum</strong></span>
   </div>
 
   <span>Levels</span>
@@ -11,6 +11,8 @@
 </div>
 
 <div class="menu-right">
-  <span>Login</span>
+  <span><strong>Login</strong></span>
   <span>Signup</span>
+
+  <span class="material-symbols-outlined icon-40 settings">settings</span>
 </div>
diff --git a/src/app/ui/header-menu/header-menu.scss b/src/app/ui/header-menu/header-menu.scss
index 76698cd..0d93636 100644
--- a/src/app/ui/header-menu/header-menu.scss
+++ b/src/app/ui/header-menu/header-menu.scss
@@ -23,11 +23,19 @@
     flex-direction: row;
     align-items: center;
     gap: 48px;
-    padding: 12px;
+
+    span:not(.icon-40) {
+      font-size: 18px;
+      line-height: 40px;
+      vertical-align: middle;
+      white-space: nowrap;
+    }
   }
 
   .menu-left {
     justify-content: start;
+    padding: 12px;
+
     .brand {
       display: flex;
       flex-direction: row;
@@ -42,22 +50,15 @@
       }
 
       span {
-        font-weight: 900;
         /*text-box-trim: trim-both;
         text-box-edge: cap alphabetic;*/
       }
     }
-
-    span {
-      font-size: 18px;
-      line-height: 40px;
-      vertical-align: middle;
-      white-space: nowrap;
-    }
   }
 
   .menu-right {
     flex-grow: 1;
     justify-content: flex-end;
+    padding: 12px 20px;
   }
 }
diff --git a/src/styles.scss b/src/styles.scss
index 56208ef..6c688d1 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -11,3 +11,29 @@ body {
   background-color: white;
 }
 
+.icon-24 {
+  font-variation-settings:
+    'FILL' 0,
+    'wght' 300,
+    'GRAD' 0,
+    'opsz' 24;
+
+  font-size: 24px;
+  line-height: 24px;
+}
+
+.icon-40 {
+  font-variation-settings:
+    'FILL' 0,
+    'wght' 300,
+    'GRAD' 0,
+    'opsz' 40;
+
+  font-size: 40px;
+  line-height: 40px;
+}
+
+strong {
+  font-weight: 900;
+}
+
diff --git a/src/styles/_library.scss b/src/styles/_library.scss
index a5f0bcb..ccb8914 100644
--- a/src/styles/_library.scss
+++ b/src/styles/_library.scss
@@ -1,21 +1 @@
 @forward 'functions';
-
-.icon-24 {
-  font-variation-settings:
-    'FILL' 0,
-    'wght' 300,
-    'GRAD' 0,
-    'opsz' 24;
-
-  line-height: 24px;
-}
-
-.icon-40 {
-  font-variation-settings:
-    'FILL' 0,
-    'wght' 300,
-    'GRAD' 0,
-    'opsz' 40;
-
-  line-height: 40px;
-}