wip: Improved menu

2025-05-19 07:56:59 +00:00 · 2023-08-19 15:37:47 +09:00 · 2023-08-19 15:37:47 +09:00 · 1e489b1790
commit 1e489b1790
parent 3bb6be36ac
17 changed files with 153 additions and 47 deletions
--- a/.yarn/cache/react-intersection-observer-npm-9.5.2-2c006290a0-cdbe405449.zip
+++ b/.yarn/cache/react-intersection-observer-npm-9.5.2-2c006290a0-cdbe405449.zip
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@ -1,4 +1,3 @@
-import Navbar from 'components/layout/navbar';
 import { Noto_Serif_JP } from 'next/font/google';
 import localFont from 'next/font/local';
 import { ReactNode, Suspense } from 'react';
@ -84,14 +83,11 @@ export default async function RootLayout({
  return (
    <html lang={params.locale} className={`${cinzel.variable} ${alpina.variable} ${noto.variable}`}>
      <body className="bg-dark text-white selection:bg-green-800 selection:text-green-400">
-        <div className="mx-auto max-w-screen-2xl">
        <NextIntlClientProvider locale={params?.locale} messages={messages}>
-            <Navbar />
          <Suspense>
            <main>{children}</main>
          </Suspense>
        </NextIntlClientProvider>
-        </div>
      </body>
    </html>
  );
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@ -1,16 +1,20 @@
 import { Carousel } from 'components/carousel';
 import { ThreeItemGrid } from 'components/grid/three-items';
 import Footer from 'components/layout/footer';
-import { LanguageControl, SupportedLocale } from 'components/layout/navbar/language-control';
+import { SupportedLocale } from 'components/layout/navbar/language-control';

 import clsx from 'clsx';
-import LogoNamemark from 'components/icons/namemark';
+import AboutNaraiPreview from 'components/layout/about-narai-preview';
+import Navbar from 'components/layout/navbar';
 import NewsletterSignup from 'components/layout/newsletter-signup';
 import Shoplist from 'components/layout/shoplist';
+import { getCart } from 'lib/shopify';
+import { cookies } from 'next/headers';
 import Image from 'next/image';
 import { Suspense } from 'react';
 import HomeImage001 from './images/home-image-001.webp';
 import HomeImage002 from './images/home-image-002.webp';
+import HomeImage003 from './images/home-image-003.webp';

 export const runtime = 'edge';
 const { SITE_NAME } = process.env;
@ -28,19 +32,23 @@ export default async function HomePage({
 }: {
  params: { locale?: SupportedLocale };
 }) {
+  const cartId = cookies().get('cartId')?.value;
+  let cart;
+
+  if (cartId) {
+    cart = await getCart(cartId);
+  }
+
  return (
-    <>
-      <div className="invisible absolute right-40 top-12 md:visible">
-        <LanguageControl lang={locale} />
-      </div>
-      <div className="px-6 pb-12 pt-6 md:pb-48 md:pl-6 md:pt-12">
-        <LogoNamemark className="w-[260px] fill-current md:w-[600px]" />
-      </div>
+    <div className="relative h-screen overflow-scroll">
+      <Navbar cart={cart} locale={locale} />
+      <div className="pt-48">
        <ThreeItemGrid lang={locale} />
+      </div>
      <div className="py-48">
        <NewsletterSignup />
      </div>
-      <div className="relative max-w-screen-2xl">
+      <div className="relative mx-auto max-w-screen-xl">
        <Image
          src={HomeImage001}
          priority={true}
@ -51,7 +59,7 @@ export default async function HomePage({
      <div className="py-24">
        <Shoplist />
      </div>
-      <div className="max-w-screen-4xl relative">
+      <div className="relative pb-48">
        <Image
          src={HomeImage002}
          priority={true}
@ -59,12 +67,22 @@ export default async function HomePage({
          className={clsx('h-full w-full object-cover')}
        />
      </div>
+      <div className="relative mx-auto max-w-screen-xl">
+        <Image
+          src={HomeImage003}
+          priority={true}
+          alt="A picture of mountain stream water on a log, next to a rock."
+          className={clsx('h-full w-full object-cover')}
+        />
+
+        <AboutNaraiPreview />
+      </div>
      <Suspense>
        <Carousel />
        <Suspense>
-          <Footer />
+          <Footer cart={cart} />
        </Suspense>
      </Suspense>
-    </>
+    </div>
  );
 }
--- a/app/[locale]/product/[handle]/page.tsx
+++ b/app/[locale]/product/[handle]/page.tsx
@ -81,7 +81,7 @@ export default async function ProductPage({ params }: { params: { handle: string
          __html: JSON.stringify(productJsonLd)
        }}
      />
-      <div className="mx-auto max-w-screen-2xl px-4">
+      <div className="mx-auto max-w-screen-xl px-4">
        <div className="flex flex-col rounded-lg border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-black md:p-12 lg:flex-row">
          <div className="h-full w-full basis-full lg:basis-4/6">
            <Gallery
--- a/app/[locale]/search/layout.tsx
+++ b/app/[locale]/search/layout.tsx
@ -7,7 +7,7 @@ import { Suspense } from 'react';
 export default function SearchLayout({ children }: { children: React.ReactNode }) {
  return (
    <Suspense>
-      <div className="mx-auto flex max-w-screen-2xl flex-col gap-8 px-4 pb-4 text-black dark:text-white md:flex-row">
+      <div className="mx-auto flex max-w-screen-xl flex-col gap-8 px-4 pb-4 text-black dark:text-white md:flex-row">
        <div className="order-first w-full flex-none md:max-w-[125px]">
          <Collections />
        </div>
--- a/app/[locale]/shop-list/layout.tsx
+++ b/app/[locale]/shop-list/layout.tsx
@ -5,7 +5,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <Suspense>
      <div className="w-full">
-        <div className="mx-8 max-w-screen-2xl py-20 sm:mx-auto">
+        <div className="mx-8 max-w-screen-xl py-20 sm:mx-auto">
          <Suspense>{children}</Suspense>
        </div>
      </div>
--- a/app/[locale]/shop-list/page.tsx
+++ b/app/[locale]/shop-list/page.tsx
@ -37,7 +37,7 @@ export default async function Page({ params }: { params: { locale?: SupportedLoc
  if (!page) return notFound();

  return (
-    <div className="font-multilingual mx-auto min-h-screen max-w-screen-2xl px-4 text-white">
+    <div className="font-multilingual mx-auto min-h-screen max-w-screen-xl px-4 text-white">
      <div className="pb-12">
        <LogoNamemark className="w-[260px] fill-current md:w-[320px]" />
      </div>
--- a/components/grid/three-items.tsx
+++ b/components/grid/three-items.tsx
@ -49,7 +49,7 @@ export async function ThreeItemGrid({ lang }: { lang?: SupportedLocale }) {
  return (
    <section
      className={clsx(
-        'mx-auto grid max-w-screen-2xl gap-6 px-4 pb-4 ',
+        'mx-auto grid max-w-screen-xl gap-6 px-4 pb-4 ',
        'grid-cols-1 md:grid-cols-6',
        'grid-rows-3 md:grid-rows-1'
      )}
--- a/components/layout/about-narai-preview.tsx
+++ b/components/layout/about-narai-preview.tsx
@ -0,0 +1,18 @@
+'use client';
+import { useTranslations } from 'next-intl';
+
+export default function AboutNaraiPreview() {
+  const t = useTranslations('Index');
+
+  return (
+    <div className="flex flex-row space-x-2 p-24">
+      <div className="font-multilingual flex flex-col space-y-2 font-extralight md:w-1/2">
+        <div className="text-5xl">{t('home.previews.about-narai.title')}</div>
+        <div className="text-5xl">{t('home.previews.about-narai.subtitle')}</div>
+      </div>
+      <div className="font-multilingual flex flex-col space-y-2 font-extralight md:w-1/2">
+        <div>{t('home.previews.about-narai.body')}</div>
+      </div>
+    </div>
+  );
+}
--- a/components/layout/footer.tsx
+++ b/components/layout/footer.tsx
@ -1,15 +1,16 @@
 import clsx from 'clsx';
-import Cart from 'components/cart';
+import CartModal from 'components/cart/modal';
 import FacebookIcon from 'components/icons/facebook';
 import InstagramIcon from 'components/icons/instagram';
 import KanjiLogo from 'components/icons/kanji';
+import { Cart } from 'lib/shopify/types';
 import Link from 'next/link';
 import FooterMenu from './footer-menu';
 import NewsletterFooter from './newsletter-footer';

 const { COMPANY_NAME, SITE_NAME } = process.env;

-export default async function Footer() {
+export default async function Footer({ cart }: { cart?: Cart }) {
  const currentYear = new Date().getFullYear();
  const copyrightDate = 2023 + (currentYear > 2023 ? `-${currentYear}` : '');
  const copyrightName = COMPANY_NAME || SITE_NAME || '';
@ -18,7 +19,7 @@ export default async function Footer() {
    <footer className="px-6 text-sm">
      <div
        className={clsx(
-          'mx-auto flex w-full max-w-screen-2xl justify-between',
+          'mx-auto flex w-full max-w-screen-xl justify-between',
          'flex-col gap-6 py-12',
          'border-t border-subtle',
          'text-sm md:flex-row md:gap-12'
@ -47,7 +48,7 @@ export default async function Footer() {
            <FooterMenu />
            <div className="flex flex-col space-y-2">
              <div className="flex flex-row justify-between space-x-4">
-                <Cart />
+                <CartModal cart={cart} />
                <div className="flex flex-row items-center space-x-6">
                  <Link href="https://www.instagram.com/suginomoribrewery/" className="group">
                    <InstagramIcon className="h-8 stroke-transparent transition-all ease-in-out group-hover:scale-110" />
--- a/components/layout/menu/modal.tsx
+++ b/components/layout/menu/modal.tsx
@ -56,7 +56,7 @@ export function MenuModal() {
          >
            <div className="fixed inset-0 z-30 backdrop-blur-sm">
              <Dialog.Panel>
-                <div className="fixed right-5 top-6 z-40 px-2 py-1 md:top-11">
+                <div className="fixed right-5 top-6 z-40 px-2 py-1 md:top-6">
                  <div className="flex flex-row space-x-6">
                    <LanguageControl lang={locale as SupportedLocale} />

--- a/components/layout/navbar/index.tsx
+++ b/components/layout/navbar/index.tsx
@ -1,19 +1,63 @@
-import Cart from 'components/cart';
-import OpenCart from 'components/cart/open-cart';
-import { Suspense } from 'react';
-import { MenuModal } from '../menu/modal';
+'use client';
+
+import clsx from 'clsx';
+import CartModal from 'components/cart/modal';
+import OpenCart from 'components/cart/open-cart';
+import LogoNamemark from 'components/icons/namemark';
+import { Cart } from 'lib/shopify/types';
+import { Suspense } from 'react';
+import { useInView } from 'react-intersection-observer';
+import { MenuModal } from '../menu/modal';
+import { LanguageControl, SupportedLocale } from './language-control';
+
+export default function Navbar({ cart, locale }: { cart?: Cart; locale?: SupportedLocale }) {
+  const { ref, inView, entry } = useInView({
+    threshold: 0,
+    initialInView: true
+  });

-export default async function Navbar() {
  return (
-    <nav className="fixed right-0 top-6 z-10 md:top-12">
-      <div className="flex justify-end pr-5">
+    <div ref={ref}>
+      {!!ref && !inView && (
+        <div className="fixed left-1/2 top-0 z-20 w-full max-w-screen-xl -translate-x-1/2 animate-fadeIn bg-dark/40 px-6 py-2 backdrop-blur-sm">
+          <div className="mx-auto flex max-w-screen-xl flex-row items-center justify-between">
+            <div className={clsx('')}>
+              <LogoNamemark
+                className={clsx('w-[260px]', 'fill-current transition-all duration-150')}
+              />
+            </div>
+            <nav className="flex flex-row items-center space-x-4">
              <Suspense fallback={<OpenCart />}>
-          <div className="flex flex-col-reverse items-center justify-center space-y-2 rounded bg-dark/40 px-2 backdrop-blur-sm md:flex-row md:space-x-6">
-            <Cart />
+                <div className="flex flex-col-reverse items-center justify-center space-y-2 px-2 md:flex-row md:space-x-6">
+                  <CartModal cart={cart} />
                  <MenuModal />
                </div>
              </Suspense>
-      </div>
            </nav>
+          </div>
+        </div>
+      )}
+      <div
+        className={clsx('mx-auto flex max-w-screen-xl flex-row items-start justify-between px-6')}
+      >
+        <div>
+          <LogoNamemark
+            className={clsx(
+              inView ? 'w-[260px] md:w-[600px]' : 'w-[260px] md:w-[260px]',
+              'fill-current pt-12 transition-all duration-150'
+            )}
+          />
+        </div>
+        <nav className="flex flex-row space-x-4 pt-6">
+          <LanguageControl lang={locale} />
+          <Suspense fallback={<OpenCart />}>
+            <div className="flex flex-col-reverse items-center justify-center space-y-2 rounded md:flex-row md:space-x-6">
+              <CartModal cart={cart} />
+              <MenuModal />
+            </div>
+          </Suspense>
+        </nav>
+      </div>
+    </div>
  );
 }
--- a/components/layout/shoplist.tsx
+++ b/components/layout/shoplist.tsx
@ -6,7 +6,7 @@ import Link from 'next/link';
 export default function Shoplist() {
  const t = useTranslations('Index');
  return (
-    <div className="mx-auto max-w-screen-2xl space-y-4 px-6" id="shops">
+    <div className="mx-auto max-w-screen-xl space-y-4 px-6" id="shops">
      <div className="flex w-full flex-row items-baseline space-x-12 pb-6">
        <h2 className="font-serif text-6xl tracking-wider">shop list</h2>
        <h3 className="font-multilingual text-2xl font-extralight tracking-wider">
--- a/messages/en.json
+++ b/messages/en.json
@ -24,6 +24,15 @@
      "placeholder": "Email",
      "button": "Notify me"
    },
+    "home": {
+      "previews": {
+        "about-narai": {
+          "title": "water of the mountains,",
+          "subtitle": "sake of the skies",
+          "body": "We brew our sake in one of the highest breweries in Japan, standing at an altitude of 940m and surrounded by an abundance of nature. While many breweries typically use a stable water source such as well water, narai uses the fresh water from the mountains, flowing from an altitude of over 1,000m. The water originates from a spring near the watershed of the Shinano River and Kiso River, and is characterized by its clarity and smooth, rounded texture brought about by a rare “water hardness” of less than 25."
+        }
+      }
+    },
    "shops": {
      "title": "Shop list",
      "subtitle": "",
--- a/messages/ja.json
+++ b/messages/ja.json
@ -24,6 +24,15 @@
      "placeholder": "メールアドレス",
      "button": "登録する"
    },
+    "home": {
+      "previews": {
+        "about-narai": {
+          "title": "山の水、",
+          "subtitle": "空に一番近い酒",
+          "body": "標高約940mの日本でも有数の空に近い自然豊かな環境で醸造しています。多くの酒蔵が水の性質が安定している井戸水を使用しますが、naraiは標高1,000m以上から流れる天然の山水を使用。信濃川と木曽川の分水嶺付近の湧き水であるこの山水は、日本でも有数な「硬度25以下」の透明感と丸みのある滑らかな舌触りが特徴です。"
+        }
+      }
+    },
    "shops": {
      "title": "取り扱い店",
      "subtitle": "取り扱い店",
--- a/package.json
+++ b/package.json
@ -34,7 +34,8 @@
    "next-intl": "latest",
    "prettier-plugin-organize-imports": "^3.2.3",
    "react": "latest",
-    "react-dom": "latest"
+    "react-dom": "latest",
+    "react-intersection-observer": "^9.5.2"
  },
  "devDependencies": {
    "@tailwindcss/container-queries": "^0.1.1",
--- a/yarn.lock
+++ b/yarn.lock
@ -1294,6 +1294,7 @@ __metadata:
    prettier-plugin-tailwindcss: ^0.4.1
    react: latest
    react-dom: latest
+    react-intersection-observer: ^9.5.2
    tailwindcss: ^3.3.3
    typescript: 5.1.6
  languageName: unknown
@ -4127,6 +4128,15 @@ __metadata:
  languageName: node
  linkType: hard

+"react-intersection-observer@npm:^9.5.2":
+  version: 9.5.2
+  resolution: "react-intersection-observer@npm:9.5.2"
+  peerDependencies:
+    react: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
+  checksum: cdbe40544930d59fc3820bce017fb688910cbecd7baaf382387a3d60d98a36e1d1e4bc27a876775e99b2a9f86762286a29d7bca21f3345f653cff29850c2641d
+  languageName: node
+  linkType: hard
+
 "react-is@npm:^16.13.1":
  version: 16.13.1
  resolution: "react-is@npm:16.13.1"