From 765606bac5eff813fa762d93ac2500a355e20cbd Mon Sep 17 00:00:00 2001
From: Sol Irvine <sol@zenzen.io>
Date: Sat, 19 Aug 2023 16:01:05 +0900
Subject: [PATCH] wip: More nav improvements

---
 components/layout/footer.tsx       |  4 ++--
 components/layout/menu/modal.tsx   | 10 +++++++--
 components/layout/navbar/index.tsx | 35 ++++++++++++++++++------------
 3 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/components/layout/footer.tsx b/components/layout/footer.tsx
index f7413c1a5..e8d6c7aea 100644
--- a/components/layout/footer.tsx
+++ b/components/layout/footer.tsx
@@ -51,10 +51,10 @@ export default async function Footer({ cart }: { cart?: 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" />
+                    <InstagramIcon className="h-6 stroke-transparent transition-all ease-in-out group-hover:scale-110" />
                   </Link>
                   <Link href="https://www.facebook.com/suginomoribrewery" className="group">
-                    <FacebookIcon className="h-8 stroke-transparent transition-all ease-in-out group-hover:scale-110" />
+                    <FacebookIcon className="h-6 stroke-transparent transition-all ease-in-out group-hover:scale-110" />
                   </Link>
                 </div>
               </div>
diff --git a/components/layout/menu/modal.tsx b/components/layout/menu/modal.tsx
index 79d2b51cd..c60200a55 100644
--- a/components/layout/menu/modal.tsx
+++ b/components/layout/menu/modal.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { Dialog, Transition } from '@headlessui/react';
+import clsx from 'clsx';
 import CloseIcon from 'components/icons/close';
 import MenuIcon from 'components/icons/menu';
 import { useLocale, useTranslations } from 'next-intl';
@@ -8,7 +9,7 @@ import Link from 'next/link';
 import { Fragment, useRef, useState } from 'react';
 import { LanguageControl, SupportedLocale } from '../navbar/language-control';
 
-export function MenuModal() {
+export function MenuModal({ scrolled }: { scrolled: boolean }) {
   const t = useTranslations('Index');
   const locale = useLocale();
   let [isOpen, setIsOpen] = useState(false);
@@ -56,7 +57,12 @@ 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-6">
+                <div
+                  className={clsx(
+                    'fixed right-5 top-6 z-40 px-2 py-1',
+                    scrolled ? 'md:top-6' : 'md:top-0'
+                  )}
+                >
                   <div className="flex flex-row space-x-6">
                     <LanguageControl lang={locale as SupportedLocale} />
 
diff --git a/components/layout/navbar/index.tsx b/components/layout/navbar/index.tsx
index a7870bdf0..f45df36e7 100644
--- a/components/layout/navbar/index.tsx
+++ b/components/layout/navbar/index.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { Transition } from '@headlessui/react';
 import clsx from 'clsx';
 import CartModal from 'components/cart/modal';
 import OpenCart from 'components/cart/open-cart';
@@ -18,25 +19,31 @@ export default function Navbar({ cart, locale }: { cart?: Cart; locale?: Support
 
   return (
     <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 className="fixed top-0 z-20 w-full bg-dark/20 backdrop-blur-sm">
+        <Transition
+          show={!!ref && !inView}
+          enter="transition ease duration-150 transform"
+          enterFrom="opacity-0 -translate-y-12"
+          enterTo="opacity-100 translate-y-0"
+          leave="transition ease duration-0 transform"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="mx-auto flex max-w-screen-xl flex-row items-start justify-between">
+            <div className="px-4 py-2">
+              <LogoNamemark className={clsx('w-[260px]', 'fill-current')} />
             </div>
-            <nav className="flex flex-row items-center space-x-4">
+            <nav className="flex flex-row items-center space-x-4 px-6">
               <Suspense fallback={<OpenCart />}>
                 <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 />
+                  <MenuModal scrolled={inView} />
                 </div>
               </Suspense>
             </nav>
           </div>
-        </div>
-      )}
+        </Transition>
+      </div>
       <div
         className={clsx('mx-auto flex max-w-screen-xl flex-row items-start justify-between px-6')}
       >
@@ -44,16 +51,16 @@ export default function Navbar({ cart, locale }: { cart?: Cart; locale?: Support
           <LogoNamemark
             className={clsx(
               inView ? 'w-[260px] md:w-[600px]' : 'w-[260px] md:w-[260px]',
-              'fill-current pt-12 transition-all duration-150'
+              'fill-current pt-4 transition-all duration-150 md:pt-12'
             )}
           />
         </div>
-        <nav className="flex flex-row space-x-4 pt-6">
+        <nav className="flex flex-row space-x-4 px-2 md: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 />
+              <MenuModal scrolled={inView} />
             </div>
           </Suspense>
         </nav>