Moves menubar in header

src/Components/Home.js

@@ -6,36 +6,40 @@ import GetIcons from './Icons/GetIcons'
 
 function Home() {
   return (
-    <main>
-      <Navbar
-        start={
-          <Link to="/search" aria-label="Search">
-            <GetIcons iconName="search" size={20} />
-          </Link>
-        }
-      />
-      <h1 className="text-4xl text-center">
-        LinkFree connects audiences to all of your content with just one link
-      </h1>
-      <p className="text-2xl text-center">
-        It is an open-source alternative to Linktree implemented in JavaScript
-      </p>
-      <p className="text-1xl text-center">
-        See <Link to="/eddiejaoude">Eddie Jaoude&apos;s</Link> profile for an
-        example. Want to add your profile? Read the{' '}
-        <a href="https://github.com/EddieHubCommunity/LinkFree#-to-add-your-profile">
-          instructions
-        </a>
-        .
-      </p>
-      <p className="text-center">
-        <img
-          className="max-w-screen"
-          src="/mockup.png"
-          alt="An Example of the LinkFree app on Apple devices"
+    <>
+      <header>
+        <Navbar
+          start={
+            <Link to="/search" aria-label="Search">
+              <GetIcons iconName="search" size={20} />
+            </Link>
+          }
         />
-      </p>
-    </main>
+      </header>
+      <main>
+        <h1 className="text-4xl text-center">
+          LinkFree connects audiences to all of your content with just one link
+        </h1>
+        <p className="text-2xl text-center">
+          It is an open-source alternative to Linktree implemented in JavaScript
+        </p>
+        <p className="text-1xl text-center">
+          See <Link to="/eddiejaoude">Eddie Jaoude&apos;s</Link> profile for an
+          example. Want to add your profile? Read the{' '}
+          <a href="https://github.com/EddieHubCommunity/LinkFree#-to-add-your-profile">
+            instructions
+          </a>
+          .
+        </p>
+        <p className="text-center">
+          <img
+            className="max-w-screen"
+            src="/mockup.png"
+            alt="An Example of the LinkFree app on Apple devices"
+          />
+        </p>
+      </main>
+    </>
   )
 }
 

src/Components/Search/Search.js

@@ -1,10 +1,13 @@
 import './Search.css'
 
 import React, { useState, useEffect, useRef } from 'react'
+import { Link } from 'react-router-dom'
 import { Toast } from 'primereact/toast'
 
 import Placeholders from './Placeholders'
 import Users from './Users'
+import Navbar from '../Navbar'
+import GetIcons from '../Icons/GetIcons'
 
 function Search() {
   const [list, setList] = useState([])
@@ -37,10 +40,21 @@ function Search() {
   }, [])
 
   return (
-    <main>
-      <Toast ref={toast} />
-      {skeleton ? <Placeholders list={list} /> : <Users list={list} />}
-    </main>
+    <>
+      <header>
+        <Navbar
+          start={
+            <Link to="/" aria-label="Go back to Home">
+              <GetIcons iconName="arrowLeft" size={20} />
+            </Link>
+          }
+        />
+      </header>
+      <main>
+        <Toast ref={toast} />
+        {skeleton ? <Placeholders list={list} /> : <Users list={list} />}
+      </main>
+    </>
   )
 }
 

src/Components/Search/Users.js

@@ -4,10 +4,8 @@ import PropTypes from 'prop-types'
 import { Chip } from 'primereact/chip'
 import { Message } from 'primereact/message'
 
-import Navbar from '../Navbar'
 import Searchbar from './Searchbar'
 import ProfileTypeFilter from './filterProfileType'
-import GetIcons from '../Icons/GetIcons'
 
 function Users({ list }) {
   const [profileType, setProfileType] = useState('all')
@@ -57,13 +55,6 @@ function Users({ list }) {
 
   return (
     <>
-      <Navbar
-        start={
-          <Link to="/" aria-label="Go back to Home">
-            <GetIcons iconName="arrowLeft" size={20} />
-          </Link>
-        }
-      />
       <div className="mb-2 flex justify-content-center align-items-center">
         <Searchbar searchTerm={searchTerm} searchHandler={searchHandler} />
         <label className="p-2">Profile Type</label>

src/Components/UserProfile/User.js

@@ -30,13 +30,15 @@ function User({ singleUser }) {
   return (
     <>
       {!singleUser && (
-        <Navbar
-          start={
-            <Link to="/" aria-label="Go back to Home">
-              <GetIcons iconName="arrowLeft" size={20} />
-            </Link>
-          }
-        />
+        <header>
+          <Navbar
+            start={
+              <Link to="/" aria-label="Go back to Home">
+                <GetIcons iconName="arrowLeft" size={20} />
+              </Link>
+            }
+          />
+        </header>
       )}
       <main>
         {showProgress && <ProgressBar mode="indeterminate" />}