Skip to content

Move theme toggle before search, relocate sidebar collapse control - #28

Merged
wakqasahmed merged 2 commits into
mainfrom
feature/sidebar-toggle-relocation
Jul 4, 2026
Merged

wakqasahmed merged 2 commits into
mainfrom
feature/sidebar-toggle-relocation

Conversation

@wakqasahmed

Copy link
Copy Markdown
Contributor

Two topbar/sidebar UX fixes:

  1. Theme toggle position — moved from `TOPBAR_END` (after the search box) to `GLOBAL_SEARCH_BEFORE`, so it now sits before the search box.

  2. Sidebar collapse control — Filament's built-in collapse/expand chevron is baked into its own topbar template (`fi-topbar-collapse-sidebar-btn-ctn`), appearing next to the logo in the header. Hidden that via CSS and added an equivalent control at the sidebar's own footer (`SIDEBAR_FOOTER` render hook) using the exact same Alpine directives (`$store.sidebar.open()`/`close()`), so it's no longer part of the header at all — it now lives with the sidebar it controls.

Test plan:

  • Full suite: 75 passed (unaffected by this change — no logic touched, pure render-hook relocation + CSS)
  • Pint clean

@wakqasahmed wakqasahmed left a comment

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cold-start review — verified against vendored Filament source (vendor/filament/filament), no local repro run.

Render hooks: PanelsRenderHook::GLOBAL_SEARCH_BEFORE (panels::global-search.before) and PanelsRenderHook::SIDEBAR_FOOTER (panels::sidebar.footer) are both real consts in this vendored Filament version (src/View/PanelsRenderHook.php), and SIDEBAR_FOOTER is actually rendered inside livewire/sidebar.blade.php:198. No typo/hallucinated hook risk.

CSS selector: .fi-topbar-collapse-sidebar-btn-ctn matches exactly what Filament's own livewire/topbar.blade.php:46 uses for the desktop collapse button container. Hiding it won't silently no-op — confirmed it's the correct, current class name for this vendored version. Note it only hides the desktop chevron container; the separate mobile hamburger toggle (fi-topbar-open-sidebar-btn / fi-topbar-close-sidebar-btn, lines 15-39) is untouched, which looks intentional per the PR description (only the desktop chevron is being relocated).

New toggle logic: the two buttons in sidebar-collapse-toggle.blade.php use x-show="$store.sidebar.isOpen" (Collapse) and x-show="! $store.sidebar.isOpen" (expand icon) — exact logical opposites, so exactly one is ever visible. This matches Filament's own pattern in topbar.blade.php lines 24/37 and 66/89 (same store, same open()/close() calls). No dead-both-visible or dead-neither-visible state.

Scope: only AdminPanelProvider.php (render hook registration) changed in app/ — no other PHP/behavior changes. Pure Blade/CSS relocation as described.

Minor, non-blocking: the collapsed-state icon button in sidebar-collapse-toggle.blade.php has no aria-label/screen-reader text, unlike Filament's own x-filament::icon-button which always sets a :label. Not a correctness issue, just an a11y gap worth a follow-up if this template gets reused elsewhere.

No blocking issues found. CI (tests) is green.

@wakqasahmed
wakqasahmed merged commit 4c14e6b into main Jul 4, 2026
1 check passed
@wakqasahmed
wakqasahmed deleted the feature/sidebar-toggle-relocation branch July 4, 2026 20:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant