{"id":31662151,"url":"https://github.com/solutionforest/filament-header-select","last_synced_at":"2025-10-07T19:49:26.409Z","repository":{"id":313289999,"uuid":"1049722927","full_name":"solutionforest/filament-header-select","owner":"solutionforest","description":"A modern header navigation component for Filament Admin with global rounded styling and proper color system.","archived":false,"fork":false,"pushed_at":"2025-09-05T02:36:44.000Z","size":47,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-05T04:21:32.557Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Blade","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/solutionforest.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-03T12:01:20.000Z","updated_at":"2025-09-05T02:36:47.000Z","dependencies_parsed_at":"2025-09-05T04:21:34.422Z","dependency_job_id":"e8d963aa-e2b8-4020-b22f-d87a119be57b","html_url":"https://github.com/solutionforest/filament-header-select","commit_stats":null,"previous_names":["solutionforest/filament-header-select"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/solutionforest/filament-header-select","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solutionforest%2Ffilament-header-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solutionforest%2Ffilament-header-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solutionforest%2Ffilament-header-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solutionforest%2Ffilament-header-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/solutionforest","download_url":"https://codeload.github.com/solutionforest/filament-header-select/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solutionforest%2Ffilament-header-select/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278838019,"owners_count":26054720,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-07T02:00:06.786Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-10-07T19:49:17.266Z","updated_at":"2025-10-07T19:49:26.401Z","avatar_url":"https://github.com/solutionforest.png","language":"Blade","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003ca href=\"https://solutionforest.com\" target=\"_blank\"\u003e\u003cimg src=\"https://github.com/solutionforest/.github/blob/main/docs/images/sf.png?raw=true\" width=\"150\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n## About Solution Forest\n\n[Solution Forest](https://solutionforest.com) Web development agency based in Hong Kong. We help customers to solve their problems. We Love Open Soruces. \n\nWe have built a collection of best-in-class products:\n\n- [InspireCMS](https://inspirecms.net): A full-featured Laravel CMS with everything you need out of the box. Build smarter, ship faster with our complete content management solution.\n- [Filaletter](https://filaletter.solutionforest.net): Filaletter - Filament Newsletter Plugin\n- [Website CMS Management](https://filamentphp.com/plugins/solution-forest-cms-website): A hands-on Filament CMS plugin for those who prefer more manual control over their website content management.\n\n# Filament Header Select\n\nA modern header navigation component for Filament Admin with **global rounded styling** and **proper color system**.\n\n## ✨ Features\n\n✅ **Global Rounded Styling** - Apply consistent rounded corners to all navigation elements  \n✅ **Filament Color System** - Uses native Filament colors (primary, gray, info, success, warning, danger)  \n✅ **URL Navigation** - Direct links to pages  \n✅ **Dropdown Selects** - Interactive dropdowns with onChange callbacks  \n✅ **Dynamic Options** - Refresh dropdown options from database  \n✅ **No Selection Highlighting** - Clean UI without persistent highlighting  \n✅ **Responsive Design** - Desktop-optimized, mobile-hidden  \n\n\u003cimg width=\"3840\" height=\"2160\" alt=\"HeaderSelect\" src=\"https://github.com/user-attachments/assets/ad780100-3cf4-4701-823d-2f6bc5f411c0\" /\u003e\n\n## Installation\n\n```bash\ncomposer require solution-forest/filament-header-select\n```\n\n## Quick Start\n\n```php\nuse SolutionForest\\FilamentHeaderSelect\\HeaderSelectPlugin;\nuse SolutionForest\\FilamentHeaderSelect\\Components\\HeaderSelect;\n\npublic function panel(Panel $panel): Panel\n{\n    return $panel\n        -\u003eplugins([\n            HeaderSelectPlugin::make()\n                -\u003erounded('rounded-lg') // Global rounded corners\n                -\u003eselects([\n                    // URL Link\n                    HeaderSelect::make('admin')\n                        -\u003elabel('Admin')\n                        -\u003eurl(fn() =\u003e route('filament.admin.pages.dashboard'))\n                        -\u003ecolor('primary'),\n                        \n                    // Dropdown with Navigation\n                    HeaderSelect::make('agent_config')\n                        -\u003elabel('Agent Config')\n                        -\u003eoptions([\n                            'my_agent_1' =\u003e 'My Agent 2025-08-29 16:24',\n                            'my_agent_2' =\u003e 'My Agent 2025-08-29 16:20',\n                            'new_agent' =\u003e '+ New AI Agent',\n                        ])\n                        -\u003eicon('heroicon-o-cog-6-tooth')\n                        -\u003ecolor('info')\n                        -\u003ekeepOriginalLabel(true)\n                        -\u003erefreshable(true)\n                        -\u003eonChange(function ($value) {\n                            return match($value) {\n                                'my_agent_1' =\u003e '/admin/agents/my-agent-1',\n                                'my_agent_2' =\u003e '/admin/agents/my-agent-2',\n                                'new_agent' =\u003e '/admin/agents/create',\n                                default =\u003e null,\n                            };\n                        }),\n                ])\n        ]);\n}\n```\n\n## Configuration\n\n### Global Rounded Corners\n```php\nHeaderSelectPlugin::make()\n    -\u003erounded('rounded-lg')      // Large rounded corners\n    -\u003erounded('rounded-full')    // Pill-like styling\n```\n\n### Colors\n```php\nHeaderSelect::make('item')\n    -\u003ecolor('primary')    // Indigo blue\n    -\u003ecolor('gray')       // Neutral gray\n    -\u003ecolor('info')       // Blue\n    -\u003ecolor('success')    // Green\n    -\u003ecolor('warning')    // Amber\n    -\u003ecolor('danger')     // Red\n```\n\n## Methods\n\n| Method | Description | Example |\n|--------|-------------|---------|\n| `label(string $label)` | Set display label | `-\u003elabel('Admin')` |\n| `url(string\\|Closure $url)` | Set navigation URL | `-\u003eurl('/admin')` |\n| `options(array\\|Closure $options)` | Set dropdown options | `-\u003eoptions(['key' =\u003e 'Label'])` |\n| `color(string $color)` | Set color theme | `-\u003ecolor('primary')` |\n| `icon(string $icon)` | Set Heroicon | `-\u003eicon('heroicon-o-home')` |\n| `keepOriginalLabel(bool $keep)` | Keep original label | `-\u003ekeepOriginalLabel(true)` |\n| `refreshable(bool $refreshable)` | Add refresh button | `-\u003erefreshable(true)` |\n| `onChange(Closure $callback)` | Handle selection changes | `-\u003eonChange(fn($value) =\u003e route('page', $value))` |\n## Examples\n\n### URL Navigation\n```php\nHeaderSelect::make('dashboard')\n    -\u003elabel('Dashboard')\n    -\u003eurl(fn() =\u003e route('filament.admin.pages.dashboard'))\n    -\u003eicon('heroicon-o-home')\n    -\u003ecolor('primary')\n```\n\n### Dropdown with Redirect\n```php\nHeaderSelect::make('categories')\n    -\u003elabel('Categories')\n    -\u003eoptions([\n        'electronics' =\u003e 'Electronics',\n        'clothing' =\u003e 'Clothing',\n        'books' =\u003e 'Books',\n    ])\n    -\u003eicon('heroicon-o-squares-2x2')\n    -\u003ecolor('success')\n    -\u003eonChange(function ($value) {\n        return \"/admin/categories/{$value}\";\n    })\n```\n\n### Dynamic Options from Database\n```php\nHeaderSelect::make('agents')\n    -\u003elabel('AI Agents')\n    -\u003eoptions(fn() =\u003e Agent::pluck('name', 'id'))\n    -\u003erefreshable(true)\n    -\u003ecolor('info')\n    -\u003eonChange(function ($value) {\n        return \"/admin/agents/{$value}\";\n    })\n```\n\n## Troubleshooting\n\n**Rounded corners not working?**\n- Use global `-\u003erounded()` on HeaderSelectPlugin  \n- Clear cache: `php artisan view:clear`\n\n**Wrong colors showing?**\n- Use proper color names: `primary`, `gray`, `info`, `success`, `warning`, `danger`\n- Clear cache: `php artisan config:clear`\n\n**onChange redirects not working?**\n- Return URL string from onChange callback\n- Use `return '/admin/page'` instead of `redirect()-\u003eto('/admin/page')`\n\n## License\n\nMIT License. See [LICENSE.md](LICENSE.md) for details.\n\n## Credits\n\n- **[Solution Forest](https://github.com/solution-forest)** - Package development\n- **[Filament](https://filamentphp.com)** - Laravel admin framework\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsolutionforest%2Ffilament-header-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsolutionforest%2Ffilament-header-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsolutionforest%2Ffilament-header-select/lists"}