UI Enhancement of Navbar

client/src/components/Navbar.jsx

@@ -1,8 +1,8 @@
 import React, { useState } from "react";
-import { FaGithub, FaBars, FaTimes } from "react-icons/fa"; // Combine the imports from react-icons/fa
+import { FaGithub, FaBars, FaTimes } from "react-icons/fa";
 import { Link } from "react-router-dom";
 import { CiStar } from "react-icons/ci";
-import logo_final from "../assets/logo_final.png"; // Adjust the path to your logo
+import logo_final from "../assets/logo_final.png";
 
 const Navbar = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -16,7 +16,7 @@ const Navbar = () => {
   };
 
   const logoStyle = {
-    height: "60px", // Adjusted size for better visibility
+    height: "60px",
     width: "60px",
     borderRadius: "50%",
     marginRight: "10px",
@@ -32,7 +32,7 @@ const Navbar = () => {
               <span className="ml-2">PreDiaBet</span>
             </Link>
           </div>
-          <div className="hidden md:block">
+          <div className="hidden 850px:block">
             <div className="ml-10 flex items-center space-x-4">
               <NavLink to="/" onClick={closeMenu}>
                 Home
@@ -64,7 +64,7 @@ const Navbar = () => {
               </a>
             </div>
           </div>
-          <div className="-mr-2 flex md:hidden">
+          <div className="-mr-2 flex 850px:hidden">
             <button
               onClick={toggleMenu}
               type="button"
@@ -87,38 +87,51 @@ const Navbar = () => {
       <div
         className={`fixed top-0 right-0 h-full bg-gray-800 bg-opacity-90 z-50 transform ${
           isOpen ? "translate-x-0" : "translate-x-full"
-        } transition-transform duration-300 ease-in-out md:hidden`}
+        } transition-transform duration-300 ease-in-out 850px:hidden`}
       >
-        <div className="px-2 pt-2 pb-3 space-y-1">
-          <NavLink to="/" onClick={closeMenu}>
-            Home
-          </NavLink>
-          <NavLink to="/data-info" onClick={closeMenu}>
-            Data Info
-          </NavLink>
-          <NavLink to="/prediction" onClick={closeMenu}>
-            Prediction
-          </NavLink>
-          <NavLink to="/visualization" onClick={closeMenu}>
-            Visualization
-          </NavLink>
-          <NavLink to="/contact" onClick={closeMenu}>
-            Contact Us
-          </NavLink>
-          <NavLink to="/FAQ" onClick={closeMenu}>
-            FAQ
-          </NavLink>
-          <a
-            href="https://github.com/BamaCharanChhandogi/Diabetes-Prediction"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="flex items-center text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
-            onClick={closeMenu}
-          >
-            <CiStar className="w-5 h-5 text-yellow-500 font-bold mr-2" />
-            <FaGithub className="h-5 w-5 mr-2" />
-            GitHub
-          </a>
+        <div className="px-4 pt-5 pb-3 space-y-4">
+          <div className="flex justify-between items-center">
+            <Link to="/" className="text-white font-bold flex items-center" onClick={closeMenu}>
+            </Link>
+            <button
+              onClick={toggleMenu}
+              type="button"
+              className="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
+            >
+              <FaTimes className="block h-6 w-6" />
+            </button>
+          </div>
+          <div className="space-y-4">
+            <NavLink to="/" onClick={closeMenu}>
+              Home
+            </NavLink>
+            <NavLink to="/data-info" onClick={closeMenu}>
+              Data Info
+            </NavLink>
+            <NavLink to="/prediction" onClick={closeMenu}>
+              Prediction
+            </NavLink>
+            <NavLink to="/visualization" onClick={closeMenu}>
+              Visualization
+            </NavLink>
+            <NavLink to="/contact" onClick={closeMenu}>
+              Contact Us
+            </NavLink>
+            <NavLink to="/FAQ" onClick={closeMenu}>
+              FAQ
+            </NavLink>
+            <a
+              href="https://github.com/BamaCharanChhandogi/Diabetes-Prediction"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
+              onClick={closeMenu}
+            >
+              <CiStar className="w-5 h-5 text-yellow-500 font-bold mr-2" />
+              <FaGithub className="h-5 w-5 mr-2" />
+              GitHub
+            </a>
+          </div>
         </div>
       </div>
     </nav>
@@ -130,7 +143,7 @@ const NavLink = ({ to, children, onClick }) => (
   <Link
     to={to}
     onClick={onClick}
-    className="flex items-center text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-md font-medium"
+    className="block text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-base font-medium"
   >
     {children}
   </Link>

client/tailwind.config.js

@@ -8,6 +8,9 @@ export default {
   ],
   theme: {
     extend: {
+      screens: {
+        '850px': '850px',
+      },
       textShadow: {
         sm: '0 1px 2px var(--tw-shadow-color)',
         DEFAULT: '0 2px 4px var(--tw-shadow-color)',
@@ -27,4 +30,4 @@ export default {
       )
     }),
   ],
-}
+}