Feat/header-nandhana (#16)

* Made a functioning dropdown Created the functional aspects of the dropdown: when the v button is clicked, a table of options is created; the clicking of different languages is saved into a state variable; and the component that shows the selected language gets rerendered based on the state variable. Also, I saved the state variables into a context that hopefully allows other components to be able to reference the language selection : ) * Moved the LanguageContext to a higher page In the previous commit, I created a context to store the "language" state variable. In this commit, I moved the context to the index page, so all the child components of the index will get access to the context: the currently selected language and a function to change the language (I put the function for the dropdown component to access TT) * Created hover function and close when clicking out of div function * added basic structure of page links * added underline on hover. attempting bold on current page * fixed fonts * Added some animation and styles Made the dropdown rollout animation! * added image * attempting useState for highlight on active * Added icons and dividers to dropdown * Added more styling details! * Finalized dropdown!! (added original language names and fixed context values) Made the language names to be written in the corresponding language. Made the returned context values of each option to match the names of json's (en, zh, ko, vi, hmn, and es) :) * minor spacing fixes + added border on active page * added header folder for image * fixes- highlight, underline issue, * working on internationalization * trying to add internationalization * Revert "Merge branch 'feat/header-nandhana' of https://github.com/include-davis/paul-homm into feat/header-nandhana" This reverts commit 463725a, reversing changes made to 3c90ac6. * Added i18 features in dropdown * starting to implement mobile header * working on mobile design * added minor comment for clarity * Added i18n compatibility + Condensed dropdown css & code I deleted repetitive code in dropDown.jsx using object mapping & created a i18n.config. I also left an example, compatible to my additions in dropDown.jsx, in index.jsx on how I am imagining i18n would work * Replaced imgs with React Icons + Cleaned up dropDown css * header link onclick fix * language change simplified * Update en.json * language dropdown positioning * Update footer.module.scss * implemented tablet mixins * implemented mobile mixins * Added mobile structure to dropdown * Added header collapse/expand functionality * Mobile dropdown toggle fixed * Reorganized dropDown css file * increased z index of hamburger menu dropdown * implemented fixes to link highliting Corrects the errors where the links wouldn't span the entire menu. Only thing left is to fix the background on active pages to achieve the right dimensions & possibly add in a line transformation on hover. * fixed mobile dropdown (z index, highlights) * mobile dropdown simplified * language dropdown position fixed --------- Co-authored-by: tiramisuuuuuuu <[email protected]> Co-authored-by: Jay <[email protected]> Co-authored-by: JayJ104 <[email protected]> Co-authored-by: Samantha Iraheta <[email protected]>
include-davis · Mar 16, 2024 · 0c2aaed · 0c2aaed
1 parent 39b07e5
commit 0c2aaed
Show file tree

Hide file tree

Showing 10 changed files with 341 additions and 93 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
diff --git a/public/ellipse.svg b/public/ellipse.svg
diff --git a/public/images/footer/credit-union.png b/public/images/footer/credit-union.png
diff --git a/src/components/header/header.jsx b/src/components/header/header.jsx
@@ -2,59 +2,93 @@ import styles from "@/styles/components/header/header.module.scss";
 import { useTranslations } from 'next-intl';
 import Link from "next/link";
 import { useState } from "react";
-import Image from 'next/image'
+import Image from 'next/image';
+import { RxCross1 } from 'react-icons/rx';
+import { IoMenuOutline } from "react-icons/io5";
 import LangDropDown from "../dropDown/dropDown";
 
