Skip to content

Commit

Permalink
menu de navegacao (web)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Rubinaldod
Rubinaldod committed Sep 11, 2023
1 parent addd42e commit 4db6b4a
Show file tree
Hide file tree
Showing 3 changed files with 127 additions and 255 deletions.
253 changes: 93 additions & 160 deletions components/header/page.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,165 +1,98 @@
'use client'
import React, {useContext} from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faMoon,
faHome,
faBook,
faMusic,
faHistory,
faCode,
faUser,
faBrain,
faInfo,
faWindowClose,
faBars
"use client";
import React, { useContext } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faMoon,
faHome,
faBook,
faMusic,
faHistory,
faCode,
faUser,
faBrain,
faInfo,
faWindowClose,
faBars,
} from "@fortawesome/free-solid-svg-icons";
import { useEffect, useState } from 'react';
import Banner from '../banner/page';
import { useEffect, useState } from "react";
import Banner from "../banner/page";

export function Header (){
const pathname = usePathname();
const [toggleMenu, setToggleMenu] = useState(false);
import "./styles.css";

const onSugerir = (e) =>{
const value = e.target.value
if (value !== ''){
const pyShell = new PythonShell('suggestion.py')
pyShell.send(value)
pyShell.end((err, code, signal) => {
//
err? console.log('Some error ocurred!') : 'Good!!'
})
}
}
export function Header() {
const pathname = usePathname();
const [toggleMenu, setToggleMenu] = useState(false);

const toggleMenuHandler = ()=>{
setToggleMenu(!toggleMenu)
}
const NavItems = () => {
return (
<nav className={`${toggleMenu ?'hidden':'flex'} w-full mt-[-530px] border-t flex flex-col gap-4 border-t-[#232e36] md:border-0 md:mt-0 `}>
<div className='self-end mt-2 flex md:hidden bg-black'>

</div>
<ul className={`flex flex-col h-full md:p-0 md:bg-[transparent] md:flex-row md:justify-center gap-[1rem] w-full`}>
<li className="text-md header-li">
<Link href='/' passHref>
<span className='header-li-span'>
<span><FontAwesomeIcon size='lg' icon={faHome}></FontAwesomeIcon></span>
<span>Home</span>
</span>
</Link>
</li>
<li className="header-li">
<Link href='/grammar' passHref>
<span className='header-li-span'>
<span><FontAwesomeIcon size='lg' icon={faBook}></FontAwesomeIcon></span>
<span>Gramática</span>
</span>
</Link>
</li>
<li className="header-li">
<Link href='/music' passHref>
<span className='header-li-span'>
<span><FontAwesomeIcon size='lg' icon={faMusic}></FontAwesomeIcon></span>
<span>Música</span>
</span>
</Link>
</li>
<li className="header-li">
<Link href='/history' >
<span className='header-li-span'>
<span><FontAwesomeIcon size='lg' icon={faHistory}></FontAwesomeIcon></span>
<span>Histórias</span>
</span>
</Link>
</li>
<li className="header-li">
<Link href='/courses' passHref>
<span className='header-li-span'>
<span><FontAwesomeIcon size='lg' icon={faBrain}></FontAwesomeIcon></span>
<span>Cursos</span>
</span>
</Link>
</li>
<li className="header-li">
<Link href='/about' passHref>
<span className='header-li-span'>
<span><FontAwesomeIcon size='lg' icon={faInfo}></FontAwesomeIcon></span>
<span>Sobre</span>
</span>
</Link>
</li>
<li className="header-li">
<Link href='/team' passHref>
<span className='header-li-span'>
<span><FontAwesomeIcon size='lg' icon={faCode}></FontAwesomeIcon></span>
<span>Criadores</span>
</span>
</Link>
</li>
<li className="header-li">
<Link href='#' passHref>
<span className='header-li-span'>
<span><FontAwesomeIcon size='lg' icon={faUser}></FontAwesomeIcon></span>
<span>Perfil</span>
</span>
</Link>
</li>
</ul>
</nav>
);
}
const toggleMenuHandler = () => {
setToggleMenu(!toggleMenu);
};
const NavItems = () => {
return (
<nav>
<div></div>
<ul className="menuLink">
<li className="link">
<Link className="active" href="/" passHref>
Inicio
</Link>
</li>

return(
<>
<header className={`sticky top-0 z-40 bg-slate-100 px-2 flex flex-col justify-between items-center w-full ${toggleMenu ? 'h-fit' : 'h-[100vh]'} md:h-[90px] shadow-lg font-mulish`}>
<div className='flex h-fit flex-row justify-between w-full flex-wrap relative'>
<div>
<h2 className="font-bold text-xl md:absolute md:top-6 ml-[1.5rem] md:text-2xl text-slate-800">
<Link href='/'>Zwelar</Link>
</h2>
</div>
<div className='flex flex-row-reverse justify-between gap-4 items-center md:flex-row'>
<div className='w-[16px] h-[16px] mb-2 md:hidden'>
{!toggleMenu ?
<span
onClick={toggleMenuHandler}>
<FontAwesomeIcon
className='text-red-600 header-li mt-2 flex cursor-pointer'
size='lg'
icon={faWindowClose}>
</FontAwesomeIcon>
</span> :
<span
onClick={toggleMenuHandler} className='header-li mt-2 flex'>
<FontAwesomeIcon
className='cursor-pointer'
icon={faBars}>
</FontAwesomeIcon>
</span>
}
</div>
<aside>
<span className='header-li mt-2 '>
<FontAwesomeIcon icon={faMoon}></FontAwesomeIcon>
</span>
<button className='w-[fit-content] hover:text-[blue] mt-3 font-bold p-1 rounded-[5px] text-black bg-green-400 text-[11px]'
onClick={onSugerir}>Sugerir Palavras
</button>
</aside>
</div>
</div>
<div className='flex w-full flex-row py-2 gap-4'>
<NavItems />
</div>
</header>
{ pathname === '/' ?
<Banner />
: ''
}
</>
)
}
<li className="link">
<Link className="" href="/grammar" passHref>
<span className="">
<span>Gramática</span>
</span>
</Link>
</li>
<li className="link">
<Link href="/music" passHref>
<span className="">
<span>Música</span>
</span>
</Link>
</li>
<li className="link">
<Link href="/history" passHref>
<span className="">
<span>Histórias</span>
</span>
</Link>
</li>
<li className="link">
<Link href="/courses" passHref>
<span className="">
<span>Cursos</span>
</span>
</Link>
</li>
<li className="link">
<Link href="/about" passHref>
<span className="">
<span>Sobre</span>
</span>
</Link>
</li>
</ul>
</nav>
);
};

return (
<>
<header className="menuContainer">
<h2 className="Logo">
<Link href="/">Zwelar</Link>
</h2>

<NavItems />

<div className="lgBtnCOntainer">
<button className="btn">Criar conta / entrar</button>
</div>
</header>
{/* {pathname === "/" ? <Banner /> : ""} */}
</>
);
}
123 changes: 31 additions & 92 deletions components/header/styles.css
View file
Original file line number Diff line number Diff line change
@@ -1,99 +1,38 @@


