icon alignment fixed

Akshatchaube01 · Jun 1, 2024 · 5477afa · 5477afa
1 parent 76c6c58
commit 5477afa
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 14 deletions.
diff --git a/src/components/Navbar.css b/src/components/Navbar.css
@@ -46,6 +46,16 @@
     margin: 0.5em;
 }
 
+.nav-link {
+    display: flex;
+    align-items: center;
+  }
+  .nav-link i,
+  .nav-link font {
+    display: flex;
+    align-items: center;
+  }
+
 /* Responsive Styles */
 @media screen and (max-width: 768px) {
     .navbar-list {

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -13,37 +13,49 @@ const Navbar = () => {
         setMenuOpen(false);
     };
 
-  return (
-    <nav className="z-50 lg:h-[7rem] flex items-center justify-between sticky top-0 w-screen backdrop-filter backdrop-blur-lg bg-opacity-40 p-4 navbar">
-      <style>
+    return (
+        <nav className="z-50 lg:h-[7rem] flex items-center justify-between sticky top-0 w-screen backdrop-filter backdrop-blur-lg bg-opacity-40 p-4 navbar">
+            <style>
                 @import url('https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css');
             </style>
-            <button 
+            <button
                 className="block md:hidden p-2 ml-auto"
                 onClick={() => setMenuOpen(!isMenuOpen)}
                 aria-label="Toggle navigation menu"
             >
- 
-            { !isMenuOpen ? <i className="ri-menu-line text-white text-2xl"></i> : <i class="fa-solid fa-xmark text-2xl"></i>}                 
+
+                {!isMenuOpen ? <i className="ri-menu-line text-white text-2xl"></i> : <i class="fa-solid fa-xmark text-2xl"></i>}
             </button>
             <ul className={`absolute bg-black opacity-80 gap-5 md:relative top-full left-0 md:left-auto md:top-auto w-full md:flex md:items-center md:justify-center md:bg-transparent transition-all duration-500 ease-in-out flex ${isMenuOpen ? 'h-auto ' : 'h-0 p-0 overflow-hidden'} flex-col md:flex-row list-none m-0 p-4 gap-x-10 text-sm md:text-base lg:text-lg xl:text-xl 2xl:text-3xl`}>
                 <li className=" text-center md:text-left">
-                    <NavLink to="/" className={isActive('/')} onClick={handleLinkClick}><i className="ri-home-fill"></i> Home</NavLink>
+                    <NavLink to="/" className={`nav-link ${isActive('/')}`} onClick={handleLinkClick}>
+                        <i className="ri-home-fill"></i>
+                        <span>&nbsp;Home</span>
+                    </NavLink>
                 </li>
                 <li className=" text-center md:text-left">
-                    <NavLink to="/AboutUs" className={isActive('/AboutUs')} onClick={handleLinkClick}><i className="ri-building-fill"></i> About Us</NavLink>
+                    <NavLink to="/AboutUs" className={`nav-link ${isActive('/AboutUs')}`} onClick={handleLinkClick}>
+                        <i className="ri-building-fill"></i>
+                        <span>&nbsp;About Us</span></NavLink>
                 </li>
                 <li className=" text-center md:text-left">
-                    <NavLink to="/DemoSection" className={isActive('/DemoSection')} onClick={handleLinkClick}><i className="ri-service-fill"></i> Demo Section</NavLink>
-                </li>
+                    <NavLink to="/DemoSection" className={`nav-link ${isActive('/DemoSection')}`} onClick={handleLinkClick}>
+                        <i className="ri-service-fill"></i>
+                        <span>&nbsp;Demo Section</span>
+                    </NavLink>                </li>
                 <li className=" text-center md:text-left">
-                    <NavLink to="/Models" className={isActive('/Models')} onClick={handleLinkClick}><i className="ri-layout-2-fill"></i> Models</NavLink>
-                </li>
+                    <NavLink to="/Models" className={`nav-link ${isActive('/Models')}`} onClick={handleLinkClick}>
+                        <i className="ri-layout-2-fill"></i>
+                        <span>&nbsp;Models</span>
+                    </NavLink>                </li>
                 <li className=" text-center md:text-left">
-                    <NavLink to="/ContactUs" className={isActive('/ContactUs')} onClick={handleLinkClick}><i className="ri-customer-service-2-fill"></i> Contact Us</NavLink>
+                    <NavLink to="/ContactUs" className={`nav-link ${isActive('/ContactUs')}`} onClick={handleLinkClick}>
+                        <i className="ri-customer-service-2-fill"></i>
+                        <span>&nbsp;Contact Us</span>
+                    </NavLink>
                 </li>
                 <li className=" text-center md:text-left colour:none">
-                    <ThemeToggle /> 
+                    <ThemeToggle />
                 </li>
             </ul>
         </nav>