+
+export async function getStaticProps({ locale }) {
+    return {
+        props: {
+            messages: (await import(`@/messages/${locale}.json`)).default
+        }
+    };
+}
+
 export default function Header() {
+    // use state for links
     const [activeLinks, setActiveLinks] = useState([false, false, false, false, false]);
-
-    const toggleActive = (index) => {
+    const toggleActiveLink = (index) => {
         setActiveLinks(activeLinks.map((value, i) => i === index));
     }
 
+    //use state for hamburger menu 
+    const [active, setActive] = useState(false)
+    const toggleActive = () => {
+        setActive(!active)
+    }
+
+    const toggleAll = (index) => {
+        toggleActiveLink(index);
+        toggleActive();
+    }
+
     const links = [
-        { href: '/', text: 'HOME' },
-        { href: '/about-us', text: 'ABOUT US' },
-        { href: '/services', text: 'SERVICES' },
-        { href: '/committees', text: 'COMMITEES' },
-        { href: '/get-involved', text: 'GET INVOLVED' }
+        { href: '/', text: 'pages.page1' },
+        { href: '/about-us', text: 'pages.page2' },
+        { href: '/services', text: 'pages.page3' },
+        { href: '/committees', text: 'pages.page4' },
+        { href: '/get-involved', text: 'pages.page5' }
     ];
 
+    const t = useTranslations(`Header`)
+
     return (
         <header className={styles.header}>
             <div className={styles.title}>
-                <a href = '/'>
+                <a href='/'>
                     <Image
                         src="/images/header/paul_hom_logo.png"
                         width={110}
                         height={110}
                         alt="Paul Hom logo"
-                        href = '/'
+                        href='/'
                     />
                 </a>
                 <div className={styles.title_text}>
-                    <h1>Paul Hom Asian Clinic</h1>
-                    <h2>A Student-Run Clinic at UC Davis</h2>
+                    <h1>{t('title.clinic_name')}</h1>
+                    <h2>{t('title.subtitle')}</h2>
                 </div>
 
                 <div className={styles.language_dropdown}>
-                    <LangDropDown/>
+                    <LangDropDown />
                 </div>
             </div>
-            <div className={styles.pages}>
+
+
+            <div className={`${styles.pages} ${active ? styles.active : null}`}>
                 {links.map((link, index) => (
-                    <li key = {index} className = {`${styles.page_link} ${activeLinks[index]? styles.active : null}`}>
-                        <Link 
-
-                            href={`${link.href}`} 
-                            onClick={() => toggleActive(index)}
-                        >
-                            {link.text}
-                        </Link>
-                     </li>
-                )
-            )}
+                    <li key={index} className={`${styles.page_link} ${activeLinks[index] ? styles.active : null}`}>
+                        <div className={styles.link_wrapper}>
+                            <Link
+
+                                href={`${link.href}`}
+                                onClick={() => toggleAll(index)}>
+                                <p className={styles.link_text}>{t(link.text)}</p>
+
+                            </Link>
+                        </div>
+                    </li>
+                ))}
             </div>
+
+            <button
+                className={styles.hamburger_menu}
+                onClick={toggleActive}>
+                {active ? <RxCross1 /> : <IoMenuOutline />}
+            </button>
+
         </header>
     );
 }
diff --git a/src/messages/en.json b/src/messages/en.json
@@ -42,6 +42,7 @@
       }
     }
   },