/* .header{
top:0px;
position:fixed;
display:flex;
width:100%;
height:64px;
background-color:#ffffff;
justify-content:space-between;
z-index: 10000;
}
.header h2{
color:#1dd1a1;
font-size:20px;
font-weight:bold;
margin-left:18px;
text-transform: uppercase;
}
.header h2:hover{
color:#1dd1a1;
}
.header ul{
color:rgb(49, 49, 49);
display:flex;
align-items:center;
justify-content:center;
.menuContainer{
display: flex;
flex-direction: row;
width: 100%;
height: 4rem;
justify-content: space-between;
padding-left: 6rem;
padding-right: 6rem;
align-items: center;
}
.header ul li {
padding:10px;
list-style:none;
margin-left:14px;
font-size:14px;
}
.header ul li span{
margin-left:12px;

.Logo{
font-size:25px ;
font-weight: 600;
}
.header ul li:hover{
color:#1dd1a1;
text-transform: uppercase;
transition:0.1s ease-in-out;
font-size:12pt;
.menuLink{
display: flex;
flex-direction: row;

}
.searchSection{
display:flex;
align-items:center;
justify-content:center;
margin-right:20px;
.link{
margin-right: 1rem;
}
.searchSection input{
background-color:#222f3e;
border:1px solid #c8d6e5;
border-radius:2px;
height:30px;
width:250px;
color:white;

.active{
color: #e7b102;
}
.searchSection button{
background-color:#10ac84;
color:white;
margin-left:8px;
border-radius:4px;
height:30px;
border:none;
.btn{
background-color: #e7b102;
width: 14rem;
height: 2.5rem;
color: #ffff;
border-radius: 6px;

}
.footer{
position:fixed;
font-size:12px;
background-color:#222f3e;
bottom:0px;
color:rgb(241, 241, 241);
width:100%;
height:30px;
display:flex;
align-items:center;
justify-content:center;
}
@media screen and (max-width:800px){
.searchSection{
display:none;
}
.btn:hover{
cursor:pointer;
}
@media screen and (max-width:600px){
.header{
padding:12px;
top:0px;
position:fixed;
height: 80px;
flex-direction:column;
align-items:center;
justify-content:center;
}
.header h2{
margin-top:30px;
}
.header ul {
margin-top:-14px;
}
} */
Loading

0 comments on commit 4db6b4a

Please sign in to comment.