From e1f8f0ba16b17df54ce0fb830debaafd32e0fce4 Mon Sep 17 00:00:00 2001 From: Mohit Kumar <125040386+mohit-0007@users.noreply.github.com> Date: Tue, 28 May 2024 03:32:28 +0530 Subject: [PATCH] new navbar (all issues fixed) --- frontend/src/components/Hero.jsx | 123 +++++++++------- frontend/src/components/Navbar.jsx | 223 +++++++++++------------------ frontend/src/index.css | 14 +- frontend/tailwind.config.js | 4 +- 4 files changed, 167 insertions(+), 197 deletions(-) diff --git a/frontend/src/components/Hero.jsx b/frontend/src/components/Hero.jsx index 3618234..aee62cb 100644 --- a/frontend/src/components/Hero.jsx +++ b/frontend/src/components/Hero.jsx @@ -29,42 +29,47 @@ function Hero() { // // {images.map((image, index) => ( //
-
-
-
-
-

- HELLO THERE! -
- Always caring about - -
- your health, we are here to -
- help you. -

+
+
+
+
+

+ HELLO THERE! +
+ + Always caring about + +
+ + {" "} + your health, we are here to + +
+ + {" "} + help you. + +

- {/* above medium scrren size button */} - - - {/* small screen size button + {/* above medium scrren size button */} + + + {/* small screen size button */} -
- Your Image -
-

Stay hydrated,
Stay healthy

-
-
-

Healthy diet,
Healthy life

-
- -
-

Prioritize your
mental health

-
-
-
+ Your Image +
+

+ Stay hydrated, +
+ Stay healthy +

+
+
+

+ Healthy diet, +
+ Healthy life +

+
+ +
+

+ Prioritize your +
+ mental health +

+
+
+
+
//
// ))} // diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx index 0d2a0df..d623225 100644 --- a/frontend/src/components/Navbar.jsx +++ b/frontend/src/components/Navbar.jsx @@ -1,21 +1,13 @@ import { NavLink } from "react-router-dom"; -import React from "react"; -import mediHubLogo from "/Medihub-logo.png"; +import React, { useState } from "react"; // react icons -import { - FaShoppingCart, - FaDiscord, - FaGithub, - FaLinkedinIn, - FaHospitalUser, - FaUser, - FaCalendarCheck, - FaHeart, - FaShoppingBag, - FaSignOutAlt, -} from "react-icons/fa"; -import { useState } from "react"; +import { FaDiscord, FaGithub, FaLinkedinIn } from "react-icons/fa"; +import { IoCartOutline } from "react-icons/io5"; +import { FaRegCalendarCheck, FaRegHeart } from "react-icons/fa"; +import { LuBox } from "react-icons/lu"; +import { IoIosLogOut } from "react-icons/io"; +import { FaRegCircleUser } from "react-icons/fa6"; function Navbar() { // state to manage drop down menu @@ -30,82 +22,64 @@ function Navbar() { setDropdownOpen(false); }; + // Nav items array + const navItems = [ + { to: "/", label: "Home" }, + { to: "/alldoctors", label: "All Doctors" }, + { to: "/specialities", label: "Specialities" }, + { to: "/medicines", label: "Medicines" }, + { to: "/appointment", label: "Appointment" }, + ]; + + const navLinkClass = ({ isActive }) => + `text-sm font-semibold relative cursor-pointer before:block before:absolute before:bottom-[-4px] before:left-0 before:w-0 before:h-0.5 before:rounded-full before:bg-text before:transition-all before:delay-150 before:ease-in-out hover:before:w-full hover:text-dark_theme ${ + isActive ? "text-dark_theme" : "text-main_theme" + } `; + + const dropdownMenus = [ + { to: "/profile", label: "My Profile", icon: FaRegCircleUser }, + { to: "/appointments", label: "Appointments", icon: FaRegCalendarCheck }, + { to: "/wishlist", label: "Wishlist", icon: FaRegHeart }, + { to: "/order", label: "Orders", icon: LuBox }, + { to: "/logout", label: "Logout", icon: IoIosLogOut }, + ]; + + const socialLinks = [ + { + to: "https://github.com/itsmohit097/medi-hub", + label: "github", + icon: FaGithub, + }, + { + to: "https://www.linkedin.com/in/itsmohit097/", + label: "linkedin", + icon: FaLinkedinIn, + }, + { to: "https://discord.gg/krQd2Fss", label: "discord", icon: FaDiscord }, + ]; + return ( -
-
+
+
{/* logo */}
- MEDIHUB -

MEDIHUB

+ +

+ MediHub +

+
{/* Nav Menus */}
    -
  • - - `text-sm font-normal relative cursor-pointer before:block before:absolute before:bottom-[-4px] before:left-0 before:w-0 before:h-0.5 before:rounded-full before:bg-text before:transition-all before:delay-150 before:ease-in-out hover:before:w-full hover:text-text ${ - isActive ? "text-text" : "text-text/70" - }` - } - > - Home - -
    • -
  • - - `text-sm font-normal relative cursor-pointer before:block before:absolute before:bottom-[-4px] before:left-0 before:w-0 before:h-0.5 before:rounded-full before:bg-text before:transition-all before:delay-150 before:ease-in-out hover:before:w-full hover:text-text ${ - isActive ? "text-text" : "text-text/70" - }` - } - > - All Doctors - -
    • -
  • - - `text-sm font-normal relative cursor-pointer before:block before:absolute before:bottom-[-4px] before:left-0 before:w-0 before:h-0.5 before:rounded-full before:bg-text before:transition-all before:delay-150 before:ease-in-out hover:before:w-full hover:text-text ${ - isActive ? "text-text" : "text-text/70" - }` - } - > - Specialities - -
    • -
  • - - `text-sm font-normal relative cursor-pointer before:block before:absolute before:bottom-[-4px] before:left-0 before:w-0 before:h-0.5 before:rounded-full before:bg-text before:transition-all before:delay-150 before:ease-in-out hover:before:w-full hover:text-text ${ - isActive ? "text-text" : "text-text/70" - }` - } - > - Medicines - -
    • -
  • - - `text-sm font-normal relative cursor-pointer before:block before:absolute before:bottom-[-4px] before:left-0 before:w-0 before:h-0.5 before:rounded-full before:bg-text before:transition-all before:delay-150 before:ease-in-out hover:before:w-full hover:text-text ${ - isActive ? "text-text" : "text-text/70" - }` - } - > - Appointment - -
    • + {navItems.map((navItem, index) => ( +
  • + + {navItem.label} + +
    • + ))}
  • - Login + + Login + + {/* Dropdown Menus */} {isDropdownOpen && (
    {/* Drop down menu items */} - - My Profile - - - Appointments - - - Wishlist - - - Order - - - Logout - + {dropdownMenus.map((menu, index) => ( + + {menu.icon && }{" "} + {menu.label} + + ))}
    )}
