♻️ refactor : Anchoring the navbar

- Changed the navbar to be fixed regardless of page scroll. Related issue: YJU-OKURA#33
dorimu0 · Feb 20, 2024 · 7850708 · 7850708
1 parent bdf067d
commit 7850708
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -15,10 +15,10 @@ export default function RootLayout({children}: {children: React.ReactNode}) {
     <html lang="en">
       <body className={inter.className}>
         <div className="flex">
-          <div className="w-1/6">
+          <div className="w-72 fixed">
             <Navbar />
           </div>
-          <div className="w-5/6">{children}</div>
+          <div className="w-5/6 pl-72">{children}</div>
         </div>
       </body>
     </html>

diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
@@ -13,7 +13,7 @@ import {user} from '@/public/images/navbar';
 
 export default function Navbar() {
   return (
-    <div className="w-full h-screen bg-gray-50 px-6 ">
+    <div className="relative w-full h-screen bg-gray-50 px-6 ">
       {/* Profile */}
       <div className="w-full h-12 flex items-center justify-between box-content py-1">
         <div className="flex items-center">
@@ -24,7 +24,7 @@ export default function Navbar() {
             alt="userImage"
             className="w-8 h-8 rounded-lg"
           />
-          <div className="mx-2 ">Name</div>
+          <div className="mx-2">Name</div>
         </div>
         <button className="w-8 h-8 rounded-lg float-end">
           <Image src={moreVert} alt="icon" width={30} height={30}></Image>
@@ -110,7 +110,7 @@ export default function Navbar() {
       </div>
 
       {/* group exit */}
-      <div className="flex absolute bottom-14">
+      <div className="flex absolute bottom-12">
         <Image
           src={door}
           alt="icon"