Skip to content

Commit c26b83d

Browse files
cfu288cfu288
committed
fix: fix mobile menu on marketing page
1 parent 3df71cd commit c26b83d

File tree

1 file changed

+78
-76
lines changed

1 file changed

+78
-76
lines changed

Diff for: ‎apps/docs/src/pages/index.tsx

+78-76
Original file line numberDiff line numberDiff line change
@@ -85,96 +85,98 @@ export function NavigationBar({ absolute = true }: { absolute?: boolean }) {
8585
const blurPx = `blur(${Math.min(2, yScrollPosition / 50)}px)`;
8686

8787
return (
88-
<div
89-
style={{
90-
// @ts-ignore
91-
'--image-url': `url(${grainImage})`,
92-
// @ts-ignore
93-
'-webkit-backdrop-filter': blurPx,
94-
backdropFilter: blurPx,
95-
backgroundColor,
96-
}}
97-
className={`
88+
<>
89+
<div
90+
style={{
91+
// @ts-ignore
92+
'--image-url': `url(${grainImage})`,
93+
// @ts-ignore
94+
'-webkit-backdrop-filter': blurPx,
95+
backdropFilter: blurPx,
96+
backgroundColor,
97+
}}
98+
className={`
9899
${
99100
absolute ? 'fixed' : ''
100101
} text-primary-700 left-0 top-0 isolate z-50 float-right w-full p-1 px-2 text-center text-xs font-bold sm:text-sm`}
101-
>
102-
<div className="px-6 py-6 lg:px-8">
103-
<nav
104-
className="flex w-full items-center justify-between"
105-
aria-label="Global"
106-
>
107-
<div className="flex lg:flex-1">
102+
>
103+
<div className="px-6 py-2 lg:px-8">
104+
<nav
105+
className="flex w-full items-center justify-between"
106+
aria-label="Global"
107+
>
108+
<div className="flex lg:flex-1">
109+
<a href="#" className="-m-1.5 p-1.5">
110+
<img
111+
className="block h-10 lg:hidden"
112+
src="/img/logo.svg"
113+
alt=""
114+
/>
115+
</a>
116+
</div>
117+
<div className="flex lg:hidden">
118+
<button
119+
type="button"
120+
className="-m-2.5 inline-flex items-center justify-center rounded-md border-0 bg-gray-50 p-2.5 text-gray-700 hover:bg-gray-100"
121+
onClick={() => setMobileMenuOpen(true)}
122+
>
123+
<span className="sr-only">Open main menu</span>
124+
<Bars3Icon className="h-6 w-6" aria-hidden="true" />
125+
</button>
126+
</div>
127+
<div className="hidden lg:flex lg:gap-x-12">
128+
{navigation.map((item) => (
129+
<a
130+
key={item.name}
131+
href={item.href}
132+
className="text-sm leading-6 text-gray-700"
133+
>
134+
{item.name}
135+
</a>
136+
))}
137+
</div>
138+
</nav>
139+
</div>
140+
</div>
141+
{mobileMenuOpen && (
142+
<div className="fixed inset-0 z-50 overflow-y-auto bg-white px-6 py-6 lg:hidden">
143+
<div className="flex items-center justify-between">
108144
<a href="#" className="-m-1.5 p-1.5">
109-
<img
110-
className="block h-10 lg:hidden"
111-
src="/img/logo.svg"
112-
alt=""
113-
/>
145+
<img className="h-10 w-auto" src="/img/logo.svg" alt="logo" />
114146
</a>
115-
</div>
116-
<div className="flex lg:hidden">
117147
<button
118148
type="button"
119149
className="-m-2.5 inline-flex items-center justify-center rounded-md border-0 bg-gray-50 p-2.5 text-gray-700 hover:bg-gray-100"
120-
onClick={() => setMobileMenuOpen(true)}
150+
onClick={() => setMobileMenuOpen(false)}
121151
>
122-
<span className="sr-only">Open main menu</span>
123-
<Bars3Icon className="h-6 w-6" aria-hidden="true" />
152+
<span className="sr-only">Close menu</span>
153+
<XMarkIcon className="h-6 w-6" aria-hidden="true" />
124154
</button>
125155
</div>
126-
<div className="hidden lg:flex lg:gap-x-12">
127-
{navigation.map((item) => (
128-
<a
129-
key={item.name}
130-
href={item.href}
131-
className="text-sm leading-6 text-gray-700"
132-
>
133-
{item.name}
134-
</a>
135-
))}
136-
</div>
137-
{mobileMenuOpen && (
138-
<div className="fixed inset-0 z-10 overflow-y-auto bg-white px-6 py-6 lg:hidden">
139-
<div className="flex items-center justify-between">
140-
<a href="#" className="-m-1.5 p-1.5">
141-
<img className="h-10 w-auto" src="/img/logo.svg" alt="logo" />
142-
</a>
143-
<button
144-
type="button"
145-
className="-m-2.5 inline-flex items-center justify-center rounded-md border-0 bg-gray-50 p-2.5 text-gray-700 hover:bg-gray-100"
146-
onClick={() => setMobileMenuOpen(false)}
147-
>
148-
<span className="sr-only">Close menu</span>
149-
<XMarkIcon className="h-6 w-6" aria-hidden="true" />
150-
</button>
156+
<div className="mt-6 flow-root">
157+
<div className="-my-6 divide-y divide-gray-500/10">
158+
<div className="space-y-2 py-6">
159+
{navigation.map((item) => (
160+
<a
161+
key={item.name}
162+
href={item.href}
163+
className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-400/10"
164+
>
165+
{item.name}
166+
</a>
167+
))}
151168
</div>
152-
<div className="mt-6 flow-root">
153-
<div className="-my-6 divide-y divide-gray-500/10">
154-
<div className="space-y-2 py-6">
155-
{navigation.map((item) => (
156-
<a
157-
key={item.name}
158-
href={item.href}
159-
className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-400/10"
160-
>
161-
{item.name}
162-
</a>
163-
))}
164-
</div>
165-
<div className="py-6">
166-
<a
167-
href="#"
168-
className="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-6 text-gray-900 hover:bg-gray-400/10"
169-
></a>
170-
</div>
171-
</div>
169+
<div className="py-6">
170+
<a
171+
href="#"
172+
className="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-6 text-gray-900 hover:bg-gray-400/10"
173+
></a>
172174
</div>
173175
</div>
174-
)}
175-
</nav>
176-
</div>
177-
</div>
176+
</div>
177+
</div>
178+
)}
179+
</>
178180
);
179181
}
180182

0 commit comments

Comments
 (0)