diff --git a/frontend/src/components/common/Header.jsx b/frontend/src/components/common/Header.jsx index e9fec39..2c9b208 100644 --- a/frontend/src/components/common/Header.jsx +++ b/frontend/src/components/common/Header.jsx @@ -44,6 +44,10 @@ const Header = () => { }; }, [isSticky, isScrolled]); + useEffect(() => { + console.log(showDropdown); + }, [showDropdown]); + const updatestatus = () => { httpClient.put("/doc_status", { email: localStorage.getItem("email") }); userLogout(); @@ -67,7 +71,9 @@ const Header = () => { const dropdownRef = useRef(); const sidebarRef = useRef(); - useOutsideClose(dropdownRef, () => setShowDropdown(false)); + useOutsideClose(dropdownRef, () => { + setShowDropdown(false); + }); useOutsideClose(sidebarRef, () => setSideBarOpen(false)); const handleLoginClick = () => { @@ -85,21 +91,11 @@ const Header = () => { {localStorage.getItem("username") && localStorage.getItem("username") !== "undefined" && localStorage.getItem("usertype") === "patient" && ( - // contact-header - // flex justify-between items-center border-b-[1px] border-blue-8 h-full transition-all duration-300 ease-out max-[950px]:py-4 max-[950px]:px-8 max-xs:p-4 ${isScrolled ? "hidden opacity-0 py-0 h-0" : "visible opacity-100 py-4 px-40"} - // hidden md:flex justify-between items-center px-4 lg:px-40 py-4 border-b border-blue-800 - // transition-all duration-300 ${isScrolled ? 'h-0 opacity-0 invisible p-0' : 'h-full opacity-100 visible'} - // className={`flex justify-between items-center py-4 px-40 C h-full max-[950px]:px-8 max-[950px]:py-4 max-xs:p-4 ${ - // isScrolled - // ? "" - // : "" - // }`}
- {/* details */}
{ : "translate-x-0 opacity-100" }`} > - {/* contact-detail */} - {/* icon */} - {/* detail */}

telmedsphere489@gmail.com

- {/* contact-detail */} { : "translate-x-0 opacity-100" }`} > - {/* appt-link */} {
)} - {/* relative top-0 left-0 z-[999] bg-[#d4ddf1] w-full text-blue-8 py-6 px-8 pt-6 pb-6 transition-colors duration-200 ease-linear */}
{ } `} >
- {/* navbar */}
- {/* nav_logo */}

{

{!localStorage.getItem("username") && ( <> - {/* auth-buttons */}
- {/* get_started_btn */}
*/} -
- navigate("/buy-medicines")} className="cursor-pointer font-bold relative"> + navigate("/buy-medicines")} + className="cursor-pointer font-bold relative" + > MEDICINES - 20% off + + 20% off +
-
- setShowDropdown(!showDropdown)}> + {/* Account Dropdown */} +
+ setShowDropdown(!showDropdown)} + > ACCOUNT -
-

- Hello!{" "} - {localStorage.getItem("username") !== undefined && ( -  {localStorage.getItem("username")} - )} -

-

Have a great health!!

- - -
-
    -
  • - - setShowDropdown(false)} - > - My Wallet - -
  • -
  • - - setShowDropdown(false)} + {showDropdown && ( +
    +
    +

    + + Hello!   + + {localStorage.getItem("username")} +

    +

    + Have a great health!! +

    +
  • -
  • - - setShowDropdown(false)} + Profile + +
  • -
-
-
+ Logout + +
+
    +
  • + + setShowDropdown(false)} + > + My Wallet + +
  • +
  • + + setShowDropdown(false)} + > + My Cart + + + {cartItems.length} + +
  • +
  • + + setShowDropdown(false)} + > + My Orders + +
  • +
+
+
+ )} +
) : ( - ) ) : null} diff --git a/frontend/src/styles/base/_header.scss b/frontend/src/styles/base/_header.scss deleted file mode 100644 index d70c8ef..0000000 --- a/frontend/src/styles/base/_header.scss +++ /dev/null @@ -1,451 +0,0 @@ -#contact-header { - @include flexbox(space-between, center); - padding: 1rem 10rem; - border-bottom: 1px solid var(--blue-color-8); - height: 100%; - @include toggleVisibility(visible, 1); - @include transition(all, 0.3s, ease-out); - - @include devices(950px) { - padding: 1rem 2rem; - } - - @include devices(xs) { - padding: 1rem; - } - - &.scrolled { - @include toggleVisibility(hidden, 0); - height: 0%; - padding: 0; - } - - .details { - @include flexbox(center, center); - flex-wrap: wrap; - color: var(--grey-color-3); - - .contact-detail { - @include flexbox(center, center); - transition: all 0.3s ease-out; - - &:hover { - color: #333; - } - } - - .icon, .detail { - font-size: 0.9em; - line-height: 1.4rem; - } - - .icon { - margin-right: 5px; - } - - .contact-detail:first-child { - margin-right: 20px; - - @include devices(xs) { - margin-right: 0; - } - } - } - - .appt-link { - color: var(--blue-color-5); - font-weight: bold; - - transition: all 0.3s ease-out; - - &:hover { - color: var(--blue-color-7); - } - } - -} - -#header { - position: relative; - top: 0; - left: 0; - z-index: 999; - background-color: #d4ddf1; - width: 100%; - color: var(--blue-color-8); - padding: 1.5rem 2rem; /* Adjusted padding for better spacing */ - // background-color: var(--white-color); - @include padding-y(1.5rem, 1.5rem); - @include transition(background-color, 0.2s, linear); - - &.sticky { - position: sticky; - background-color: var(--blue-color-1); - } -} - -.navbar { - @include flexbox(space-between, center); - display: flex; - justify-content: space-between; - align-items: center; - gap: 1rem; /* Adjusted gap for better spacing */ -} - -.nav_logo { - display: flex; - align-items: center; - img { - max-height: 45px; /* Adjust this value as needed */ - height: auto; - width: auto; - } - - &:hover { - color: var(--blue-color-9); - } -} - - -.get_started_btn { - padding: 0.8rem 1rem; - border-radius: 4px; - color: var(--white-color); - background-color: var(--blue-color-4); - @include transition(all, 0.3s, ease); - - &:hover { - color: var(--blue-color-1); - background-color: var(--blue-color-5); - } -} - -.nav_actions { - @include flexbox($alignItems: center); - gap: 3rem; - font-size: 1.5rem; -} - -.dash_action, -.doctor_action, -.model_action, -.medicine_action, -.user_action { - position: relative; -} - -.dash_action, -.doctor_action, -.model_action, -.medicine_action { - - &:hover { - color: var(--blue-color-9); - } - - ::before { - content: ''; - position: absolute; - bottom: -6px; - left: 50%; - transform: translateX(-50%); - height: 2px; - width: 0%; - background-color: var(--blue-color-9); - transition: all 0.3s ease; - } - - &.active { - color: var(--blue-color-9); - - ::before { - width: 100%; - } - } -} - -.dash_action, -.doctor_action, -.model_action, -.medicine_action, -.user_action { - span { - cursor: pointer; - font-size: 0.6em; - font-weight: bold; - } -} - -.user_action:hover { - span { - color: var(--blue-color-9); - } -} - -.medicine_action { - - .badge { - @include centered; - @include dimension(45px, 20px); - position: absolute; - top: 0; - right: -40px; - background-color: var(--blue-color-8); - border-radius: 40px; - font-size: 0.6rem; - } - - &:hover { - .badge { - background-color: var(--blue-color-9); - } - } -} - -.user_action { - - .dropdown_menu { - position: absolute; - top: 50px; - right: 0; - width: 17.5rem; - background-color: var(--blue-color-6); - padding: 1.4rem; - font-size: 0.9rem; - border-radius: 3px; - color: #eee; - z-index: 99; - @include bordered(1px, var(--grey-color-3)); - @include toggleVisibility(hidden, 0); - @include transition(all, 0.2s, ease-in-out); - - &.active { - @include toggleVisibility(visible, 1); - } - - h4 { - font-weight: 600; - letter-spacing: 0.5px; - - span { - color: var(--blue-color-2); - font-size: 1em; - opacity: 0.95; - - &:hover { - opacity: 1; - } - } - } - - p { - font-size: 0.8rem; - margin-top: 0.5rem; - } - - button { - margin-top: 1rem; - padding: 0.8rem 1rem; - border-radius: 4px; - @include bordered(1px, var(--grey-color-2)); - @include transition(all, 0.3s, ease); - - &:hover { - color: var(--blue-color-1); - border-color: var(--blue-color-3); - background-color: var(--blue-color-3); - } - } - - .profile_btn { - color: var(--blue-color-1); - border-color: var(--blue-color-3); - background-color: var(--blue-color-3); - margin-right: 10px; - - &:hover { - border-color: var(--blue-color-5); - background-color: var(--blue-color-5); - } - } - - li { - &:not(:last-child) { - margin-bottom: 0.7rem; - } - - .cart-icon { - font-size: 1.4em; - } - - a { - color: var(--blue-color-1); - margin-left: 10px; - - &:hover { - color: var(--white-color); - text-decoration: underline; - } - } - - .cart_badge { - background-color: var(--blue-color-3); - font-size: 0.8rem; - border-radius: 3px; - margin-left: 10px; - padding: 0.2rem 0.4rem; - color: var(--white-color); - } - - } - } -} - - -#sidebar { - - .sidebar-icon { - font-size: 1.5em; - cursor: pointer; - font-weight: bold; - } - - .collapse { - @include toggleVisibility(hidden, 0); - position: relative; - transition: all 0.3s ease-in; - - &.active { - @include toggleVisibility(visible, 1); - } - - .nav_actions { - position: absolute; - flex-direction: column; - top: 30px; - right: 0; - gap: 1.5rem; - background-color: var(--blue-color-1); - z-index: 99; - padding: 1rem 5rem; - border-radius: 20px; - - } - } - - .dropdown_menu { - position: absolute; - top: 80px; - right: 10px; - width: 17.5rem; - background-color: var(--blue-color-6); - padding: 1.4rem; - font-size: 0.9rem; - border-radius: 3px; - color: #eee; - z-index: 99; - @include bordered(1px, var(--grey-color-3)); - @include toggleVisibility(hidden, 0); - @include transition(all, 0.2s, ease-in-out); - - &.active { - @include toggleVisibility(visible, 1); - } - - h4 { - font-weight: 600; - letter-spacing: 0.5px; - - span { - color: var(--blue-color-2); - font-size: 1em; - opacity: 0.95; - - &:hover { - opacity: 1; - } - } - } - - p { - font-size: 0.8rem; - margin-top: 0.5rem; - } - - button { - margin-top: 1rem; - padding: 0.8rem 1rem; - border-radius: 4px; - @include bordered(1px, var(--grey-color-2)); - @include transition(all, 0.3s, ease); - - &:hover { - color: var(--blue-color-1); - border-color: var(--blue-color-3); - background-color: var(--blue-color-3); - } - } - - .profile_btn { - color: var(--blue-color-1); - border-color: var(--blue-color-3); - background-color: var(--blue-color-3); - margin-right: 10px; - - &:hover { - border-color: var(--blue-color-5); - background-color: var(--blue-color-5); - } - } - - li { - &:not(:last-child) { - margin-bottom: 0.7rem; - } - - .cart-icon { - font-size: 1.4em; - } - - a { - color: var(--blue-color-1); - margin-left: 10px; - - &:hover { - color: var(--white-color); - text-decoration: underline; - } - } - - .cart_badge { - background-color: var(--blue-color-3); - font-size: 0.8rem; - border-radius: 3px; - margin-left: 10px; - padding: 0.2rem 0.4rem; - color: var(--white-color); - } - - } - } -} - -.auth-buttons { - display: flex; - gap: 1rem; - align-items: center; - margin-left: auto; - - .get_started_btn { - padding: 0.7rem 1.5rem; - border-radius: 4px; - color: var(--white-color); - background-color: var(--blue-color-4); - transition: all 0.3s ease; - cursor: pointer; - - &:hover { - background-color: var(--blue-color-6); - } - } -} \ No newline at end of file diff --git a/frontend/src/styles/style.scss b/frontend/src/styles/style.scss index d3b1ca9..06709ed 100644 --- a/frontend/src/styles/style.scss +++ b/frontend/src/styles/style.scss @@ -3,5 +3,4 @@ @import "./base/mixins"; @import "./base/reset"; -@import "./base/common"; -@import "./base/header"; \ No newline at end of file +@import "./base/common"; \ No newline at end of file