From 06a7fb4c2ea821ec51577d41096a738c0dcf4afb Mon Sep 17 00:00:00 2001
From: Hosung99 <shson1217@kw.ac.kr>
Date: Thu, 5 Dec 2024 16:31:08 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20Navbar=20=ED=86=A0=EA=B8=80=EC=8B=9C=20?=
 =?UTF-8?q?=EC=98=81=EC=97=AD=EC=9D=B4=20=EB=82=A8=EC=95=84=EC=9E=88?=
 =?UTF-8?q?=EB=8D=98=20=ED=98=84=EC=83=81=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/component/template/NabvarLayout.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/frontend/src/component/template/NabvarLayout.tsx b/frontend/src/component/template/NabvarLayout.tsx
index b95d45e..56a87b7 100644
--- a/frontend/src/component/template/NabvarLayout.tsx
+++ b/frontend/src/component/template/NabvarLayout.tsx
@@ -17,16 +17,20 @@ export default function NavbarLayout() {
   }
 
   return (
-    <div
-      className='relative h-screen w-[20%] rounded-[11px] bg-lightblue dark:bg-darkblue'
+    <motion.div
+      animate={{
+        width: isNavbarOpen ? '20%' : '0%'
+      }}
+      transition={{ duration: 0.3, ease: 'easeInOut' }}
+      className='relative h-screen rounded-[11px] bg-lightblue dark:bg-darkblue'
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}>
       <AnimatePresence>
         {isNavbarOpen && (
           <motion.div
-            initial={{ width: 0, opacity: 0, x: -50 }}
-            animate={{ width: '100%', opacity: 1, x: 0 }}
-            exit={{ width: 0, opacity: 0, x: -50 }}
+            initial={{ opacity: 0, x: -50 }}
+            animate={{ opacity: 1, x: 0 }}
+            exit={{ opacity: 0, x: -50 }}
             transition={{ duration: 0.3, ease: 'easeInOut' }}>
             <Navbar />
             {isHovered && (
@@ -57,6 +61,6 @@ export default function NavbarLayout() {
           <ChevronRight size={20} />
         </motion.button>
       )}
-    </div>
+    </motion.div>
   );
 }