Skip to content
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

Jump to bottom

Bugfix navbar Responsiveness #20

Merged
merged 3 commits into from
Jun 29, 2022
Merged

Bugfix navbar Responsiveness #20

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
8735f13
Fixed Navbar Responsiveness
marthamwangi Jun 27, 2022
af74f7e
format active links on route change
marthamwangi Jun 27, 2022
1b3269a
Add pages
marthamwangi Jun 27, 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
63 changes: 63 additions & 0 deletions components/ActiveLink.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import { useRouter } from 'next/router'
import Link, { LinkProps } from 'next/link'
import React, { useState, useEffect, ReactElement, Children } from 'react'

type ActiveLinkProps = LinkProps & {
children: ReactElement
activeClassName: string
}

const ActiveLink = ({
children,
activeClassName,
...props
}: ActiveLinkProps) => {
const { asPath, isReady } = useRouter()

const child = Children.only(children)
const childClassName = child.props.className || ''
const [className, setClassName] = useState(childClassName)

useEffect(() => {
// Check if the router fields are updated client-side
if (isReady) {
// Dynamic route will be matched via props.as
// Static route will be matched via props.href
const linkPathname = new URL(
(props.as || props.href) as string,
location.href
).pathname

// Using URL().pathname to get rid of query and hash
const activePathname = new URL(asPath, location.href).pathname

const newClassName =
linkPathname === activePathname
? `${childClassName} ${activeClassName}`.trim()
: childClassName

if (newClassName !== className) {
setClassName(newClassName)
}
}
}, [
asPath,
isReady,
props.as,
props.href,
childClassName,
activeClassName,
setClassName,
className,
])

return (
<Link {...props}>
{React.cloneElement(child, {
className: className || null,
})}
</Link>
)
}

export default ActiveLink
113 changes: 113 additions & 0 deletions components/Nav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
import { Disclosure } from "@headlessui/react";
import Image from "next/image";
import ActiveLink from "./ActiveLink";
/**
* Install Headless UI
* Nav Disclosure
* Showing/hiding the Nav
* Style Active Link
* Add Transitions
*/
export default function Nav() {
const navigation = [
{ name: "Home", href: "/" },
{ name: "Events", href: "/events" },
{ name: "Blog", href: "/blog" },
{ name: "Team", href: "/team" },
{ name: "Be a partner", href: "/be-a-partner" },
{ name: "Be a member", href: "/be-a-member" },
];
function classNames(...classes: any[]) {
return classes.filter(Boolean).join(" ");
}

return (
<Disclosure as="nav">
{({ open }) => (
<>
<style jsx>{`
.active {
text-decoration: underline;
color: #b70569;
}
`}</style>
<div className="relative z-50 w-full flex-none text-sm font-semibold leading-6 text-slate-900">
<div className="mx-auto max-w-container px-4 sm:px-6 lg:px-8s">
<div className="absolute insent-y-0 right-0 sm:hidden">
{/* Mobile menu button*/}
<Disclosure.Button className="inline-flex p-3 my-1">
<span className="sr-only">menu</span>
{/* Mobile menu button*/}
<Image
src={open ? "/images/close.svg" : "/images/menu.svg"}
width={32.5}
height={19.5}
/>
</Disclosure.Button>
</div>
<div className="flex items-center justify-between py-[2.125rem]">
<div className="flex-shrink-0 flex items-center">
<a className="mr-auto flex-none text-slate-900" href="/">
<span className="sr-only">She code Nairobi</span>
<img
className="block lg:hidden h-10 w-auto -my-5"
src="/images/logo.svg"
alt="she-code-nairobi"
/>
<img
className="hidden lg:block h-21 w-auto"
src="/images/logo.svg"
alt="she-code-nairobi"
/>
</a>
</div>
<div className="hidden sm:flex sm:items-center">
<div className="">
{navigation.slice(0, 4).map((link) => (
<ActiveLink activeClassName="active" href={link.href}>
<a
key={link.name}
className="px-3 text-sm font-normal text-base"
>
{link.name}
</a>
</ActiveLink>
))}
</div>
</div>
<div className="hidden sm:flex sm:items-center">
<ActiveLink activeClassName="" href="/be-a-partner">
<a className="inline-flex justify-center font-normal rounded-full py-3 px-3 bg-primary text-white my-2.5 w-52 h-13">
<span>Be a partner</span>
</a>
</ActiveLink>
</div>
</div>
</div>
</div>

<Disclosure.Panel className="sm:hidden h-screen">
<div className="flex flex-col items-center px-2 pt-2 pb-3">
{navigation.map((link) => (
<Disclosure.Button
key={link.name}
as="a"
href={link.href}
className={classNames(
link.name === "Be a partner"
? "text-center text-md text-primary border border-primary rounded-full p-3 w-44 h-15"
: link.name === "Be a member"
? "text-center text-md text-white rounded-full p-3 bg-primary w-44 h-15 my-8"
: "flex text-primary py-4 text-2xl"
)}
>
{link.name}
</Disclosure.Button>
))}
</div>
</Disclosure.Panel>
</>
)}
</Disclosure>
);
}
Loading