💄 feat: 모바일에서 냅바 닫을 때 햄버거 버튼 X로 수정

NGuard-Security · Apr 27, 2024 · 50cadbb · 50cadbb
1 parent 24523e4
commit 50cadbb
Showing 1 changed file with 28 additions and 12 deletions.
diff --git a/packages/ui/components/Navbar.tsx b/packages/ui/components/Navbar.tsx
@@ -311,22 +311,38 @@ export default function Navbar({
             <button
               type="button"
               className="rounded-lg px-3 py-2 font-bold"
-              aria-label="Open menu"
+              aria-label={
+                !isMobileNavOpen ? "Open menu" : "Close menu"
+              }
               onClick={() => {
                 setIsMobileNavOpen(!isMobileNavOpen)
               }}
             >
-              <svg
-                stroke="currentColor"
-                fill="currentColor"
-                strokeWidth="0"
-                viewBox="0 0 512 512"
-                height="24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path d="M64 384h384v-42.666H64V384zm0-106.666h384v-42.667H64v42.667zM64 128v42.665h384V128H64z" />
-              </svg>
+              {!isMobileNavOpen ? (
+                <svg
+                  stroke="currentColor"
+                  fill="currentColor"
+                  strokeWidth="0"
+                  viewBox="0 0 512 512"
+                  height="24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path d="M64 384h384v-42.666H64V384zm0-106.666h384v-42.667H64v42.667zM64 128v42.665h384V128H64z" />
+                </svg>
+              ) : (
+                <svg
+                  stroke="currentColor"
+                  fill="currentColor"
+                  strokeWidth="0"
+                  viewBox="0 0 24 24"
+                  height="20"
+                  width="20"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path d="M19.7,4.3c-0.4-0.4-1-0.4-1.4,0L12,10.6L5.7,4.3c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l6.3,6.3l-6.3,6.3 c-0.4,0.4-0.4,1,0,1.4C4.5,19.9,4.7,20,5,20s0.5-0.1,0.7-0.3l6.3-6.3l6.3,6.3c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3 c0.4-0.4,0.4-1,0-1.4L13.4,12l6.3-6.3C20.1,5.3,20.1,4.7,19.7,4.3z" />
+                </svg>
+              )}
             </button>
           </nav>
         </div>