Add two-panels mode for tablets

Georiviere · Apr 3, 2024 · bba9955 · bba9955
1 parent 40bccb6
commit bba9955
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git 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
@@ -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',