crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-24 18:51:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updates

Browse Source
This commit is contained in:
Henrik Larsson
2023-08-08 16:20:45 +02:00
parent 3e513eaf99
commit 22aab2f657
39 changed files with 1259 additions and 594 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
components/layout/header/header.tsx
View File

@@ -1,27 +1,42 @@
import Cart from 'components/cart';
import OpenCart from 'components/cart/open-cart';
import Logo from 'components/ui/logo/logo';
import { useLocale } from 'next-intl';
import Link from 'next/link';
import { Suspense } from 'react';
import HeaderRoot from './header-root';
import MobileModal from './mobile-modal';
const Header = () => {
const locale = useLocale();
interface HeaderProps {
locale: string;
}
const Header = ({ locale }: HeaderProps) => {
return (
<HeaderRoot>
<div className="relative flex flex-col">
<div className="relative flex h-14 w-full items-center justify-between px-4 py-2 lg:h-16 lg:px-8 lg:py-3 2xl:px-16">
<div className="md:hidden">
<MobileModal />
</div>
<div className="flex items-center">
<Link
href={`/${locale}`}
className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform cursor-pointer duration-100 ease-in-out lg:relative lg:left-0 lg:top-0 lg:translate-x-0 lg:translate-y-0"
className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform cursor-pointer duration-100 ease-in-out md:relative md:left-0 md:top-0 md:translate-x-0 md:translate-y-0"
aria-label="Logo"
>
<Logo />
</Link>
</div>
<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform">
Menu
<div className="absolute left-1/2 top-1/2 hidden -translate-x-1/2 -translate-y-1/2 transform md:flex">
Desktop Menu
</div>
<div className="flex justify-end md:w-1/3">
<Suspense fallback={<OpenCart />}>
{/*// @ts-ignore */}
<Cart />
</Suspense>
</div>
</div>
</div>

26
components/layout/header/mobile-modal.tsx Normal file
View File

@@ -0,0 +1,26 @@
'use client';
import MenuIcon from '@/components/icons/menu';
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
import { useState } from 'react';
export default function MobileModal() {
const [isOpen, setIsOpen] = useState(false);
return (
<>
<Sheet open={isOpen} onOpenChange={() => setIsOpen(!isOpen)}>
<SheetTrigger aria-label="Open menu">
<div className="relative flex h-11 w-11 items-center justify-center rounded-md border border-ui-border text-high-contrast transition-colors">
<MenuIcon className="h-4 stroke-current transition-all ease-in-out hover:scale-110" />
</div>
</SheetTrigger>
<SheetContent side="left" className="bg-app">
<SheetHeader>
<SheetTitle className="text-lg font-semibold">Menu</SheetTitle>
</SheetHeader>
</SheetContent>
</Sheet>
</>
);
}