Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issue number : #137 Added a suitable logo for the website. #139

Merged
merged 7 commits into from
Jul 10, 2024
Merged

Issue number : #137 Added a suitable logo for the website. #139

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
96f8333
Added Logo
Soumya6Tiwari Jul 8, 2024
2c2fa37
updated the changes
Soumya6Tiwari Jul 9, 2024
3e2ea59
updated the logo
Soumya6Tiwari Jul 9, 2024
a608b79
updated the changes
Soumya6Tiwari Jul 9, 2024
2911f25
Delete client/package-lock.json
Soumya6Tiwari Jul 9, 2024
0e3f0af
Added suitable logo for the website
Soumya6Tiwari Jul 10, 2024
ad5e6bf
Merge branch 'main' of https://github.com/Soumya6Tiwari/Diabetes-Pred…
Soumya6Tiwari Jul 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion client/package-lock.json
View file
Open in desktop

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
Open in desktop
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
Open in desktop
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
Open in desktop
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;
Loading