From 40bccb63d12fc6684b5976a72f4fbdd492723821 Mon Sep 17 00:00:00 2001
From: Maxime Bouveron <maxime.bouveron@gmail.com>
Date: Tue, 26 Mar 2024 16:39:07 +0100
Subject: [PATCH 1/2] Change panel sizes logic

---
 src/app/[locale]/map/layout.tsx       | 14 ++++----------
 src/components/details.page.tsx       |  2 +-
 src/components/map-Wrapper.tsx        |  9 +--------
 src/components/map-menu.tsx           |  5 ++---
 src/components/map-sidebar.tsx        |  4 ++--
 src/components/observation-cta.tsx    |  4 ++--
 src/components/search-form.tsx        |  2 +-
 src/components/ui/navigation-menu.tsx |  4 +++-
 src/components/ui/scroll-area.tsx     |  2 +-
 9 files changed, 17 insertions(+), 29 deletions(-)

diff --git a/src/app/[locale]/map/layout.tsx b/src/app/[locale]/map/layout.tsx
index 99de9f0..c84bff3 100644
--- a/src/app/[locale]/map/layout.tsx
+++ b/src/app/[locale]/map/layout.tsx
@@ -32,22 +32,16 @@ export default async function MapLayout({ children }: Props) {
     <MapContextProvider defaultSettings={settings}>
       <main
         role="main"
-        className="grid h-full w-screen grid-cols-[1fr_1fr_1fr] grid-rows-1 justify-stretch overflow-x-hidden scroll-smooth"
+        className="grid h-full w-screen grid-cols-[100dvw_auto_100dvw] grid-rows-1 justify-stretch overflow-x-hidden scroll-smooth md:grid-cols-[300px_auto_1fr]"
       >
-        <MapSidebar
-          id="search"
-          className="z-[1001] w-screen lg:sticky lg:left-0 lg:w-[50vw] xl:w-[calc(100vw/3)]"
-        />
+        <MapSidebar id="search" className="z-[1001]" />
         <section
           id="content"
-          className="h-full w-screen pb-20 empty:hidden lg:w-[50vw] lg:scroll-ml-[50vw] xl:w-[calc(100vw/3)] xl:pb-0"
+          className="h-full w-[100dvw] empty:w-0 md:w-[350px] lg:w-[450px]"
         >
           {children}
         </section>
-        <MapWrapper
-          id="map"
-          className="w-screen lg:w-[50vw] xl:w-[calc(100vw/3)]"
-        />
+        <MapWrapper id="map" />
         <MapMenu />
       </main>
     </MapContextProvider>
diff --git a/src/components/details.page.tsx b/src/components/details.page.tsx
index 64c0b42..a30d20b 100644
--- a/src/components/details.page.tsx
+++ b/src/components/details.page.tsx
@@ -52,7 +52,7 @@ export default function DetailsPageUI({ content }: Props) {
         <h1 className="text-2xl font-extrabold tracking-tight lg:text-3xl">
           {content.name}
         </h1>
-        <div className="absolute right-0 top-0 flex rounded-bl-lg border border-t-0 bg-background">
+        <div className="absolute right-0 top-0 z-10 flex rounded-bl-lg border border-t-0 bg-background">
           {content.geometryCenter && (
             <ButtonCenterView
               latLng={
diff --git a/src/components/map-Wrapper.tsx b/src/components/map-Wrapper.tsx
index 51c3de4..facbe80 100644
--- a/src/components/map-Wrapper.tsx
+++ b/src/components/map-Wrapper.tsx
@@ -36,14 +36,7 @@ export default function MapWrapper({ className, ...props }: Props) {
   );
 
   return (
-    <section
-      {...props}
-      className={cn(
-        'h-full grow',
-        className,
-        pathName === '/map' && 'xl:w-[calc(100vw*2/3)]',
-      )}
-    >
+    <section {...props} className={cn('h-full grow', className)}>
       <Map />
     </section>
   );
diff --git a/src/components/map-menu.tsx b/src/components/map-menu.tsx
index 04e121c..19c050b 100644
--- a/src/components/map-menu.tsx
+++ b/src/components/map-menu.tsx
@@ -18,11 +18,10 @@ export default function MapMenu() {
     <nav className="max-w-4/5 fixed bottom-4 left-1/2 z-[1001] -translate-x-1/2 sm:w-max">
       <ul
         className={cn(
-          'flex items-stretch space-x-1 rounded-md bg-background p-1 xl:hidden ',
-          !hasContent && 'lg:hidden',
+          'flex items-stretch space-x-1 rounded-md bg-background/80 p-1 shadow-lg backdrop-blur-sm md:hidden',
         )}
       >
-        <li className="lg:hidden">
+        <li>
           <Link
             className={cn(
               'flex h-full items-center rounded-sm  px-3 py-1.5 text-center text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
diff --git a/src/components/map-sidebar.tsx b/src/components/map-sidebar.tsx
index d57f2a3..8dea14b 100644
--- a/src/components/map-sidebar.tsx
+++ b/src/components/map-sidebar.tsx
@@ -14,11 +14,11 @@ type Props = HTMLAttributes<HTMLElement>;
 export function MapSidebar({ className, ...props }: Props) {
   return (
     <section {...props} className={cn('flex flex-col bg-primary', className)}>
-      <div className="flex flex-col items-stretch gap-4 p-4 sm:flex-row sm:items-end">
+      <div className="flex flex-row flex-wrap items-end justify-center gap-4 p-4">
         <SearchForm />
         <ObservationCTA />
       </div>
-      <ScrollArea className="h-full pb-20">
+      <ScrollArea className="h-full">
         <MapFilters />
       </ScrollArea>
     </section>
diff --git a/src/components/observation-cta.tsx b/src/components/observation-cta.tsx
index d97eec1..4eb198c 100644
--- a/src/components/observation-cta.tsx
+++ b/src/components/observation-cta.tsx
@@ -18,8 +18,8 @@ export function ObservationCTA() {
   const t = useTranslations('observation');
   const params = useSearchParams();
   return (
-    <div className="flex justify-center">
-      <NavigationMenu>
+    <div className="flex grow justify-center">
+      <NavigationMenu delayDuration={500}>
         <NavigationMenuList>
           <NavigationMenuItem>
             <NavigationMenuTrigger>{t('labelButton')}</NavigationMenuTrigger>
diff --git a/src/components/search-form.tsx b/src/components/search-form.tsx
index 5ee2477..a7dc228 100644
--- a/src/components/search-form.tsx
+++ b/src/components/search-form.tsx
@@ -40,7 +40,7 @@ export default function SearchForm() {
   }, [searchParams]);
 
   return (
-    <form action="/map" className="grow" onSubmit={handleSubmit}>
+    <form action="/map" className="grow-[10] basis-80" onSubmit={handleSubmit}>
       <Label htmlFor={inputId}>{t('label')}</Label>
       <div className="flex w-full items-center space-x-2 rounded-md bg-input">
         <Input
diff --git a/src/components/ui/navigation-menu.tsx b/src/components/ui/navigation-menu.tsx
index 2acb180..09fd8dd 100644
--- a/src/components/ui/navigation-menu.tsx
+++ b/src/components/ui/navigation-menu.tsx
@@ -85,7 +85,9 @@ const NavigationMenuViewport = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
 >(({ className, ...props }, ref) => (
-  <div className={cn('absolute top-full flex justify-center')}>
+  <div
+    className={cn('absolute left-auto top-full flex justify-center md:left-0')}
+  >
     <NavigationMenuPrimitive.Viewport
       className={cn(
         'origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]',
diff --git a/src/components/ui/scroll-area.tsx b/src/components/ui/scroll-area.tsx
index 60f7e20..2b1a96d 100644
--- a/src/components/ui/scroll-area.tsx
+++ b/src/components/ui/scroll-area.tsx
@@ -14,7 +14,7 @@ const ScrollArea = React.forwardRef<
     className={cn('relative overflow-hidden', className)}
     {...props}
   >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit] pb-20 md:pb-0">
       {children}
     </ScrollAreaPrimitive.Viewport>
     <ScrollBar />

From bba99558dc4b7a7bfe6fa73022dc53f4b41cd5d6 Mon Sep 17 00:00:00 2001
From: Maxime Bouveron <maxime.bouveron@gmail.com>
Date: Wed, 3 Apr 2024 16:09:59 +0200
Subject: [PATCH 2/2] Add two-panels mode for tablets

---
 src/app/[locale]/map/layout.tsx | 4 ++--
 src/components/map-menu.tsx     | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/[locale]/map/layout.tsx b/src/app/[locale]/map/layout.tsx
index c84bff3..a379850 100644
--- a/src/app/[locale]/map/layout.tsx
+++ b/src/app/[locale]/map/layout.tsx
@@ -32,12 +32,12 @@ export default async function MapLayout({ children }: Props) {
     <MapContextProvider defaultSettings={settings}>
       <main
         role="main"
-        className="grid h-full w-screen grid-cols-[100dvw_auto_100dvw] grid-rows-1 justify-stretch overflow-x-hidden scroll-smooth md:grid-cols-[300px_auto_1fr]"
+        className="grid h-full w-screen grid-cols-[100dvw_auto_100dvw] grid-rows-1 justify-stretch overflow-x-hidden scroll-smooth md:grid-cols-[50dvw_auto_50dvw] lg:grid-cols-[300px_auto_1fr]"
       >
         <MapSidebar id="search" className="z-[1001]" />
         <section
           id="content"
-          className="h-full w-[100dvw] empty:w-0 md:w-[350px] lg:w-[450px]"
+          className="h-full w-[100dvw] empty:w-0 md:w-[50dvw] lg:w-[350px] xl:w-[450px]"
         >
           {children}
         </section>
diff --git a/src/components/map-menu.tsx b/src/components/map-menu.tsx
index 19c050b..ccca02f 100644
--- a/src/components/map-menu.tsx
+++ b/src/components/map-menu.tsx
@@ -18,7 +18,7 @@ export default function MapMenu() {
     <nav className="max-w-4/5 fixed bottom-4 left-1/2 z-[1001] -translate-x-1/2 sm:w-max">
       <ul
         className={cn(
-          'flex items-stretch space-x-1 rounded-md bg-background/80 p-1 shadow-lg backdrop-blur-sm md:hidden',
+          'flex items-stretch space-x-1 rounded-md bg-background/80 p-1 shadow-lg backdrop-blur-sm lg:hidden',
         )}
       >
         <li>
@@ -33,7 +33,7 @@ export default function MapMenu() {
           </Link>
         </li>
         {hasContent && (
-          <li>
+          <li className="md:hidden">
             <Link
               className={cn(
                 'flex h-full items-center rounded-sm px-3 py-1.5 text-center text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',