-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #49 from NjNerson/MenuMobileVersion
Menu mobile version
- Loading branch information
Showing
4 changed files
with
183 additions
and
95 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,13 @@ | ||
| function NavItem(props){ | ||
| return <a href='#' className='hidden font-DMMono text-white sm:block'>{props.children}</a> | ||
| function NavItem(props) { | ||
| // return ( | ||
| // <a href="#" className="hidden font-DMMono text-white sm:block"> | ||
| // {props.children} | ||
| // </a> | ||
| // ); | ||
| return ( | ||
| <a href="#" className="font-DMMono text-white"> | ||
| {props.children} | ||
| </a> | ||
| ); | ||
| } | ||
| export default NavItem | ||
| export default NavItem; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,54 +1,132 @@ | ||
|
|
||
| import React, { useEffect, useState } from "react"; | ||
| import Logo from '../ressources/logos_linux-tux.svg'; | ||
| import Drop from './Drop'; | ||
| import NavItem from './NavItem'; | ||
| import Logo from "../ressources/logos_linux-tux.svg"; | ||
| import Drop from "./Drop"; | ||
| import NavItem from "./NavItem"; | ||
| import React, { useState, useEffect } from "react"; | ||
|
|
||
| const Nav = () => { | ||
| const [navSize, setnavSize] = useState("10rem"); | ||
| const [navColor, setnavColor] = useState("transparent"); | ||
| const listenScrollEvent = () => { | ||
| window.scrollY > 10 ? setnavColor("#252734") : setnavColor("transparent"); | ||
| window.scrollY > 10 ? setnavSize("5rem") : setnavSize("10rem"); | ||
| const [navSize, setnavSize] = useState("10rem"); | ||
| const [navColor, setnavColor] = useState("transparent"); | ||
| const [borderWidth, setBorderWidth] = useState("0px"); | ||
|
|
||
| const [isBurgerOpen, setIsBurgerOpen] = useState(false); | ||
|
|
||
| const handleClosingBurger = () => { | ||
| if (window.innerWidth >= 1024) { | ||
| setIsBurgerOpen(false); | ||
| } | ||
| }; | ||
|
|
||
| const handleBurgerClick = () => { | ||
| if (isBurgerOpen) { | ||
| setIsBurgerOpen(false); | ||
| setnavSize("10rem"); | ||
| } else { | ||
| setIsBurgerOpen(true); | ||
| setnavSize("auto"); | ||
| } | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| window.addEventListener("resize", handleClosingBurger, false); | ||
| return () => { | ||
| window.removeEventListener("resize", handleClosingBurger); | ||
| }; | ||
| }, []); | ||
|
|
||
| const listenScrollEvent = () => { | ||
| window.scrollY > 10 | ||
| ? (setnavColor("#020F13"), setBorderWidth("1px")) | ||
| : (setnavColor("transparent"), setBorderWidth("0px")); | ||
| window.innerWidth >= 1024 | ||
| ? window.scrollY > 10 | ||
| ? setnavSize("5rem") | ||
| : setnavSize("10rem") | ||
| : window.scrollY > 10 | ||
| ? setnavSize("5rem") | ||
| : setnavSize("8rem"); | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| window.addEventListener("scroll", listenScrollEvent); | ||
| return () => { | ||
| window.removeEventListener("scroll", listenScrollEvent); | ||
| }; | ||
| useEffect(() => { | ||
| window.addEventListener("scroll", listenScrollEvent); | ||
| return () => { | ||
| window.removeEventListener("scroll", listenScrollEvent); | ||
| }; | ||
| }, []); | ||
| return <header className="flex fixed w-full top-0 left-0 z-50 px-5 items-center justify-between py-5" style={{ | ||
| }, []); | ||
|
|
||
| return ( | ||
| <header | ||
| className={`flex fixed w-full top-0 left-0 z-50 lg:px-5 px-4 py-5 border-raven transition-[height_1s_linear] duration-1000 | ||
| ${ | ||
| isBurgerOpen | ||
| ? "flex-col top-section" | ||
| : "flex-row items-center justify-between" | ||
| }`} | ||
| style={{ | ||
| backgroundColor: navColor, | ||
| height: navSize, | ||
| transition: "all 1s" | ||
| }}> | ||
| <div> | ||
| <div className="flex items-center justify-between"> | ||
| <div className="mr-3"> | ||
| <img src={Logo} /> | ||
|
|
||
| </div> | ||
| <div className="hidden h-6 text-3xl text-white text-center Kontes-Compressed sm:block">Why not <span className='color-yellow-sea'>Linux</span></div> | ||
| </div> | ||
| borderBottomWidth: borderWidth, | ||
| transition: "all 0.7s ease-in-out", | ||
| }} | ||
| > | ||
| {/* LOGO */} | ||
| <div className="flex lg:w-auto w-full lg:block justify-between items-center"> | ||
| <div className="flex items-center justify-between "> | ||
| <div className="mr-3"> | ||
| <img src={Logo} className=" w-12 lg:w-16 h-auto" /> | ||
| </div> | ||
| <div className=" h-6 text-2xl lg:text-3xl text-white text-center Kontes-Compressed sm:block"> | ||
| Why not <span className="color-yellow-sea">Linux</span> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className='flex items-center space-x-6 leading-5 sm:space-x-10'> | ||
| <NavItem>À propos</NavItem> | ||
| <Drop /> | ||
| <NavItem>Archive</NavItem> | ||
| <NavItem>FaQ</NavItem> | ||
| <button className="lg:hidden flex flex-col ml-4"> | ||
| <span className="w-6 h-1 bg-white mb-1"> | ||
| </span> | ||
| <span className="w-6 h-1 bg-white mb-1"> | ||
| </span> | ||
| <span className="w-6 h-1 bg-white mb-1"> | ||
| </span> | ||
| </button> | ||
| <button type="button" className="text-white bg-[#050708] hover:bg-[#050708]/90 focus:ring-4 focus:outline-none focus:ring-[#050708]/50 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-[#050708]/50 dark:hover:bg-[#050708]/30 me-2 mb-2">Inscription</button> | ||
| </div> | ||
| {/* BURGER BUTTON FOR SMALL SCREEN */} | ||
| <button | ||
| className="lg:hidden flex flex-col relative" | ||
| onClick={() => handleBurgerClick()} | ||
| > | ||
| <span | ||
| className={`w-6 h-1 bg-white mb-1 transition-[transform_0.5s] duration-500 ${ | ||
| isBurgerOpen | ||
| ? " -translate-x-1/2 rotate-45 absolute -translate-y-1/2 top-1/2 left-1/2" | ||
| : "" | ||
| }`} | ||
| ></span> | ||
| <span | ||
| className={`w-6 h-1 bg-white mb-1 transition-opacity ${ | ||
| isBurgerOpen ? "opacity-0" : " delay-100" | ||
| }`} | ||
| ></span> | ||
| <span | ||
| className={`w-6 h-1 bg-white mb-1 transition-[tranform_0.7s] duration-700 ${ | ||
| isBurgerOpen | ||
| ? " -translate-x-1/2 -rotate-45 bg-red-300 absolute -translate-y-1/2 top-1/2 left-1/2 " | ||
| : "" | ||
| }`} | ||
| ></span> | ||
| </button> | ||
| </div> | ||
|
|
||
| </header> | ||
| {/* MENU FOR LARGE SCREEN AND WHEN BURGER IS OPEN FOR SMALL SCREEN */} | ||
| <div | ||
| className={`lg:flex items-center leading-5 gap-10 ${ | ||
| isBurgerOpen | ||
| ? "flex flex-col justify-start space-y-5 h-full py-10 top-11 " | ||
| : "hidden -top-10" | ||
| }`} | ||
| > | ||
| <NavItem>À propos</NavItem> | ||
| <Drop /> | ||
| <NavItem>Archive</NavItem> | ||
| <NavItem>FaQ</NavItem> | ||
|
|
||
| } | ||
| export default Nav | ||
| <button | ||
| type="button" | ||
| className="text-white bg-[#050708] hover:bg-[#050708]/90 focus:ring-4 focus:outline-none focus:ring-[#050708]/50 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-[#050708]/50 dark:hover:bg-[#050708]/30 me-2 mb-2" | ||
| > | ||
| inscription | ||
| </button> | ||
| </div> | ||
| </header> | ||
| ); | ||
| }; | ||
| export default Nav; |