Admin layout tweaks

composer.json

@@ -20,7 +20,7 @@
   "require-dev": {
     "mockery/mockery": "^1.4.2",
     "orchestra/testbench": "^6.0",
-    "pestphp/pest": "^0.3",
+    "pestphp/pest": "^1.0",
     "vimeo/psalm": "^4.3",
     "psalm/plugin-laravel": "^1.4"
   },

dist/mix-manifest.json

@@ -1,4 +1,4 @@
 {
     "/js/filament.js": "/js/filament.js?id=575bb8a26dd76080eafa",
-    "/css/filament.css": "/css/filament.css?id=4800a6c64c508b4b2553"
+    "/css/filament.css": "/css/filament.css?id=023aff7cc5ff2ee37f96"
 }

package.json

@@ -26,7 +26,7 @@
     "cross-env": "^7.0.3",
     "dotenv": "^8.2.0",
     "laravel-mix": "^6.0.9",
-    "postcss": "^8.2.3",
+    "postcss": "^8.2.4",
     "postcss-import": "^14.0.0",
     "postcss-nested": "^5.0.3",
     "prettier": "^2.2.1",

resources/views/components/app-header.blade.php

@@ -3,8 +3,8 @@
     id="banner"
     {{ $attributes->merge(['class' => 'bg-gray-900 text-gray-500 flex flex-col space-y-4 shadow-lg md:shadow-none']) }}>
     <x-filament::app-branding />
-    <x-filament-nav />
-    <x-filament::dropdown class="w-full text-left flex-grow flex items-center p-4 space-x-3 transition-colors duration-200 hover:text-white hover:bg-gray-800" id="dropdown-user">
+    <x-filament-nav class="flex-grow px-4 overflow-y-auto" />
+    <x-filament::dropdown class="w-full text-left flex-grow flex items-center px-4 py-3 space-x-3 transition-colors duration-200 hover:text-white hover:bg-gray-800" id="dropdown-user">
         <x-filament-avatar :user="Auth::user()" :size="32" class="flex-shrink-0 w-8 h-8 rounded-full" />
         <span class="flex-grow text-sm leading-tight font-semibold">{{ Auth::user()->name }}</span>
 

resources/views/components/nav.blade.php

@@ -1,4 +1,4 @@
-<nav aria-label="primary" class="flex-grow px-4">
+<nav aria-label="primary" {{ $attributes }}>
     <ol class="space-y-1">
         @foreach($nav as $item)
             <li>

resources/views/layouts/app.blade.php

@@ -4,16 +4,16 @@
 
 @section('content')
     <a href="#content" class="sr-only">Skip to content</a>
-    <div class="relative overflow-hidden flex min-h-screen" 
+    <div class="relative overflow-hidden" 
         role="group" 
         tabindex="-1" 
         x-data="{ headerIsOpen: false }" 
         @keydown.window.escape="headerIsOpen = false"
         x-on:resize.window="if (window.outerWidth > 768) headerIsOpen = false"
     >
-        <div class="flex-shrink-0 flex w-56 absolute md:relative z-20 inset-y-0 transform transition-transform duration-200 md:translate-x-0"
+        <div class="w-56 fixed z-20 h-screen transform transition-transform duration-200 md:translate-x-0 flex"
             :class="headerIsOpen ? 'translate-x-0' : '-translate-x-full'">
-            <x-filament::app-header class="flex-grow" />
+            <x-filament::app-header class="flex-grow overflow-y-auto" />
             <button 
                 type="button" 
                 aria-controls="banner" 
@@ -26,7 +26,7 @@ class="md:hidden absolute top-2 right-0 transform translate-x-full p-3 text-gray
             </button>
         </div>
         <span class="absolute z-10 inset-0 bg-gray-800 bg-opacity-50 md:hidden" x-cloak x-show="headerIsOpen" @click="headerIsOpen = false"></span>
-        <div class="flex-grow w-full flex flex-col">
+        <div class="min-h-screen w-full md:pl-56 flex flex-col">
             <header class="p-4 md:p-6 flex justify-between items-center space-x-4">
                 <div class="flex items-center">
                     <button type="button" aria-controls="banner" @click.prevent="headerIsOpen = true" :aria-expanded="headerIsOpen" class="md:hidden text-blue-600 hover:text-blue-800 transition-colors duration-200 mr-4">