Merge pull request #338 from harshbhar0629/BUG/Edit-Navbar

BUG: Edit Navbar and make it good
Jaishree2310 · Oct 26, 2024 · 95f71e9 · 95f71e9
2 parents f96d8bc + acb2c90
commit 95f71e9
Showing 1 changed file with 27 additions and 1 deletion.
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -29,6 +29,9 @@ const Header: React.FC = () => {
 
   return (
     <nav style={navStyle}>
+      <h1 className='text-white text-[20px] font-bold'>
+        <span className='text-blue-400'>Glass</span>UI
+      </h1>
       <ul style={ulStyle}>
         <li style={liStyle} className='navbar-item'>
           <Link
@@ -61,6 +64,24 @@ const Header: React.FC = () => {
           </Link>
         </li>
       </ul>
+      <ul className='text-white flex gap-12 justify-center items-center '>
+        <li
+          style={linkStyle}
+          onMouseEnter={e => (e.currentTarget.style.color = '#fde047')}
+          onMouseLeave={e => (e.currentTarget.style.color = 'white')}
+          className='cursor-pointer'
+        >
+          Login
+        </li>
+        <li
+          style={linkStyle}
+          onMouseEnter={e => (e.currentTarget.style.color = '#fde047')}
+          onMouseLeave={e => (e.currentTarget.style.color = 'white')}
+          className='cursor-pointer'
+        >
+          Signup
+        </li>
+      </ul>
     </nav>
   );
 };
@@ -76,14 +97,19 @@ const navStyle: React.CSSProperties = {
   backdropFilter: 'blur(10px)', // Apply the blur effect
   WebkitBackdropFilter: 'blur(10px)', // For Safari compatibility
   boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)', // Optional shadow for better contrast
+  display: 'flex',
+  justifyContent: 'space-around',
+  alignItems: 'center',
 };
 
 const ulStyle: React.CSSProperties = {
   listStyleType: 'none',
   margin: 0,
   padding: 0,
   display: 'flex',
-  justifyContent: 'space-around',
+  justifyContent: 'flex-end',
+  marginRight: '50px',
+  gap: '20px',
 };
 
 const liStyle: React.CSSProperties = {