-
Notifications
You must be signed in to change notification settings - Fork 50
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added Hamburger menu for smaller devices
- Loading branch information
1 parent
ceb0fad
commit 4f2c98a
Showing
2 changed files
with
77 additions
and
56 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,82 +1,104 @@ | ||
import { MdPeople, MdInsertDriveFile } from "react-icons/md"; | ||
import { | ||
MdPeople, | ||
MdInsertDriveFile, | ||
MdClose, | ||
MdMenu, | ||
MdHome, | ||
} from "react-icons/md"; | ||
import { AiFillGithub } from "react-icons/ai"; | ||
import { Link } from "react-router-dom"; | ||
|
||
import { HiMoon, HiSun } from "react-icons/hi"; | ||
import { ThemeContext } from '../../context/ThemeContext' | ||
import { useContext } from "react"; | ||
import { ThemeContext } from "../../context/ThemeContext"; | ||
import { useContext, useState } from "react"; | ||
|
||
function Header({ notice }) { | ||
const { toggleTheme } = useContext(ThemeContext); | ||
|
||
const { theme, toggleTheme } = useContext(ThemeContext); | ||
const [open, setOpen] = useState(false); | ||
|
||
const navLink = [ | ||
{ | ||
name: 'Home', | ||
link: '/', | ||
icon: '' | ||
name: "Home", | ||
link: "/", | ||
icon: <MdHome size="1.2rem" />, | ||
}, | ||
{ | ||
name: 'Doc', | ||
link: '/doc', | ||
icon: <MdInsertDriveFile size='1rem' /> | ||
name: "Doc", | ||
link: "/doc", | ||
icon: <MdInsertDriveFile size="1.2rem" />, | ||
}, | ||
{ | ||
name: 'Contributors', | ||
link: '/Contributors', | ||
icon: <MdPeople size='1.25rem' /> | ||
name: "Contributors", | ||
link: "/Contributors", | ||
icon: <MdPeople size="1.2rem" />, | ||
}, | ||
{ | ||
name: '', | ||
link: 'https://github.com/devvsakib/github-error-solve', | ||
icon: <AiFillGithub size='1.45rem' /> | ||
} | ||
] | ||
name: "Github", | ||
link: "https://github.com/devvsakib/github-error-solve", | ||
icon: <AiFillGithub size="1.2rem" />, | ||
isExternalURL: true, | ||
}, | ||
]; | ||
|
||
return ( | ||
<header className="p-4 shadow-lg backdrop-blur-sm sticky top-0 z-50"> | ||
<div className="w-full md:w-5/6 mx-auto flex flex-col md:flex-row justify-between items-center"> | ||
{/* <h1 className="text-xl font-bold"> | ||
GITHUB <span className="text-primary line-through">ERROR</span> SOLVE | ||
</h1> */} | ||
<Link to={'/'}> | ||
<img src="/assets/logo.png" className="w-36 bg-transparent invert dark:invert-0" alt="GES" /> | ||
<div className="w-full md:w-5/6 mx-auto flex flex-row md:flex-row justify-between items-center"> | ||
{/* Logo */} | ||
<Link to={"/"}> | ||
<img | ||
src="/assets/logo.png" | ||
className="w-36 bg-transparent invert dark:invert-0" | ||
alt="GES" | ||
/> | ||
</Link> | ||
<div className="flex mt-2 md:mt-0 items-center gap-7 text-sm"> | ||
|
||
{ | ||
navLink.map((link, index) => { | ||
return ( | ||
link.name == "" ? (<a target='_blank' href={link.link} className="githubbtn">{link.icon}</a> | ||
) : link.name == "Doc" ? (<Link className="flex items-center gap-1" to={link.link}>{link.icon}{link.name}</Link> | ||
) : link.name == "Contributors" ? (<Link className="flex items-center gap-1" to={link.link}>{link.icon}{link.name}</Link> | ||
) : link.name == "Home" ? (<Link className="flex items-center gap-1" to={link.link}>{link.icon}{link.name}</Link> | ||
) : null | ||
) | ||
}) | ||
} | ||
{/* Menu icon */} | ||
<div | ||
onClick={() => setOpen((val) => !val)} | ||
className="cursor-pointer md:hidden" | ||
> | ||
{open ? <MdClose size="1.2rem" /> : <MdMenu size="1.2rem" />} | ||
</div> | ||
|
||
<p className="text-lg cursor-pointer" onClick={toggleTheme}> | ||
{/* Nav link items */} | ||
<div | ||
className={` | ||
md:flex md:items-center | ||
md:pb-0 md:gap-6 | ||
md:static md:z-auto | ||
md:w-auto md:pl-0 | ||
md:bg-transparent | ||
grid gap-2 absolute | ||
z-[-1] left-0 w-full py-2 pl-8 | ||
transition-all duration-500 ease-in | ||
${open ? (theme === "dark" ? "bg-dark/90" : "bg-white/90") : ""} | ||
${open ? "top-14" : "top-[-490px]"}`} | ||
> | ||
{navLink.map((link, index) => { | ||
return ( | ||
<div key={`${link.name}-${index}`}> | ||
{link?.isExternalURL ? ( | ||
<a target="_blank" href={link.link} className="githubBtn"> | ||
{link.icon} | ||
</a> | ||
) : ( | ||
<Link className="flex items-center gap-1" to={link.link}> | ||
{link.icon} | ||
{link.name} | ||
</Link> | ||
)} | ||
</div> | ||
); | ||
})} | ||
|
||
<div className="text-lg cursor-pointer" onClick={toggleTheme}> | ||
<HiMoon className="dark:hidden" /> | ||
<HiSun className="hidden dark:inline" /> | ||
</p> | ||
|
||
|
||
|
||
{/* <MdConstruction className="text-lg" /> | ||
<h6>Under Construction</h6> | ||
<Link to={'/doc'}>Doc</Link> | ||
<Link to={'/Contributors'}>Contributors</Link> | ||
<a target='_blank' href="https://github.com/devvsakib/github-error-solve"><AiFillGithub size='1.25rem'/></a> */} | ||
|
||
|
||
</div> | ||
</div> | ||
</div> | ||
</header> | ||
); | ||
} | ||
|
||
export default Header; | ||
export default Header; |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.