feat: branding

app/Providers/Filament/AdminPanelProvider.php

@@ -39,6 +39,8 @@ public function panel(Panel $panel): Panel
             ->sidebarCollapsibleOnDesktop()
             ->maxContentWidth(MaxWidth::Full)
             ->viteTheme('resources/css/filament/common/theme.css')
+            ->brandLogo(fn () => view('filament.brand'))
+            ->brandLogoHeight('3rem')
             ->discoverResources(
                 in: app_path('Filament/Admin/Resources'),
                 for: 'App\\Filament\\Admin\\Resources',

app/Providers/Filament/ShelterPanelProvider.php

@@ -42,6 +42,8 @@ public function panel(Panel $panel): Panel
             ->sidebarCollapsibleOnDesktop()
             ->maxContentWidth(MaxWidth::Full)
             ->viteTheme('resources/css/filament/common/theme.css')
+            ->brandLogo(fn () => view('filament.brand'))
+            ->brandLogoHeight('3rem')
             ->discoverResources(
                 in: app_path('Filament/Shelter/Resources'),
                 for: 'App\\Filament\\Shelter\\Resources',

app/Providers/FilamentServiceProvider.php

@@ -189,13 +189,23 @@ protected function configurePages(): void
 
     protected function renderHooks(): void
     {
+        FilamentView::registerRenderHook(
+            PanelsRenderHook::HEAD_START,
+            fn () => view('filament.favicons')
+        );
+
         FilamentView::registerRenderHook(
             PanelsRenderHook::FOOTER,
             fn () => view('filament.version', [
                 'version' => config()->get('app.version'),
             ]),
         );
 
+        FilamentView::registerRenderHook(
+            PanelsRenderHook::SIDEBAR_NAV_END,
+            fn () => view('filament.sidebar-footer')
+        );
+
         FilamentView::registerRenderHook(
             PanelsRenderHook::USER_MENU_PROFILE_AFTER,
             fn () => view('components.locale-switcher.panel', [

config/blade-icons.php

@@ -0,0 +1,185 @@
+<?php
+
+declare(strict_types=1);
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Icons Sets
+    |--------------------------------------------------------------------------
+    |
+    | With this config option you can define a couple of
+    | default icon sets. Provide a key name for your icon
+    | set and a combination from the options below.
+    |
+    */
+
+    'sets' => [
+
+        'default' => [
+
+            /*
+            |-----------------------------------------------------------------
+            | Icons Path
+            |-----------------------------------------------------------------
+            |
+            | Provide the relative path from your app root to your SVG icons
+            | directory. Icons are loaded recursively so there's no need to
+            | list every sub-directory.
+            |
+            | Relative to the disk root when the disk option is set.
+            |
+            */
+
+            'path' => 'resources/svg',
+
+            /*
+            |-----------------------------------------------------------------
+            | Filesystem Disk
+            |-----------------------------------------------------------------
+            |
+            | Optionally, provide a specific filesystem disk to read
+            | icons from. When defining a disk, the "path" option
+            | starts relatively from the disk root.
+            |
+            */
+
+            'disk' => '',
+
+            /*
+            |-----------------------------------------------------------------
+            | Default Prefix
+            |-----------------------------------------------------------------
+            |
+            | This config option allows you to define a default prefix for
+            | your icons. The dash separator will be applied automatically
+            | to every icon name. It's required and needs to be unique.
+            |
+            */
+
+            'prefix' => 'icon',
+
+            /*
+            |-----------------------------------------------------------------
+            | Fallback Icon
+            |-----------------------------------------------------------------
+            |
+            | This config option allows you to define a fallback
+            | icon when an icon in this set cannot be found.
+            |
+            */
+
+            'fallback' => '',
+
+            /*
+            |-----------------------------------------------------------------
+            | Default Set Classes
+            |-----------------------------------------------------------------
+            |
+            | This config option allows you to define some classes which
+            | will be applied by default to all icons within this set.
+            |
+            */
+
+            'class' => '',
+
+            /*
+            |-----------------------------------------------------------------
+            | Default Set Attributes
+            |-----------------------------------------------------------------
+            |
+            | This config option allows you to define some attributes which
+            | will be applied by default to all icons within this set.
+            |
+            */
+
+            'attributes' => [
+                // 'width' => 50,
+                // 'height' => 50,
+            ],
+
+        ],
+
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Global Default Classes
+    |--------------------------------------------------------------------------
+    |
+    | This config option allows you to define some classes which
+    | will be applied by default to all icons.
+    |
+    */
+
+    'class' => '',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Global Default Attributes
+    |--------------------------------------------------------------------------
+    |
+    | This config option allows you to define some attributes which
+    | will be applied by default to all icons.
+    |
+    */
+
+    'attributes' => [
+        // 'width' => 50,
+        // 'height' => 50,
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Global Fallback Icon
+    |--------------------------------------------------------------------------
+    |
+    | This config option allows you to define a global fallback
+    | icon when an icon in any set cannot be found. It can
+    | reference any icon from any configured set.
+    |
+    */
+
+    'fallback' => '',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Components
+    |--------------------------------------------------------------------------
+    |
+    | These config options allow you to define some
+    | settings related to Blade Components.
+    |
+    */
+
+    'components' => [
+
+        /*
+        |----------------------------------------------------------------------
+        | Disable Components
+        |----------------------------------------------------------------------
+        |
+        | This config option allows you to disable Blade components
+        | completely. It's useful to avoid performance problems
+        | when working with large icon libraries.
+        |
+        */
+
+        'disabled' => false,
+
+        /*
+        |----------------------------------------------------------------------
+        | Default Icon Component Name
+        |----------------------------------------------------------------------
+        |
+        | This config option allows you to define the name
+        | for the default Icon class component.
+        |
+        */
+
+        'default' => 'icon',
+
+    ],
+
+];

lang/en/app.php

@@ -9,6 +9,7 @@
         'shelter_configuration' => 'Shelter configuration',
         'manual' => 'Manual',
     ],
+    'developed_by' => 'Developed by',
     'yes' => 'Yes',
     'no' => 'No',
     'submit' => 'Submit',

resources/css/filament/common/theme.css

@@ -2,3 +2,7 @@
 @import '/vendor/awcodes/filament-table-repeater/resources/css/plugin.css';
 
 @config 'tailwind.config.js';
+
+.fi-logo {
+    @apply justify-center w-full;
+}

resources/views/filament/brand.blade.php

@@ -0,0 +1,8 @@
+<div class="flex items-center gap-3 select-none">
+    <x-icon-logo class="h-10 shrink-0" />
+
+    <span
+        class="text-2xl font-[Verdana] underline whitespace-nowrap text-sky-700 dark:text-sky-300 leading-0 underline-offset-8 uppercase h-10">
+        {{ config('app.name') }}
+    </span>
+</div>

resources/views/filament/favicons.blade.php

@@ -0,0 +1,4 @@
+<link rel="icon" type="image/png" href="/favicon/favicon-96x96.png" sizes="96x96" />
+<link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg" />
+<link rel="shortcut icon" href="/favicon.ico" />
+<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />

resources/views/filament/sidebar-footer.blade.php

@@ -0,0 +1,16 @@
+<aside
+    class="flex flex-col items-start justify-end flex-1 gap-3 "
+    x-show="$store.sidebar.isOpen"
+    x-transition:enter="lg:transition lg:delay-100"
+    x-transition:enter-start="opacity-0"
+    x-transition:enter-end="opacity-100">
+
+    <h2
+        class="w-full pt-6 text-sm font-medium leading-6 text-gray-500 fi-sidebar-group-label">
+        @lang('app.developed_by')
+    </h2>
+
+    <a href="https://www.commitglobal.org" target="_blank" rel="noopener noreferrer" tabindex="-1">
+        <x-icon-commitglobal class="h-8 text-gray-950 dark:text-gray-100" />
+    </a>
+</aside>