eny.space Landingpage
feat(mobile-menu): extract component and style adjustment
+90
-71
+5
-71
app/components/site-header/site-header.tsx
+5
-71
app/components/site-header/site-header.tsx
···
7
7
import { Button } from "@/actions/components/ui/button";
8
8
import { ArrowUpRightIcon, MenuIcon, XIcon } from "lucide-react";
9
9
import type { User } from "@supabase/supabase-js";
10
+
import { MobileMenu } from "./mobile-menu";
10
11
11
12
const navLinkClass =
12
13
"inline-flex h-9 items-center justify-center rounded-full bg-transparent px-4 py-2 text-xs font-medium uppercase tracking-wide text-white/90 transition-colors hover:bg-white/5 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/30";
···
91
92
<button
92
93
type="button"
93
94
aria-label="Toggle navigation"
94
-
className="inline-flex h-9 w-9 cursor-pointer items-center justify-center rounded-full border border-white/20 text-white md:hidden"
95
+
className="inline-flex h-9 w-9 cursor-pointer items-center justify-center text-white md:hidden"
95
96
onClick={() => setMobileOpen((open) => !open)}
96
97
>
97
98
{mobileOpen ? (
98
-
<XIcon className="size-4" aria-hidden />
99
+
<XIcon className="size-5" aria-hidden />
99
100
) : (
100
-
<MenuIcon className="size-4" aria-hidden />
101
+
<MenuIcon className="size-5" aria-hidden />
101
102
)}
102
103
</button>
103
104
</div>
104
105
105
-
{mobileOpen && (
106
-
<div className="border-t border-white/10 bg-neutral-950 px-4 pb-4 pt-3 md:hidden">
107
-
<nav className="flex flex-col gap-2">
108
-
<Link
109
-
href="/"
110
-
className="text-sm font-medium text-white/90"
111
-
onClick={closeMobile}
112
-
>
113
-
Home
114
-
</Link>
115
-
{user && (
116
-
<Link
117
-
href="/dashboard"
118
-
className="text-sm font-medium text-white/90"
119
-
onClick={closeMobile}
120
-
>
121
-
Dashboard
122
-
</Link>
123
-
)}
124
-
<Link
125
-
href="/#about"
126
-
className="text-sm font-medium text-white/90"
127
-
onClick={closeMobile}
128
-
>
129
-
About
130
-
</Link>
131
-
</nav>
132
-
133
-
<div className="mt-3 flex flex-col gap-2">
134
-
{user ? (
135
-
<form action={signOut}>
136
-
<Button
137
-
type="submit"
138
-
size="default"
139
-
className="inline-flex h-9 items-center justify-center rounded-full bg-white px-4 text-xs font-medium uppercase tracking-wide text-neutral-950 hover:bg-white/90"
140
-
>
141
-
<span>Sign out</span>
142
-
<ArrowUpRightIcon className="ml-1 size-3.5" aria-hidden />
143
-
</Button>
144
-
</form>
145
-
) : (
146
-
<>
147
-
<Button
148
-
variant="outline"
149
-
size="default"
150
-
className="inline-flex h-9 w-full items-center justify-center rounded-full border-white/20 bg-transparent px-4 text-xs font-medium uppercase tracking-wide text-white/90 hover:bg-white/10 hover:text-white"
151
-
asChild
152
-
>
153
-
<Link href="/login" onClick={closeMobile}>
154
-
Login
155
-
</Link>
156
-
</Button>
157
-
<Button
158
-
size="default"
159
-
className="inline-flex h-9 w-full items-center justify-center rounded-full bg-white px-4 text-xs font-medium uppercase tracking-wide text-neutral-950 hover:bg-white/90"
160
-
asChild
161
-
>
162
-
<Link href="/signup" onClick={closeMobile}>
163
-
Get started
164
-
<ArrowUpRightIcon className="ml-1 size-3.5" aria-hidden />
165
-
</Link>
166
-
</Button>
167
-
</>
168
-
)}
169
-
</div>
170
-
</div>
171
-
)}
106
+
<MobileMenu user={user} open={mobileOpen} onClose={closeMobile} />
172
107
</header>
173
108
);
174
109
}
175
-