From 2974053fb4254e2b6dd05eb212b241b62a83c9e1 Mon Sep 17 00:00:00 2001
From: Dian <dian@petanikode.com>
Date: Mon, 28 Oct 2024 22:57:39 +0800
Subject: [PATCH] revamp sidenav

---
 src/components/Navbar/Brand.jsx |  2 --
 src/components/Navbar/index.jsx | 14 +++++++-------
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/components/Navbar/Brand.jsx b/src/components/Navbar/Brand.jsx
index 6cef464..4d26b4e 100644
--- a/src/components/Navbar/Brand.jsx
+++ b/src/components/Navbar/Brand.jsx
@@ -21,7 +21,6 @@ export function Brand({ url, onClick }) {
   }, []);
 
   return (
-    <div className="pr-10 lg:border-r border-solid border-grey">
       <Link to={url} onClick={onClick}>
         <img
           className="h-7 lg:h-11"
@@ -29,7 +28,6 @@ export function Brand({ url, onClick }) {
           alt="LogtengDev Logo"
         />
       </Link>
-    </div>
   );
 }
 
diff --git a/src/components/Navbar/index.jsx b/src/components/Navbar/index.jsx
index 360bdc0..07d2ce4 100644
--- a/src/components/Navbar/index.jsx
+++ b/src/components/Navbar/index.jsx
@@ -49,11 +49,11 @@ export default function Navbar() {
                 >
 
                     <ul className="flex flex-col pt-10 px-6">
-                        <div className="pb-7 justify-between flex pr-10 lg:border-r border-solid border-grey">
-
-                        <img width={90} src={LogtengDevLogo} />
-                            <p onClick={toggleNavbar} className='text-xl'>X</p>
+                        <div className="pb-7 justify-between flex lg:border-r border-solid border-grey">
+                            <Brand to={'/'} onClick={toggleNavbar} />
+                            <button onClick={toggleNavbar} className='text-xl'>&times;</button>
                         </div>
+                        
                         <li className="my-4">
                             <Link to="/" onClick={toggleNavbar} className="text-sm hover:text-blue-600">
                                 Home
@@ -81,11 +81,11 @@ export default function Navbar() {
                         </li>
                     </ul>
 
-                    <div className="  justify-center mt-20">
-                        <a href="https://t.me/lotengdev" target="_blank" rel="noopener noreferrer" className="flex items-center bg-blue-600 px-4 py-3 mr-4 mx-7 my-9 rounded text-xs text-white">
+                    <div className="px-6 flex gap-4 flex-col justify-center mt-20">
+                        <a href="https://t.me/lotengdev" target="_blank" rel="noopener noreferrer" className="inline-flex items-center bg-blue-600 px-4 py-3 rounded text-xs text-white">
                             <img className="inline mr-3" width={21} onClick={toggleNavbar} src={TelegramIcon} alt="Telegram Icon" />Join Group
                         </a>
-                        <a href="https://github.com/lotengdev/lotengdev-web/" target="_blank" rel="noopener noreferrer" className="flex items-center mx-7 my-9 text-xs  bg-neutral-100 border border-solid border-grey px-4 py-2 rounded">
+                        <a href="https://github.com/lotengdev/lotengdev-web/" target="_blank" rel="noopener noreferrer" className="inline-flex items-center text-xs  bg-neutral-100 border border-solid border-grey px-4 py-2 rounded">
                             <img className="inline mr-3" width={21} onClick={toggleNavbar} src={GithubIcon} alt="GitHub Icon" />Contribute
                         </a>
                     </div>