WIP: dashboard / app layout

composer.json

@@ -8,7 +8,9 @@
   ],
   "license": "MIT",
   "require": {
-    "livewire/livewire": "^2.2"
+    "blade-ui-kit/blade-heroicons": "^0.3",
+    "livewire/livewire": "^2.2",
+    "watson/active": "^6.0"
   },
   "require-dev": {
     "mockery/mockery": "^1.0",

dist/css/filament.css.map

@@ -1 +1 @@
-{"version":3,"sources":["webpack:///./resources/css/base.css","webpack:///./<no source>","webpack:///./resources/css/components/button.css","webpack:///./node_modules/tailwindcss/base.css","webpack:///./node_modules/tailwindcss/components.css","webpack:///./node_modules/tailwindcss/utilities.css"],"names":[],"mappings":"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","file":"css/filament.css","sourcesContent":["/**\n * Smoothly animate the scroll position, instead of a straight jump.\n */\nhtml {\n  scroll-behavior: smooth;\n}\n\n/**\n   * ::selection selector: color, background, cursor, and outline.\n   */\n::selection {\n  @apply bg-blue-600 text-white;\n}\n\n/**\n   * `x-cloak` attributes are removed from elements when Alpine initializes.\n   * This is useful for hiding pre-initialized DOM.\n   *\n   * @link https://github.com/alpinejs/alpine#x-cloak\n   *\n   */\n[x-cloak] {\n  @apply hidden;\n}\n\n/**\n   * Selectively disable the default focus style by selecting for the case when the polyfill\n   * is loaded and [data-focus-visible-added] attribute is not applied to the element:\n   *\n   * @link https://github.com/WICG/focus-visible#2-update-your-css\n   */\n.js-focus-visible :focus:not([data-focus-visible-added]) {\n  @apply outline-none;\n}\n",null,".btn {\n  @apply font-medium py-2 px-4 bg-orange-800 text-white rounded transition duration-200 shadow inline-block relative;\n\n  &:focus {\n    @apply shadow-outline outline-none;\n  }\n\n  &:hover {\n    @apply bg-orange-900;\n  }\n\n  &[disabled] {\n    @apply opacity-50;\n  }\n}\n","@tailwind base;\n","@tailwind components;\n","@tailwind utilities;\n"],"sourceRoot":""}
+{"version":3,"sources":["webpack:///./resources/css/base.css","webpack:///./<no source>","webpack:///./resources/css/components/button.css","webpack:///./node_modules/tailwindcss/base.css","webpack:///./node_modules/tailwindcss/components.css","webpack:///./node_modules/tailwindcss/utilities.css"],"names":[],"mappings":"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","file":"css/filament.css","sourcesContent":["/**\n * Smoothly animate the scroll position, instead of a straight jump.\n */\nhtml {\n  scroll-behavior: smooth;\n}\n\n/**\n   * ::selection selector: color, background, cursor, and outline.\n   */\n::selection {\n  @apply bg-blue-600 text-white;\n}\n\n/**\n   * `x-cloak` attributes are removed from elements when Alpine initializes.\n   * This is useful for hiding pre-initialized DOM.\n   *\n   * @link https://github.com/alpinejs/alpine#x-cloak\n   *\n   */\n[x-cloak] {\n  @apply hidden;\n}\n\n/**\n   * Selectively disable the default focus style by selecting for the case when the polyfill\n   * is loaded and [data-focus-visible-added] attribute is not applied to the element:\n   *\n   * @link https://github.com/WICG/focus-visible#2-update-your-css\n   */\n.js-focus-visible :focus:not([data-focus-visible-added]) {\n  @apply outline-none;\n}\n",null,".btn {\n  @apply font-medium py-2 px-4 bg-orange-800 text-white rounded transition duration-200 shadow inline-block relative;\n\n  &:focus {\n    @apply shadow-outline outline-none;\n  }\n\n  &:hover {\n    @apply bg-orange-900;\n  }\n\n  &[disabled] {\n    @apply opacity-50;\n  }\n}\n","@tailwind base;\n","@tailwind components;\n","@tailwind utilities;\n"],"sourceRoot":""}

dist/mix-manifest.json

@@ -1,6 +1,6 @@
 {
     "/js/filament.js": "/js/filament.js?id=1faaac0d122aa02f8bf6",
-    "/css/filament.css": "/css/filament.css?id=384f8bb6a38d9216c8b9",
+    "/css/filament.css": "/css/filament.css?id=7ce5aa4d102819a89a73",
     "/js/filament.js.map": "/js/filament.js.map?id=7eb1b0da03c81ab3ba1b",
-    "/css/filament.css.map": "/css/filament.css.map?id=11795a8f46e7e821465f"
+    "/css/filament.css.map": "/css/filament.css.map?id=da5edeec961d813acf69"
 }

resources/views/components/nav-link.blade.php

@@ -0,0 +1,13 @@
+@props([
+    'path',
+    'active',
+    'label',
+    'heroicon'
+])
+
+<a href="#" {{ $attributes->merge(['class' => 'py-2 px-3 flex items-center space-x-3 rounded transition-color duration-200 hover:text-white hover:bg-gray-800'.active($active, ' text-white bg-gray-800', 'text-gray-400')]) }}>
+    @if (!empty($heroicon))
+        <x-dynamic-component :component="'heroicon-'.$heroicon" class="flex-shrink-0 w-4 h-4" />
+    @endif
+    <span class="flex-grow text-sm leading-tight font-semibold">{{ $label }}</span>
+</a>

resources/views/components/nav.blade.php

@@ -0,0 +1,11 @@
+<nav aria-label="primary" class="flex-grow px-4">
+    <ol>
+        <li>
+            <x-filament::nav-link 
+                :path="route('filament.dashboard')" 
+                active="filament.dashboard" 
+                :label="__('Dashboard')" 
+                heroicon="o-home" />
+        </li>
+    </ol>
+</nav>

resources/views/layouts/app.blade.php

@@ -7,16 +7,14 @@
     <div class="flex min-h-screen" role="group" tabindex="-1">
         <header role="banner" class="bg-gray-900 text-gray-500 w-56 flex flex-col space-y-6">
             <a href="{{ url('/') }}" rel="home" class="p-4 flex items-center space-x-4 transition-colors duration-200 hover:text-gray-400 hover:bg-black" target="_blank" rel="noopener noreferrer">
-                <x-filament::app-icon class="w-10 h-10" />
+                <x-filament::app-icon class="w-10 h-10 fill-current" />
                 <span class="text-sm leading-tight font-semibold">{{ config('app.name') }}</span>
             </a>
-            <nav aria-label="primary" class="flex-grow px-6">
-                nav...
-            </nav>
+            <x-filament::nav />
             <livewire:filament-logout class="p-4 text-xs bg-black" />
         </header>
         <div class="flex-grow flex flex-col">
-            <header class="p-6 flex justify-between items-center">
+            <header class="p-6 flex justify-between items-center space-x-4">
                 <h1 class="font-light text-2xl leading-tight text-orange-700">{{ $title }}</h1>
                 {{ $actions ?? null }}
             </header>

resources/views/livewire/dashboard.blade.php

@@ -1,5 +1,5 @@
 
-<div class="p-6 bg-gray-100 shadow-lg">
+<div class="p-6 bg-white shadow-lg">
     <div class="text-gray-500 rounded border border-dashed border-current h-64 flex items-center justify-center">
         {{ config('app.name') }} Dashboard
     </div>