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

enhance: Update font size and height of drop down for mobile view #35

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
+68 −54
Open

enhance: Update font size and height of drop down for mobile view #35

Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
b95a1f0
updated font size and height of showDropdown component
Tanuj1718 Dec 7, 2024
82b511b
revert changes in lockfile and use predefined size
Tanuj1718 Dec 7, 2024
1b833dd
improve mobile view for menu
Tanuj1718 Dec 17, 2024
c59a6fa
clicking on item will close the menu
Tanuj1718 Dec 18, 2024
53f261a
clicking on item will close the menu
Tanuj1718 Dec 19, 2024
3552141
clicking on item will close the menu
Tanuj1718 Dec 19, 2024
8c3de68
updated the dekstop version
Tanuj1718 Dec 21, 2024
d53707b
changes section to link for support tab
Tanuj1718 Dec 24, 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
74 changes: 44 additions & 30 deletions components/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ export default function Header(props: { fixed?: boolean }) {
const navigation: NavigationItem[] = [
{ type: "dropdown", content: "Products", items: productsItems },
{ type: "dropdown", content: "Community", items: communityItems },
{ type: "link", content: "Supporters", href: "/supporters" },
{ type: "section", content: "Supporters", id: "supporters", page: "/supporters" },
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why this change? 🤔

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why this change? 🤔

Because I want to use the section properties defined in 'switch' statements. Otherwise I have to write those properties in 'link' case.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Tanuj1718 a link must be used for links, you should find a way around this without disturbing existing elements

{ type: "section", content: "Contact", id: "contact", page: "/" },
{
type: "link",
Expand All @@ -93,7 +93,9 @@ export default function Header(props: { fixed?: boolean }) {
width={50}
height={50}
className={`md:w-[25px] ${
scrolled ? "brightness-0" : ""
scrolled ? "brightness-0" : ""
} ${
mobileMenuOpen?"pb-44 pt-4 m-0":""
} transition-all`}
/>
),
Expand Down Expand Up @@ -137,15 +139,17 @@ export default function Header(props: { fixed?: boolean }) {
const NavigationItemRender = (props: {
item: NavigationItem;
onHover?: (hoverstate: boolean, leftOffset: number) => void;
setMobileMenuOpen: (state: boolean) => void;
setShowDropdown: (state: number | null) => void;
}) => {
const { item, onHover } = props;

const { item, onHover, setMobileMenuOpen, setShowDropdown } = props;
const className = `font-black md:font-semibold ${
scrolled ? "md:hover:text-black/100" : "md:hover:text-white/100"
} transition-all px-3 flex items-center md:justify-center h-full`;

const itemRef = useRef<HTMLButtonElement>(null);

switch (item.type) {
case "link":
return (
Expand All @@ -157,8 +161,9 @@ export default function Header(props: { fixed?: boolean }) {
return (
<Link
href={item.page + "#" + item.id}
className={className}
className={`${className} ${mobileMenuOpen?"h-3 p-6":"h-full"}`}
onClick={(e) => {
setMobileMenuOpen(false);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should come below the prevent default and stop propagation

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Tanuj1718

e.preventDefault();
e.stopPropagation();
if (path === item.page) {
Expand All @@ -183,7 +188,7 @@ export default function Header(props: { fixed?: boolean }) {
return (
<button
ref={itemRef}
className={"nav-button " + className}
className={`nav-button ${className} ${mobileMenuOpen?"h-3 p-6":"h-full"}`}
onMouseOver={() => {
onHover?.(
true,
Expand All @@ -198,6 +203,9 @@ export default function Header(props: { fixed?: boolean }) {
(itemRef.current?.clientWidth || 0) / 2
);
}}
onClick={() => {
setShowDropdown(item.items ? item.items.length : null);
}}
>
{item.content}
</button>
Expand All @@ -223,6 +231,10 @@ export default function Header(props: { fixed?: boolean }) {
className={`p-4 w-[200px] text-left rounded-lg ${
scrolled ? "hover:bg-black/5" : "hover:bg-black/10"
} transition-all flex flex-col gap-2`}
onClick={() => {
setMobileMenuOpen(false);
setShowDropdown(null);
}}
>
<Image
src={item.image}
Expand Down Expand Up @@ -252,13 +264,13 @@ export default function Header(props: { fixed?: boolean }) {
}`}
id="header"
>
<div
className={`absolute inset-x-0 h-full bg-white/70 backdrop-blur-xl -z-10 transition-all ${
<div
className={`absolute inset-x-0 h-full bg-white/70 backdrop-blur-xl -z-10 transition-all ${
scrolled ? "top-0" : "-top-full"
}`}
/>
<nav
className={`flex relative items-stretch justify-between transition-all px-4 md:px-6 lg:px-8`}
className={`flex relative items-stretch justify-between transition-all px-4 md:px-6 lg:px-8 text-xs`}
aria-label="Global"
>
<div
Expand Down Expand Up @@ -296,33 +308,35 @@ export default function Header(props: { fixed?: boolean }) {
</button>
</div>
<div
className={`flex md:items-center p-6 md:p-0 fixed ${
mobileMenuOpen ? "right-0" : "right-[-100vw]"
className={`flex md:items-center p-6 md:p-0 fixed text-2xl ${
mobileMenuOpen ? "right-0" : "right-[-100vw] text-2xl"
} md:right-auto transition-all md:static ${
scrolled ? "bg-white/50" : "bg-black/50"
} pb-[300px] md:pb-0 md:bg-transparent backdrop-blur-lg md:backdrop-blur-none h-screen md:h-auto top-0 md:top-auto w-screen md:w-auto flex-col md:flex-row text-5xl md:text-base`}
} pb-[300px] md:pb-0 md:bg-transparent backdrop-blur-lg md:backdrop-blur-none h-screen md:h-auto top-0 md:top-auto w-screen md:w-auto flex-col md:flex-row md:text-base`}
>
<button
className="md:hidden block absolute top-6 right-8"
onClick={() => setMobileMenuOpen(false)}
>
<XMarkIcon className="h-6 w-6" aria-hidden="true" />
</button>
{navigation.map((item, i) => (
<NavigationItemRender
item={item}
key={i}
onHover={(hoverstate, leftOffset) => {
if (hoverstate) {
setShowDropdown(i + 1);
triangleRef.current?.style.setProperty(
"left",
`${leftOffset - triangleRef.current.clientWidth / 2}px`
);
}
}}
/>
))}
{navigation.map((item, i) => (
<NavigationItemRender
item={item}
key={i}
setMobileMenuOpen={setMobileMenuOpen}
setShowDropdown={setShowDropdown}
onHover={(hoverstate, leftOffset) => {
if (hoverstate) {
setShowDropdown(i + 1);
triangleRef.current?.style.setProperty(
"left",
`${leftOffset - triangleRef.current.clientWidth / 2}px`
);
}
}}
/>
))}
</div>
<svg
id="dropdown-triangle"
Expand All @@ -347,7 +361,7 @@ export default function Header(props: { fixed?: boolean }) {
className={`nav-dropdown ${scrolled ? "bg-black/5" : "bg-black/20"} ${
scrolled ? "" : "backdrop-blur md:rounded-xl md:mx-10"
} transition-all overflow-hidden fixed bottom-0 md:bottom-auto inset-x-0 md:inset-x-auto md:relative ${
!!showDropdown ? "max-h-[400px]" : "max-h-0"
!!showDropdown ? " max-h-xs" : "max-h-0"
}`}
style={{ height: dropDownHeight }}
>
Expand Down