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

New header UI #1067

Merged
merged 7 commits into from
Jul 11, 2023
Merged

New header UI #1067

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e0500b9
new header ui
Jul 10, 2023
a9d6975
merge
Jul 10, 2023
d11b420
light mode styling
Jul 10, 2023
fa7e3e2
Merge branch 'design-refresh' into DX-1730
StephDietz Jul 10, 2023
1a8c805
add bg color to search icon
Jul 10, 2023
ae3bd01
address github comments
Jul 11, 2023
5dc5f99
hide store title in md screens
Jul 11, 2023
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
2 changes: 1 addition & 1 deletion app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ const inter = Inter({
export default async function RootLayout({ children }: { children: ReactNode }) {
return (
<html lang="en" className={inter.variable}>
<body className="bg-white text-black selection:bg-teal-300 dark:bg-black dark:text-white dark:selection:bg-fuchsia-600 dark:selection:text-white">
<body className="bg-gray-50 text-black selection:bg-teal-300 dark:bg-dark dark:text-white dark:selection:bg-fuchsia-600 dark:selection:text-white">
<Navbar />
<Suspense>
<main>{children}</main>
Expand Down
21 changes: 12 additions & 9 deletions components/layout/navbar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,23 +13,26 @@ export default async function Navbar() {
const menu = await getMenu('next-js-frontend-header-menu');

return (
<nav className="relative flex items-center justify-between bg-white p-4 dark:bg-black lg:px-6">
<nav className="relative flex items-center justify-between p-4 lg:px-6">
<div className="block w-1/3 md:hidden">
<MobileMenu menu={menu} />
</div>
<div className="flex justify-self-center md:w-1/3 md:justify-self-start">
<div className="md:mr-4">
<Link href="/" aria-label="Go back home">
<LogoIcon className="h-8 transition-transform hover:scale-110" />
<div className="b flex w-full flex-auto text-sm md:mr-6 md:flex md:w-auto md:items-center lg:mr-10">
<div className="flex w-full flex-none justify-center md:mr-6 md:block md:w-auto lg:mr-10">
<Link href="/" aria-label="Go back home" className="flex items-center">
<div className="relative mr-2 flex h-11 w-11 items-center justify-center rounded-md border border-gray-200 text-black transition-colors dark:border-gray-700 dark:text-white">
<LogoIcon className="h-8 transition-transform hover:scale-110" />
</div>
<div className="text-sm font-medium uppercase">Acme Store</div>
StephDietz marked this conversation as resolved.
Show resolved Hide resolved
</Link>
</div>
{menu.length ? (
<ul className="hidden md:flex md:items-center">
<ul className="b mr-6 hidden w-full text-sm md:flex md:items-center lg:mr-10">
StephDietz marked this conversation as resolved.
Show resolved Hide resolved
{menu.map((item: Menu) => (
<li key={item.title}>
<Link
href={item.path}
className="rounded-lg px-2 py-1 text-gray-800 hover:text-gray-500 dark:text-gray-200 dark:hover:text-gray-400"
className="mr-3 rounded-lg py-1 text-gray-500 underline-offset-4 hover:text-black hover:underline dark:hover:text-gray-400 lg:mr-8"
>
{item.title}
</Link>
Expand All @@ -38,11 +41,11 @@ export default async function Navbar() {
</ul>
) : null}
</div>
<div className="hidden w-1/3 md:block">
<div className="hidden flex-grow md:block md:w-auto">
<Search />
</div>

<div className="flex w-1/3 justify-end">
<div className="flex w-2/5 justify-end">
<Suspense fallback={<CartIcon className="h-6" />}>
<Cart />
</Suspense>
Expand Down
8 changes: 4 additions & 4 deletions components/layout/navbar/search.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,18 +28,18 @@ export default function Search() {
return (
<form
onSubmit={onSubmit}
className="relative m-0 flex w-full items-center border border-gray-200 bg-transparent p-0 dark:border-gray-500"
className="relative m-0 flex w-full items-center rounded-xl border bg-transparent p-0 dark:border-gray-800"
StephDietz marked this conversation as resolved.
Show resolved Hide resolved
>
<input
type="text"
name="search"
placeholder="Search for products..."
autoComplete="off"
defaultValue={searchParams?.get('q') || ''}
className="w-full px-4 py-2 text-black dark:bg-black dark:text-gray-100"
className="w-full rounded-xl bg-white px-4 py-1 text-sm text-black placeholder:text-gray-800 dark:bg-transparent dark:text-gray-500 dark:placeholder:text-gray-500"
StephDietz marked this conversation as resolved.
Show resolved Hide resolved
/>
<div className="absolute right-0 top-0 mr-3 flex h-full items-center">
<MagnifyingGlassIcon className="h-5" />
<div className="absolute right-0 top-0 mr-3 flex h-full items-center bg-white dark:bg-dark">
<MagnifyingGlassIcon className="h-4" />
</div>
</form>
);
Expand Down