Merge pull request #228 from markalbrand56/front_searchbar

header home implementation

uniEmpleos/src/App.css

@@ -4,37 +4,6 @@
   text-align: center;
 }
 
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-.svg.css-tj5bde-Svg {
-  display: none;
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
 
 .card {
   padding: 2em;
@@ -48,5 +17,5 @@
   height: 100vh;
   width: 100vw;
   overflow-x: hidden;
-  background-color: #f1f1f1;
+  background-color: #fff;
 }

uniEmpleos/src/components/HeaderHome/HeaderHome.jsx

@@ -0,0 +1,54 @@
+import React, { useState } from "react"
+import { FaBars, FaTimes } from "react-icons/fa"
+import { LuLogOut } from "react-icons/lu"
+import styles from "./HeaderHome.module.css"
+import { navigate } from "../../store"
+
+const HeaderHome = () => {
+  const [showNavbar, setShowNavbar] = useState(false)
+
+  const handleShowNavbar = () => {
+    setShowNavbar(!showNavbar)
+  }
+
+  const renderActions = () => {
+    return (
+      <div className="actions">
+        <div className={styles.actionlinks}>
+          <a href="/login" className={styles.buttonlogin}>
+            Iniciar Sesión
+          </a>
+          <a href="/signup">Registrarse</a>
+        </div>
+      </div>
+    )
+  }
+
+  const handleHome = () => {
+    navigate("/")
+  }
+
+  return (
+    <nav className={styles.navbar}>
+      <div className={styles.container}>
+        <div className={styles.logoheader}>
+          <button className="buttonlogo" onClick={handleHome} type="button">
+            <img src="/images/Ue_2.svg" alt="Logo" />
+          </button>
+        </div>
+        <div className={styles.menuicon} onClick={handleShowNavbar}>
+          {showNavbar ? (
+            <FaTimes size={30} style={{ color: "#000" }} />
+          ) : (
+            <FaBars size={30} style={{ color: "#000" }} />
+          )}
+        </div>
+        <div className={styles.navelements + " " + (showNavbar && styles.active)}>
+          {renderActions()}
+        </div>
+      </div>
+    </nav>
+  )
+}
+
+export default HeaderHome

uniEmpleos/src/components/HeaderHome/HeaderHome.module.css

@@ -0,0 +1,118 @@
+.container{
+    display: flex;
+    align-items: center;
+    width: 100%;
+}
+
+.navbar {
+    width: 100%;
+    height: 100px;
+    background-color: #ffffff;
+    position: relative;
+}
+
+.buttonlogin {
+    color: #a08ae5;
+    border: 2px solid #a08ae5;
+    padding: 10px 20px;
+    border-radius: 10px;
+}
+
+a.buttonlogin {
+    color: #a08ae5 !important;
+}
+
+.navelements{
+    margin-left: auto;
+    margin-right: 20px;
+}
+
+.menuicon {
+    display: none;
+  }
+
+.actionlinks {
+    display: flex;
+    gap: 40px;
+    align-items: center;
+}
+
+
+@media (max-width: 600px){
+
+.actionlinks {
+    flex-direction: column;
+    position: static;
+    gap: 40px;
+    margin-top: 40px;
+}
+
+.menuicon {
+    display: block;
+    cursor: pointer;
+    margin-left: auto;
+    margin-right: 10px;
+}
+
+.navelements {
+    position: absolute;
+    right: 0;
+    top: 90px;
+    background-color: #ffffff;
+    width: 0px;
+    height: calc(100vh - 60px);
+    transition: all 0.3s ease-in;
+    overflow: hidden;
+    margin: 0;
+}
+
+.navelements ul {
+    display: flex;
+    justify-content: space-between;
+    list-style-type: none;
+  }
+
+  .navelements ul li:not(:last-child) {
+    margin-right: 60px;
+  }
+
+  .navelements ul a {
+    font-size: 16px;
+    font-weight: 400;
+    color: #2f234f;
+    text-decoration: none;
+  }
+
+  .navelements ul a.active {
+    color: #574c4c;
+    font-weight: 500;
+    position: relative;
+  }
+
+  .navelements ul a.active::after {
+    content: '';
+    position: absolute;
+    bottom: -4px;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background-color: #574c4c;
+  }
+
+  .navelements.active {
+    width: 100%;
+    overflow-y: hidden;
+    height: calc(100vh - 100px);
+  }
+
+  .navelements ul {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .navelements ul li {
+    margin-right: unset;
+    margin-top: 22px;
+  }
+
+}

uniEmpleos/src/pages/Home/Home.jsx

@@ -3,6 +3,7 @@ import styles from "./Home.module.css"
 import Infocontainer from "../../components/Infocontainer/Infocontainer"
 import Button from "../../components/Button/Button"
 import { navigate } from "../../store"
+import HeaderHome from "../../components/HeaderHome/HeaderHome"
 
 const Home = () => {
   const handleNav = (path) => {
@@ -13,30 +14,7 @@ const Home = () => {
     <div className={styles.homeContainer}>
       <div className={styles.homeContent}>
         <div className={styles.topcontent}>
-          <img src="/images/Ue_2.svg" alt="Logo" />
-          <div className={styles.button}>
-            <Button
-              primary
-              label="Iniciar Sesión"
-              backgroundColor="transparent"
-              size="large"
-              onClick={(event) => {
-                event.preventDefault()
-                handleNav("/login")
-              }}
-            />
-            <Button
-              primary
-              label="Registrarse"
-              backgroundColor="#A08AE5"
-              size="large"
-              noborder
-              onClick={(event) => {
-                event.preventDefault()
-                handleNav("/signup")
-              }}
-            />
-          </div>
+          <HeaderHome />
         </div>
         <div className={styles.image}>
           <img src="/images/Uniempleos.png" alt="Uniempleos" />

uniEmpleos/src/pages/Home/Home.module.css

@@ -2,6 +2,7 @@
     display: flex;
     flex-direction: column;
     width: 100%;
+    height: 100vh;
     background-color: #f5f5f5;
 }
 
@@ -10,7 +11,6 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    height: 100%;
     width: 100%;
     background-color: transparent;
 }
@@ -95,7 +95,7 @@ span.text{
         display: flex;
         flex-direction: column;
         width: 100%;
-        background-color: #f5f5f5;
+        background-color: #fff;
     }
 
     .button{
@@ -109,18 +109,14 @@ span.text{
 
     .info{
         flex-direction: column; 
+        gap:40px;
     }
 
-    .wave, .waveup{
-        height: 150px; 
-
     .infobutton{
         width: 100%; 
     }
 
     .button{
-        flex-direction: column; 
         align-items: center; 
     }
 }
-}