Merge pull request #18 from gabrielduete/fix/bugs-header

gabrielduete · Sep 20, 2023 · 8a19ea9 · 8a19ea9
2 parents 0947f36 + a720631
commit 8a19ea9
Show file tree

Hide file tree

Showing 10 changed files with 56 additions and 23 deletions.
diff --git a/src/components/Articles/index.tsx b/src/components/Articles/index.tsx
@@ -5,7 +5,10 @@ import Title from '../Title'
 const Articles = () => {
   return (
     <>
-      <section className='flex flex-col items-center justify-center mt-48 mb-52 max-md:px-4 px-48'>
+      <section
+        className='flex flex-col items-center justify-center mt-48 mb-52 max-md:px-4 px-48'
+        id='aboutUs'
+      >
         <Title fontSize='text-3xl' hasLine={true} linePositionCenter={true}>
           Check out our latest article
         </Title>

diff --git a/src/components/Depoiments/index.tsx b/src/components/Depoiments/index.tsx
@@ -6,7 +6,10 @@ import { DepoimentsStorage } from './context'
 const Depoiments = () => {
   return (
     <DepoimentsStorage>
-      <section className='flex flex-col items-center justify-center px-9 mb-56'>
+      <section
+        className='flex flex-col items-center justify-center px-9 mb-56'
+        id='depoiments'
+      >
         <Cards />
         <Arrows />
       </section>

diff --git a/src/components/Header/Header.data.ts b/src/components/Header/Header.data.ts
@@ -1,7 +1,22 @@
 export const TEXTS_SIDEBAR = [
-  'Home',
-  'Find a doctor',
-  'Apps',
-  'Testimonials',
-  'About us',
+  {
+    name: 'Home',
+    id: 'introduction',
+  },
+  {
+    name: 'Find a doctor',
+    id: 'findADoctor',
+  },
+  {
+    name: 'Apps',
+    id: 'apps',
+  },
+  {
+    name: 'Testimonials',
+    id: 'depoiments',
+  },
+  {
+    name: 'About us',
+    id: 'aboutUs',
+  },
 ]
diff --git a/src/components/Header/Siderbar/Sidebar.spec.tsx b/src/components/Header/Siderbar/Sidebar.spec.tsx
@@ -5,7 +5,9 @@ import { TEXTS_SIDEBAR } from '../Header.data'
 import SideBar from '.'
 
 describe('<SideBar />', () => {
-  it.each(TEXTS_SIDEBAR)('should render text %p when isOpen is true', text => {
+  const items = TEXTS_SIDEBAR.map(item => item.name)
+
+  it.each(items)('should render text %p when isOpen is true', name => {
     render(
       <SideBar
         isOpen={true}
@@ -15,7 +17,7 @@ describe('<SideBar />', () => {
       />
     )
 
-    expect(screen.getByText(text)).toBeInTheDocument()
+    expect(screen.getByText(name)).toBeInTheDocument()
   })
 
   it('close sideBar when isOpen is false', () => {

diff --git a/src/components/Header/Siderbar/index.tsx b/src/components/Header/Siderbar/index.tsx
@@ -13,8 +13,9 @@ const SideBar = ({ isOpen, onClose }: SideBarProps) => {
       className={`
           right-0
           top-0
-          h-screen
-          bg-sky-100
+          rounded-bl-2xl
+          bg-blue-500
+          text-white
           flex
           flex-col
           gap-2

diff --git a/src/components/Header/Texts/index.tsx b/src/components/Header/Texts/index.tsx
@@ -1,19 +1,19 @@
 export type ItemsProps = {
-  items: Array<string>
+  items: Array<{ name: string; id: string }>
   isColumn?: boolean
 }
 
 const Texts = ({ items, isColumn }: ItemsProps) => {
   return (
     <div>
       <ul className={`flex gap-10 ${isColumn && 'flex-col'} `}>
-        {items.map(item => {
+        {items.map(({ name, id }) => {
           return (
             <li
-              className='cursor-pointer text-lg text-slate-400 hover:text-black	delay-50 duration-500 font-medium list-none'
-              key={item}
+              className='cursor-pointer text-lg text-white xl:text-slate-400 hover:text-black	delay-50 duration-500 font-medium list-none'
+              key={id}
             >
-              {item}
+              <a href={`#${id}`}>{name}</a>
             </li>
           )
         })}

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -11,16 +11,16 @@ const Header = () => {
   const [isOpen, setIsOpen] = useState<boolean>(false)
 
   return (
-    <>
+    <header className='fixed top-0 left-0 w-full z-50 bg-white'>
       <SideBar isOpen={isOpen} onClose={() => setIsOpen(false)} />
-      <header className='flex justify-between items-center p-4 xl:px-48 xl:py-16'>
+      <div className='flex justify-between items-center p-4 xl:px-48'>
         <Logo type='black' />
         <nav className='hidden xl:block'>
           <Texts items={TEXTS_SIDEBAR} />
         </nav>
         <MenuIcon onClick={() => setIsOpen(true)} className='block xl:hidden' />
-      </header>
-    </>
+      </div>
+    </header>
   )
 }
 

diff --git a/src/components/Introduction/index.tsx b/src/components/Introduction/index.tsx
@@ -5,7 +5,10 @@ import Button from '../Button'
 
 const Introduction = () => {
   return (
-    <section className='max-md:px-4 px-48 flex justify-center items-center gap-28'>
+    <section
+      className='max-md:px-4 px-48 flex justify-center items-center gap-28 mt-28'
+      id='introduction'
+    >
       <div>
         <Title fontSize='text-5xl' width='max-w-[427px]'>
           Virtual healthcare for you

diff --git a/src/components/SectionApps/index.tsx b/src/components/SectionApps/index.tsx
@@ -7,7 +7,10 @@ import DownloadIcon from '@mui/icons-material/Download'
 
 const SectionApps = () => {
   return (
-    <section className='flex gap-36 items-center justify-center px-9 mb-56'>
+    <section
+      className='flex gap-36 items-center justify-center px-9 mb-56'
+      id='apps'
+    >
       <div>
         <Title hasLine={true} fontSize='text-4xl' width='max-w-[250px]'>
           Download our mobile apps

diff --git a/src/components/SectionServices/index.tsx b/src/components/SectionServices/index.tsx
@@ -4,7 +4,10 @@ import Cards from './Cards/Cards'
 
 const SectionServices = () => {
   return (
-    <section className='flex flex-col items-center justify-center mt-48 mb-52 max-md:px-4 px-48'>
+    <section
+      className='flex flex-col items-center justify-center mt-48 mb-52 max-md:px-4 px-48'
+      id='findADoctor'
+    >
       <Title fontSize='text-3xl' hasLine={true} linePositionCenter={true}>
         Our Services
       </Title>