+
   "GetInvolved": {
     "pageTitle": "Get Involved",
     "CardComponent": {
@@ -63,7 +64,7 @@
     "donateHeading": "Donate Today!",
     "donateText": "Paul Hom Asian Clinic is a 501(c)(3) organization. If you would like to support our clinic, donations can be mailed to:",
     "address": "Paul Home Asian Clinic\n6341 Folsom Blvd\nSacramento, CA 95819",
-    "donateText2": " We thank you for your generoristy!"
+    "donateText2": "We thank you for your generoristy!"
   },
   "Footer": {
     "pages": {
@@ -165,43 +166,56 @@
       "covered-california":{
         "title":"Covered California",
         "desc":"The Covered California Committee assists patients in signing up for affordable health insurance through Covered California, Medi-Cal and Medicare. All Covered California Co-Directors are certified enrollment counselors for Covered California and, therefore, are able to work with patients through the entirety of the insurance application. The Covered California Committee also provides assistance in SPIRIT referrals--where patients can potentially have their expensive surgeries paid for."
+      },
+      "cardiopulmonary": {
+          "title": "Cardiopulmonary",
+          "desc": "The Cardiopulmonary Committee educates patients about cardiovascular, pulmonary, and heart-related diseases. We assist patients who are at risk or already addicted to nicotine by providing free cessation resources. The Cardiopulmonary Committee holds monthly specialty clinics that offer electrocardiogram (EKG) strips, ankle brachial index (ABI) tests, and spirometry tests. \n  \n Next Cardiopulmonary Clinic: Sunday, November 20, 2022"
+      },
+      "patient-assistance-program":{
+          "title": "Patient Assistance Program",
+          "desc": "The Patient Assistance Program (PAP) Committee enrolls low-income and uninsured/underinsured patients to receive brand-name medications at no cost from participating pharmaceutical companies. On average, we help patients save $130,000 a year on the medication cost. In addition, we have been leading various projects that provide patients free resources such as: accessories for injectable medications (syringes, needles, sharps containers, and needle clippers) and medication-related infographics. Recently, we have started collaborating with GoodRx to provide qualified patients monthly pre-paid debit cards for their chronic generic medications. Furthermore, the PAP Committee works closely with Dr. Jan and Dr. Pauly to monitor patients’ medication compliance, effectiveness, and safety, and to accommodate patients' other special needs on a case-by-case basis."
+      },
+      "dermatology":{
+          "title":"Dermatology",
+          "desc": "The Dermatology committee is trained and educated to provide quality healthcare to patients experiencing simple to complex skin disorders. Some of the more common conditions that we screen for are eczema, psoriasis, pemphigus, rosacea, acne vulgaris, and all types of cancers. We provide free consultations for skin care and can even perform skin biopsies to rule out concerns for malignancies. Our team is dedicated to help you feel better about your own skin and how you wear it. We look forward to meeting you!\n \n Dermatology Clinics on Sunday, 9/25, 10/16, 12/11" 
+      },
+      "diabetes":{
+          "title": "Diabetes",
+          "desc": "The Diabetes Committee improves the health of patients by screening all patients for diabetes and conducting follow ups with prediabetic and diabetic patients. We also offer nutrition and diet counseling, show exercise demonstrations, and provide free glucometer kits and HgA1c blood tests. The committee holds annual patient education seminars and events to help patients feel equipped to manage their diabetes and overall health."
+      },
+      "hlub":{
+          "title":"HLUB",
+          "desc":"Hmong Lifting Underserved Barriers (H.L.U.B.) is a free student-run clinic consisting of pre-health undergraduate students from University of California, Davis and California State University, Sacramento, along with UC Davis School of Medicine medical students and medical practitioners. H.L.U.B. Clinic aims to provide free healthcare services to the underserved Hmong Community as well as lifting the language and cultural barriers that exist between the Hmong Community and the western healthcare system."
+      },
+      "hepatitis":{
+          "title": "Hepatitis",
+          "desc": "Hepatitis is one of the leading causes of liver cancer, and the Asian population is at a significantly greater risk for having the disease. As a result, the Hepatitis Committee is devoted to identifying and treating this high-risk, underserved and uninsured Asian population in the Sacramento region. We currently provide free screening, vaccinations, and liver ultrasounds to patients. The Hepatitis Committee strives to educate our patients regarding Hepatitis B and encourage everyone to be screened and vaccinated."
+      },
+      "ophthalmology":{
+          "title": "Ophthalmology",
+          "desc": "The Ophthalmology Committee monitors our patients’ history for eye conditions and provides patients with an assessment and follow-up care plan if needed. The committee conducts pupillary exams, intraocular pressure exams, visual acuity exams, slit lamp exams, and retinal exams during our clinic hours. Ophthalmology clinics are held quarterly on Sundays from 8:30am to 12pm. Depending on a patient’s insurance status and visual acuity, the Ophthalmology Committee can provide a VSP voucher which patients can use at a local optometrist’s office to obtain free-of-charge eyeglass frames and lenses and eye exams."
+      },
+      "womens-health":{
+          "title": "Women's Health",
+          "desc": "The Women’s Health Committee ensures patients have access to preventative cancer screenings available to them and hosts health events to educate patients about breast and cervical cancers--topics that are avoided in many Asian families. Some services this committee provides are: referrals to Planned Parenthood for mammograms; enrollment into the Every Woman Counts program for uninsured patients along with follow ups; and scheduling patients for OB/GYN clinics, PAP smears, and clinical breast exams (CBEs)."
+      },
+      "neurology": {
+          "title": "Neurology",
+          "desc": "The Neurology Clinic assists patients with neurological issues, such as problems with memory, neuropathic pain (numb, tingling, or burning feet/hands), sleep, migraine, seizures, and any other issues related to the brain. We also offer dementia screening for patients who are older than 65 years of age and provide access to resources for patients, caretakers, and family members of individuals with memory loss issues."
+      }
+    }
+  },
+  "Header": {
+    "pages": {
+      "page1": "HOME", 
+      "page2": "ABOUT US", 
+      "page3": "SERVICES", 
+      "page4": "COMMITEES", 
+      "page5": "GET INVOLVED"
     },
-    "cardiopulmonary": {
-        "title": "Cardiopulmonary",
-        "desc": "The Cardiopulmonary Committee educates patients about cardiovascular, pulmonary, and heart-related diseases. We assist patients who are at risk or already addicted to nicotine by providing free cessation resources. The Cardiopulmonary Committee holds monthly specialty clinics that offer electrocardiogram (EKG) strips, ankle brachial index (ABI) tests, and spirometry tests. \n  \n Next Cardiopulmonary Clinic: Sunday, November 20, 2022"
-    },
-    "patient-assistance-program":{
-        "title": "Patient Assistance Program",
-        "desc": "The Patient Assistance Program (PAP) Committee enrolls low-income and uninsured/underinsured patients to receive brand-name medications at no cost from participating pharmaceutical companies. On average, we help patients save $130,000 a year on the medication cost. In addition, we have been leading various projects that provide patients free resources such as: accessories for injectable medications (syringes, needles, sharps containers, and needle clippers) and medication-related infographics. Recently, we have started collaborating with GoodRx to provide qualified patients monthly pre-paid debit cards for their chronic generic medications. Furthermore, the PAP Committee works closely with Dr. Jan and Dr. Pauly to monitor patients’ medication compliance, effectiveness, and safety, and to accommodate patients' other special needs on a case-by-case basis."
-    },
-    "dermatology":{
-        "title":"Dermatology",
-        "desc": "The Dermatology committee is trained and educated to provide quality healthcare to patients experiencing simple to complex skin disorders. Some of the more common conditions that we screen for are eczema, psoriasis, pemphigus, rosacea, acne vulgaris, and all types of cancers. We provide free consultations for skin care and can even perform skin biopsies to rule out concerns for malignancies. Our team is dedicated to help you feel better about your own skin and how you wear it. We look forward to meeting you!\n \n Dermatology Clinics on Sunday, 9/25, 10/16, 12/11" 
-    },
-    "diabetes":{
-        "title": "Diabetes",
-        "desc": "The Diabetes Committee improves the health of patients by screening all patients for diabetes and conducting follow ups with prediabetic and diabetic patients. We also offer nutrition and diet counseling, show exercise demonstrations, and provide free glucometer kits and HgA1c blood tests. The committee holds annual patient education seminars and events to help patients feel equipped to manage their diabetes and overall health."
-    },
-    "hlub":{
-        "title":"HLUB",
-        "desc":"Hmong Lifting Underserved Barriers (H.L.U.B.) is a free student-run clinic consisting of pre-health undergraduate students from University of California, Davis and California State University, Sacramento, along with UC Davis School of Medicine medical students and medical practitioners. H.L.U.B. Clinic aims to provide free healthcare services to the underserved Hmong Community as well as lifting the language and cultural barriers that exist between the Hmong Community and the western healthcare system."
-    },
-    "hepatitis":{
-        "title": "Hepatitis",
-        "desc": "Hepatitis is one of the leading causes of liver cancer, and the Asian population is at a significantly greater risk for having the disease. As a result, the Hepatitis Committee is devoted to identifying and treating this high-risk, underserved and uninsured Asian population in the Sacramento region. We currently provide free screening, vaccinations, and liver ultrasounds to patients. The Hepatitis Committee strives to educate our patients regarding Hepatitis B and encourage everyone to be screened and vaccinated."
-    },
-    "ophthalmology":{
-        "title": "Ophthalmology",
-        "desc": "The Ophthalmology Committee monitors our patients’ history for eye conditions and provides patients with an assessment and follow-up care plan if needed. The committee conducts pupillary exams, intraocular pressure exams, visual acuity exams, slit lamp exams, and retinal exams during our clinic hours. Ophthalmology clinics are held quarterly on Sundays from 8:30am to 12pm. Depending on a patient’s insurance status and visual acuity, the Ophthalmology Committee can provide a VSP voucher which patients can use at a local optometrist’s office to obtain free-of-charge eyeglass frames and lenses and eye exams."
-    },
-    "womens-health":{
-        "title": "Women's Health",
-        "desc": "The Women’s Health Committee ensures patients have access to preventative cancer screenings available to them and hosts health events to educate patients about breast and cervical cancers--topics that are avoided in many Asian families. Some services this committee provides are: referrals to Planned Parenthood for mammograms; enrollment into the Every Woman Counts program for uninsured patients along with follow ups; and scheduling patients for OB/GYN clinics, PAP smears, and clinical breast exams (CBEs)."
-    },
-    "neurology": {
-        "title": "Neurology",
-        "desc": "The Neurology Clinic assists patients with neurological issues, such as problems with memory, neuropathic pain (numb, tingling, or burning feet/hands), sleep, migraine, seizures, and any other issues related to the brain. We also offer dementia screening for patients who are older than 65 years of age and provide access to resources for patients, caretakers, and family members of individuals with memory loss issues."
+    "title": {
+      "clinic_name": "Paul Hom Asian Clinic",
+      "subtitle": "A Student-Run Clinic at UC Davis"
     }
-      }
-      }
+  }
 }
