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

Mobile view; Cart button; Cart notification #62

Merged
merged 2 commits into from
Jun 7, 2024
Merged

Mobile view; Cart button; Cart notification #62

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
16dc6b5
Mobile view; Cart button; Cart notification
wpdas Jun 7, 2024
027752b
remove mobile menu button outline
wpdas Jun 7, 2024
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
204 changes: 139 additions & 65 deletions src/app/_layout/Nav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
"use client";

import { useCallback } from "react";
import { useCallback, useState } from "react";

import Image from "next/image";
import Link from "next/link";
Expand All @@ -14,6 +14,25 @@ import routesPath from "@/modules/core/routes";

import UserDropdown from "../_components/UserDropdown";

const tabOptions = [
{
text: "Projects",
link: routesPath.PROJECTS_LIST,
disabled: false,
},
{ text: "Feed", link: "feed", disabled: false },
{
text: "Pots",
link: routesPath.POTS,
disabled: false,
},
{
text: "Donors",
link: routesPath.DONORS,
disabled: false,
},
];

const AuthButton = () => {
const { isAuthenticated } = useAuth();
const isClient = useIsClient();
Expand All @@ -25,93 +44,148 @@ const AuthButton = () => {
if (!isClient) return;

if (isAuthenticated) {
return (
<UserDropdown />
// <Button
// variant="standard-filled"
// onClick={logoutHandler}
// className="bg-[#342823]"
// >
// Logout
// </Button>
);
return <UserDropdown />;
}

return (
<Button
font="semibold"
variant="standard-filled"
onClick={loginHandler}
className="bg-[#342823]"
className="border-none bg-[#342823] shadow-none"
>
Login
Sign In
</Button>
);
};

const Nav = () => {
const MobileMenuButton = ({ onClick }: { onClick: () => void }) => {
return (
<button
type="button"
className="flex items-center justify-between focus:outline-none md:hidden"
onClick={onClick}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M3 18H21V16H3V18ZM3 13H21V11H3V13ZM3 6V8H21V6H3Z"
fill="#7B7B7B"
/>
</svg>
</button>
);
};

const MobileNav = () => {
const isClient = useIsClient();
const pathname = usePathname();

const tabOptions = [
{
text: "Projects",
link: routesPath.PROJECTS_LIST,
disabled: false,
},
{ text: "Feed", link: "feed", disabled: false },
{
text: "Pots",
link: routesPath.POTS,
disabled: false,
},
{
text: "Donors",
link: routesPath.DONORS,
disabled: false,
},
];

return (
<nav className="container z-50 flex h-[110px] content-between items-center justify-between self-stretch bg-white px-[40px] pb-6 md:h-[96px] md:pr-2 md:pt-6">
{/* Left */}
<div className="flex">
<div className="mr-12 flex flex-row items-center justify-center">
{/* Logo */}
<nav className="flex flex-col gap-4 p-6">
{tabOptions.map((tab) => {
const selected = isClient ? tab.link === pathname : false;

return (
<Link
href="/"
className="decoration-none hover:decoration-none mr-12 flex items-baseline gap-2 text-center text-2xl font-bold text-[color:var(--neutral-900)] sm:mr-4 sm:text-xl"
key={tab.text}
href={tab.link}
className={`${selected ? "font-medium text-[color:var(--neutral-900)]" : "font-normal text-[color:var(--neutral-500)]"} decoration-none not-last-child hover:decoration-none relative mr-8 text-sm`}
>
<Image
src="https://ipfs.near.social/ipfs/bafkreiafms2jag3gjbypfceafz2uvs66o25qc7m6u6hkxfyrzfoeyvj7ru"
alt="logo"
width={28.72}
height={23.94}
/>
POTLOCK
{tab.text}
</Link>
);
})}
</nav>
);
};

const CartLink = () => {
// TODO: number of cart items
const numCartItems = Math.round(Math.random() * 5);

return (
<Link
href={routesPath.CART}
className="flex flex-row items-center justify-center rounded-[6px] bg-[rgb(46,46,46)] px-4 py-[9.5px] text-[14px] font-semibold text-white"
>
Cart
{numCartItems > 0 && (
<div className="ml-2 flex h-[18px] w-[18px] flex-row items-center justify-center rounded-full bg-[#f86b3f]">
<p className="ml-[-1px] mt-[2px] text-center text-[10px] font-bold">
{numCartItems}
</p>
</div>
)}
</Link>
);
};

const Nav = () => {
const [showMobileMenu, setShowMobileMenu] = useState(false);
const isClient = useIsClient();
const pathname = usePathname();

return (
<div>
<nav className="container z-50 flex content-between items-center justify-between self-stretch bg-white px-[40px] pb-6 pt-6 max-sm:px-1 md:h-[96px] md:pr-2">
{/* Left */}
<div className="flex">
<div className="mr-12 flex flex-row items-center justify-center">
{/* Logo */}
<Link
href="/"
className="decoration-none hover:decoration-none mr-12 flex items-baseline gap-2 max-sm:mr-0 sm:mr-4"
>
<Image
src="https://ipfs.near.social/ipfs/bafkreiafms2jag3gjbypfceafz2uvs66o25qc7m6u6hkxfyrzfoeyvj7ru"
alt="logo"
width={28.72}
height={23.94}
/>
<p className="text-center text-xl font-bold text-[color:var(--neutral-900)] max-sm:hidden">
POTLOCK
</p>
</Link>
</div>

<div className="flex flex-row items-center justify-center">
<div className="flex flex-row items-center justify-center">
{tabOptions.map((tab) => {
const selected = isClient ? tab.link === pathname : false;

return (
<Link
key={tab.text}
href={tab.link}
className={`${selected ? "font-medium text-[color:var(--neutral-900)]" : "font-normal text-[color:var(--neutral-500)]"} decoration-none not-last-child hover:decoration-none relative mr-8 text-sm`}
>
{tab.text}
</Link>
);
})}
<div className="flex flex-row items-center justify-center max-md:hidden">
{tabOptions.map((tab) => {
const selected = isClient ? tab.link === pathname : false;

return (
<Link
key={tab.text}
href={tab.link}
className={`${selected ? "font-medium text-[color:var(--neutral-900)]" : "font-normal text-[color:var(--neutral-500)]"} decoration-none not-last-child hover:decoration-none relative mr-8 text-sm`}
>
{tab.text}
</Link>
);
})}
</div>
<CartLink />
</div>
</div>
</div>
{/* Right */}
<AuthButton />
</nav>
{/* Right */}
<div className="flex gap-4">
<AuthButton />
<MobileMenuButton
onClick={() => {
setShowMobileMenu(!showMobileMenu);
}}
/>
</div>
</nav>
{/* Mobile Nav */}
<div className="md:hidden">{showMobileMenu && <MobileNav />}</div>
</div>
);
};

Expand Down
1 change: 1 addition & 0 deletions src/common/ui/components/button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ const buttonVariants = cva(
font: {
default: "font-medium",
bold: "font-bold",
semibold: "font-semibold",
},
},
defaultVariants: {
Expand Down
Loading