Skip to content

Commit

Permalink
Merge pull request #139 from Soumya6Tiwari/main
Browse files Browse the repository at this point in the history 
 Issue number : #137 Added a suitable logo for the website.
  • Loading branch information
@BamaCharanChhandogi
BamaCharanChhandogi authored Jul 10, 2024
2 parents 03d85cb + ad5e6bf commit 130756d
Show file tree
Hide file tree
Showing 4 changed files with 43 additions and 89 deletions.
2 changes: 1 addition & 1 deletion client/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Binary file added client/src/assets/logo_diabetes.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added client/src/assets/logo_final.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
130 changes: 42 additions & 88 deletions client/src/components/Navbar.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React, { useState } from "react";
import { FaGithub } from "react-icons/fa";
import { FaGithub, FaBars, FaTimes } from "react-icons/fa"; // Combine the imports from react-icons/fa
import { Link } from "react-router-dom";
import { CiStar } from "react-icons/ci";
import { FaBars, FaTimes } from "react-icons/fa";
import logo_final from '../assets/logo_final.png'; // Adjust the path to your logo

const Navbar = () => {
const [isOpen, setIsOpen] = useState(false);
Expand All @@ -15,58 +15,37 @@ const Navbar = () => {
setIsOpen(false);
};

const logoStyle = {
height: '60px', // Adjusted size for better visibility
width: '60px',
borderRadius: '50%',
marginRight: '10px',
};

return (
<nav className="bg-gray-800 sticky z-50 top-0">
<nav className="bg-gray-800 sticky z-50 top-0" style={{ height: "5rem" }}>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16">
<div className="flex-shrink-0">
<Link to="/" className="text-white font-bold">
Diabetes Prediction App
<div className="flex items-center justify-between h-20">
<div className="flex items-center">
<Link to="/" className="text-white font-bold flex items-center">
<img src={logo_final} alt="Logo" style={logoStyle} />
<span className="ml-2">PreDiaBet</span>
</Link>
</div>
<div className="hidden md:block">
<div className="ml-10 flex items-center space-x-4">
<Link
to="/"
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-md font-medium"
>
Home
</Link>
<Link
to="/data-info"
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-md font-medium"
>
Data Info
</Link>
<Link
to="/prediction"
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-md font-medium"
>
Prediction
</Link>
<Link
to="/visualization"
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-md font-medium"
>
Visualization
</Link>
<Link
to="/contact"
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-md font-medium"
>
Contact Us
</Link>
<Link
to="/FAQ"
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-md font-medium"
>
FAQ
</Link>
<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="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-md font-medium flex gap-2 items-center border-2 border-red-800"
className="flex items-center text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-md font-medium"
onClick={closeMenu}
>
<CiStar className="w-7 h-7 text-yellow-500 font-bold" />
<FaGithub className="h-7 w-7" />
Expand Down Expand Up @@ -95,53 +74,17 @@ const Navbar = () => {
{/* Mobile Menu */}
<div className={`${isOpen ? "block" : "hidden"} md:hidden`}>
<div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<Link
to="/"
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
onClick={closeMenu}
>
Home
</Link>
<Link
to="/data-info"
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
onClick={closeMenu}
>
Data Info
</Link>
<Link
to="/prediction"
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
onClick={closeMenu}
>
Prediction
</Link>
<Link
to="/visualization"
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
onClick={closeMenu}
>
Visualization
</Link>
<Link
to="/contact"
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
onClick={closeMenu}
>
Contact Us
</Link>
<Link
to="/FAQ"
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
onClick={closeMenu}
>
FAQ
</Link>
<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="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium flex gap-2 items-center"
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" />
Expand All @@ -154,4 +97,15 @@ const Navbar = () => {
);
};

export default Navbar;
// Custom NavLink component for internal links
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"
>
{children}
</Link>
);

export default Navbar;

0 comments on commit 130756d

Please sign in to comment.