Skip to content

Danny #110

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Drastick17 wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Danny #110

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2bee859
Merge branch 'main' of https://github.com/Python-en-equipo/MarketPlac…
Drastick17 Aug 6, 2022
d2f68cc
Arreglando-mejorando responsive de header y dropdown menu
Drastick17 Aug 6, 2022
429dfd6
Merge branch 'main' into danny
Drastick17 Sep 21, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions frontend/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.2.0",
"@testing-library/user-event": "^13.5.0",
"clsx": "^1.2.1",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-hook-form": "^7.33.1",
Expand Down
1 change: 1 addition & 0 deletions frontend/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
Expand Down
78 changes: 52 additions & 26 deletions frontend/src/components/Header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,67 @@
import clsx from 'clsx'
import {useState} from 'react'
import {useSelector} from 'react-redux'
import Logo from '../assets/img/media/logo.png'

const Header = () => {
const { user } = useSelector(state => state.userReducer)
const [open, setOpen] = useState(false)
const [showmenu, setShowMenu] = useState(false)
const [showHeader, setShowHeader] = useState(false)
const [y, setY] = useState(0)
//console.log(y)

window.onscroll = function() {
let scroll = window.scrollY;
setY(scroll)
if(y > Number(window.innerHeight)-200){
setOpen(true)
}
if(y <= 300) {
setOpen(false)
}
if(open === false) {
setShowMenu(false)
}
const fixedPoint = Number(window.innerHeight) - 144
y >= fixedPoint
? setShowHeader(false)
: setShowHeader(true)
}
return (
<>
<header className={`w-screen h-auto px-[50px] top-0 left-0 z-10 bg-white ${open?'-translate-y-[400px]':'translate-y-0'} fixed duration-300 overflow-x-hidden`}>
<header className={clsx('fixed top-0 left-0 w-screen translate-y-0 z-10 bg-white transition-all duration-500',{["-top-full"]: !showHeader})}>
<div className='flex flex-row flex-shrink-0 py-2 px-5 align-middle justify-between lg:justify-center items-center'>
<label className='hidden lg:block lg:basis-1/3 outline-none group'>
<span className='border-black group-focus:border-b'>
<i className='fa-solid fa-search'></i> <input className='outline-none' type="text" placeholder="Search something"></input>
</span>
</label>
<p className='basis-1/3 text-5xl text-red-500 hover:text-red-700 flex items-center md:items-end justify-between md:justify-center p-1 text-center font-thin' style={{fontFamily:'didot-w02-italic,serif', fontStyle:'oblique'}}>
<a href=''>Adalane.</a>
</p>
<label className='basis-1/3 text-right hidden lg:inline-block'>
<button className='border border-transparent hover:border-black p-2'><i className="fa-solid fa-user mr-1.5"></i> Login</button>
</label>
<div onClick={() => setOpen(!open)} className='w-16 h-16 flex lg:hidden flex-col gap-3 justify-center items-center p-2 cursor-pointer'>
<i className={clsx('relative w-full h-1 bg-black rounded-lg transition-all opacity-90 hover:opcacity-100',{["rotate-45 translate-y-2"]: open})}></i>
<i className={clsx('relative w-full h-1 bg-black rounded-lg transition-all opacity-90 hover:opcacity-100',{["hidden"]: open })}></i>
<i className={clsx('relative w-full h-1 bg-black rounded-lg transition-all opacity-90 hover:opcacity-100',{["-rotate-45 -translate-y-2"]: open})}></i>
</div>
</div>
<div className={clsx('w-full bg-white py-6 transition-all lg:hidden',{['h-0 hidden']: !open })}>
<nav className='mx-auto w-full max-w-lg'>
<ul className='flex flex-col gap-6 justify-center items-center'>
<li className='cursor-pointer capitalize'>item 01</li>
<li className='cursor-pointer capitalize'>item 02</li>
<li className='cursor-pointer capitalize'>item 03</li>
<li className='cursor-pointer capitalize'>item 04</li>
<li className='cursor-pointer capitalize'>item 05</li>
</ul>
</nav>
</div>
<div className='w-full bg-white py-6 transition-all hidden lg:block'>
<nav className='mx-auto w-full max-w-lg'>
<ul className='flex flex-row gap-12 justify-center items-center'>
<li className='cursor-pointer capitalize'>item 01</li>
<li className='cursor-pointer capitalize'>item 02</li>
<li className='cursor-pointer capitalize'>item 03</li>
<li className='cursor-pointer capitalize'>item 04</li>
<li className='cursor-pointer capitalize'>item 05</li>
</ul>
</nav>
</div>
</header>
{/* <header className={`w-screen h-auto px-[50px] top-0 left-0 z-10 bg-white ${open?'-translate-y-[400px]':'translate-y-0'} fixed duration-300 overflow-x-hidden`}>
<div className='w-full h-[5.5rem] flex flex-col md:flex-row justify-between items-center align-middle'>
<div className='hidden md:block'>
<label
Expand All @@ -35,27 +73,15 @@ const Header = () => {
</div>
<div className='w-full h-full text-5xl text-red-500 hover:text-red-700 flex items-center md:items-end justify-between md:justify-center p-1 text-center font-thin' style={{fontFamily:'didot-w02-italic,serif', fontStyle:'oblique'}}>
<a href=''>Adalane.</a>
<div onClick={() => setShowMenu(!showmenu)} className='relative w-16 h-16 flex md:hidden flex-col gap-3 py-3 px-1 items-center justify-center rounded-xl group'>
<div className={`relative w-full h-1 bg-red-500 rounded-full group-hover:cursor-pointer ${showmenu?'rotate-45 translate-y-2':'rotate-0'} transition-all duration-300`}></div>
<div className={`relative w-full h-1 bg-red-500 rounded-full group-hover:cursor-pointer ${showmenu?'hidden':'block'} transition-all duration-300`}></div>
<div className={`relative w-full h-1 bg-red-500 rounded-full group-hover:cursor-pointer ${showmenu?'-rotate-45 -translate-y-2':'rotate-0'} transition-all duration-300`}></div>
</div>
</div>
<div className='hidden md:flex flex-shrink-0 flex-row gap-8 text-gray-400 justify-end items-center'>
<a href=''><i className="fa-solid fa-bag-shopping"></i></a>
{user ?<a href='/'>Login</a>:<a>{user.name}</a>}
<i className='fas fa-bars block text-xl'></i>
</div>
</div>
<div className={`w-screen absolute top-[5.5rem] left-0 bg-white ${showmenu?'hidden -z-10':'block z-30' }`}>
<nav className='flex flex-col lg:flex-row justify-center items-center gap-10 lg:gap-20 text-gray-400'>
<a className='hover:text-gray-500' href=''>Home</a>
<a className='hover:text-gray-500' href='/products'>Shop All</a>
<a className='hover:text-gray-500' href=''>Our Story</a>
<a className='hover:text-gray-500' href=''>Contact</a>
</nav>
</div>
</header>

</header> */}
</>)
}

Expand Down