- {/* social icons */} -
+
- - - - - - - - - - + +
+ 7 +
+ + {/* social icons */} + {socialLinks.map((socialLink, index) => ( + + {/*
*/} + + {/*
*/} + + ))}
diff --git a/frontend/src/index.css b/frontend/src/index.css index b4b9eb1..98ae748 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -1,4 +1,4 @@ -@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"); +@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); @tailwind base; @@ -8,16 +8,17 @@ * { - font-family: "Montserrat", sans-serif; + /* font-family: "Montserrat", sans-serif; */ + font-family: "poppins"; } body { - height: 100%; + height: 100vh; } /* Style the scrollbar */ ::-webkit-scrollbar { - width: 10px; + width: 0px; } ::-webkit-scrollbar-track { @@ -25,11 +26,10 @@ body { } ::-webkit-scrollbar-thumb { - background: linear-gradient(#B3DAD9,#03565A); + background: linear-gradient(#B3DAD9, #03565A); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #03686b; -} - +} \ No newline at end of file diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index e45c0e2..ca59dec 100644 --- a/frontend/tailwind.config.js +++ b/frontend/tailwind.config.js @@ -17,13 +17,15 @@ export default { } }, colors: { + dark_theme: "#113C49", main_theme: "#03565A", light_theme: "#B3DAD9", pastel_blue: "#E3EFFC", pastel_yellow: "#FDF1DB", pastel_pink: "#FCEDF2", cart_orange: "#FF8945", - text: "#FFFFFF" + text: "#ffffff", + text_grey: "#464646" } }, },