diff --git a/src/styles/components/dropDown/dropDown.module.scss b/src/styles/components/dropDown/dropDown.module.scss
@@ -5,7 +5,7 @@
 //hardcoded animation speed in .option, .table, .mobile_headerText
 
 .container {
-    background-color: transparent;
+    background-color: var(--color-beige);
     width: 256px;
     height: auto;
     display: flex;
@@ -117,11 +117,6 @@
     padding: 4px 0px;
 }
 
-.option_text:hover {
-    color: var(--color-gold);
-    background-color: var(--color-maroon);
-}
-
 @keyframes rollout {
     0% {
       transform: translateY(
@@ -133,6 +128,11 @@
     }
 }
 
+.option_text:hover {
+    color: var(--color-gold);
+    background-color: var(--color-maroon);
+}
+
 .divider {
     width: 90%;
     height: 2px;
@@ -141,6 +141,12 @@
     border-radius: 10px;
 }
 
+@include mixins.tablet{
+    .container{
+        width: 216px;
+    }
+}
+
 @include mixins.phone{
 
     .container {
@@ -203,11 +209,7 @@
           transform: translateY(0);
         }
     }
-
-    .table.active {
-        background-color: var(--color-beige);
-    }
-
+
     .option {
         padding: 0;
         padding-bottom: 2px;

diff --git a/src/styles/components/footer/footer.module.scss b/src/styles/components/footer/footer.module.scss
@@ -273,4 +273,4 @@
     @include mixins.sm-phone {
         font-size: 0.875rem;
     }
-}
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -273,4 +273,4 @@ @@
         @include mixins.sm-phone {
             font-size: 0.875rem;
         }
-    }
+    }