Adds basic mobile-first handling to the layout, still needs to be improved on but the nav now starts at the bottom and it helps as bit in small screens

resources/css/etc/layout.css

@@ -5,12 +5,18 @@ html {
 body {
     @apply m-0 p-0 w-dvw h-dvh min-w-dvw min-h-dvh bg-gray-100 font-sans antialiased;
 
+    /**
+     * app container
+     * on mobile, <main> is the viewport and <nav> is fixed to the bottom
+     **/
     &#app {
-        @apply grid;
-        grid-template-columns: 5rem auto;
-        grid-template-rows: 1fr 0;
+        @apply grid grid-cols-1;
+        grid-template-rows: 1fr 3.5rem;
     }
 
+    /**
+     * auth container
+     **/
     &#auth {
         @apply flex items-center justify-center;
 
@@ -23,24 +29,30 @@ body {
         }
     }
 
-    /* primary app navigation on the left */
+    /**
+     * primary app navigation
+     * starts fixed at the bottom on mobile, then moves to the left
+     **/
     > nav {
-        @apply w-20 flex flex-col items-center justify-between;
+        @apply flex flex-row items-center justify-between px-4 pb-2 order-1;
 
-        /* top items */
+        /* app nav items */
         .top {
-            @apply flex flex-col items-center pt-6 2xl:pt-8 mt-2px;
+            @apply flex flex-row items-center;
+
+            .home {
+                @apply hidden;
+            }
         }
 
-        /* bottom items */
-
+        /* user items */
         .bottom {
-            @apply flex flex-col items-center pb-6 2xl:pb-8;
+            @apply flex flex-row items-center;
         }
 
         /* app buttons */
         menu {
-            @apply flex flex-col gap-1 items-center mt-6;
+            @apply flex flex-row gap-1 items-center;
 
             li.app-button {
 
@@ -222,18 +234,6 @@ main {
         }
     }
 }
-@media (width >= 96rem) { /* 2xl */
-    main {
-        aside {
-            > h1 {
-                @apply h-22;
-            }
-        }
-        article {
-            grid-template-rows: 5.5rem auto;
-        }
-    }
-}
 
 /* app logo */
 .logo {
@@ -255,3 +255,56 @@ main {
         transform: translateY(0);
     }
 }
+
+/**
+ * desktop handling
+ */
+
+/* show app nav on the left at md */
+@media (width >= theme(--breakpoint-md)) {
+
+    body#app {
+        grid-template-columns: 5rem auto;
+        grid-template-rows: 1fr 0;
+
+        > nav {
+            @apply relative w-20 flex-col items-center justify-between px-0 pb-0 order-0;
+
+            .top {
+                @apply flex-col pt-6 2xl:pt-8 mt-2px;
+
+                .home {
+                    @apply flex;
+                }
+            }
+
+            .bottom {
+                @apply flex-col pb-6;
+            }
+
+            menu {
+                @apply flex-col mt-6;
+
+                li.app-button {
+                    svg {
+                        @apply w-7 h-7;
+                    }
+                }
+            }
+        }
+    }
+}
+
+/* increase size of some things at 2xl */
+@media (width >= theme(--breakpoint-2xl)) { /* 96rem */
+    main {
+        aside {
+            > h1 {
+                @apply h-22;
+            }
+        }
+        article {
+            grid-template-rows: 5.5rem auto;
+        }
+    }
+}

resources/views/components/app/nav-button.blade.php

@@ -20,7 +20,7 @@
 <li class="app-button">
     <a {{ $attributes->merge(['class' => $classes]) }} aria-label="{{ $label }}">
         @if ($iconComponent)
-        <x-dynamic-component :component="$iconComponent" class="w-7 h-7" />
+        <x-dynamic-component :component="$iconComponent" />
         @endif
     </a>
 </li>

resources/views/layouts/navigation.blade.php

@@ -2,7 +2,7 @@
     <!-- top -->
     <section class="top">
         <!-- logo -->
-        <a href="{{ route('dashboard') }}">
+        <a href="{{ route('dashboard') }}" class="home">
             <x-application-logo class="logo logo--app" />
         </a>
 
@@ -35,14 +35,4 @@
             <x-icon-user-circle class="w-7 h-7" />
         </x-button.icon>
     </div>
-
-    <!-- Hamburger -->
-    <div class="-me-2 flex items-center sm:hidden">
-        <button @click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
-            <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
-                <path :class="{'hidden': open, 'inline-flex': ! open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
-                <path :class="{'hidden': ! open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-            </svg>
-        </button>
-    </div>
 </nav>