Add PageSidebarLayout block to blocks-antd#2076
Merged
Conversation
Request: Add footer content slot to Drawer as prerequisite for PageSidebarLayout.
Motivation: MobileMenu needs to pass drawer footer content through to the Drawer
for the new PageSidebarLayout block.
Changes:
- Drawer.js: Add footer={content.footer && content.footer()} prop, add styles.footer passthrough
- meta.js: Add 'footer' to slots array
- gallery.yaml: Add footer slot example with save/cancel buttons
- tests.yaml: Add footer slot test configuration
- Drawer.e2e.yaml: Add footer slot fixture
- Drawer.e2e.spec.js: Add e2e test verifying footer content renders
Tags: drawer, footer, slot, blocks-antd, page-sidebar-layout, prerequisite
Request: Enhance MobileMenu with logo, drawerContent, and drawerFooter as prerequisite for PageSidebarLayout. Motivation: PageSidebarLayout needs MobileMenu to support a logo in the drawer header and content/footer slots for passing through page-level content to the mobile drawer. Changes: - MobileMenu.js: Add content to props, render logo in drawer extra slot, add drawerContent/drawerFooter - meta.js: Add logo property schema, add drawerContent/drawerFooter to slots array - gallery.yaml: Add examples for logo, drawerContent, and drawerFooter - tests.yaml: Add test configs for logo and content slots - MobileMenu.e2e.yaml: Add fixtures for logo, drawerContent, drawerFooter - MobileMenu.e2e.spec.js: Add e2e tests for all three new features Tags: mobile-menu, logo, drawer-content, drawer-footer, blocks-antd, page-sidebar-layout
Request: Create PageSidebarLayout block — full-height sidebar layout with no top-level header. Motivation: Common layout pattern (sidebar-first, logo at bottom) needs to be a first-class block alongside PageHeaderMenu and PageSiderMenu. Decisions: - localStorage persistence: configurable key via siderStorageKey property (default 'sider') - No breakpoint in logo: uses img not picture since sider is always narrow - onMenuItemSelect (not onMenuItemCSelect): fix the typo from PageSiderMenu Changes: - PageSidebarLayout.js: Full-page layout with full-height sider, localStorage state, 8 slots, 10 CSS keys - meta.js: Schema with all properties, slots, CSS keys, events Tags: page-sidebar-layout, sider, layout, blocks-antd, localStorage, mobile-menu
Request: Add PageSidebarLayout export to the blocks registry. Motivation: Block must be exported for Lowdefy to discover and use it. Changes: - blocks.js: Add PageSidebarLayout export between PageHeaderMenu and PageSiderMenu Tags: blocks-antd, export, page-sidebar-layout, registration
Request: Create e2e test helpers, fixtures, and Playwright tests for PageSidebarLayout. Motivation: Verify all rendering, interactions, events, methods, mobile behavior, and theming. Changes: - e2e.js: Block helper with locator, clickMenuItem, menuItemActive, menuItemVisible - PageSidebarLayout.e2e.yaml: Full fixture with menu, breadcrumb, all slots, method buttons, event displays - PageSidebarLayout.e2e.spec.js: 20 Playwright tests covering rendering, collapse, methods, mobile, events, targeting Tags: e2e, playwright, page-sidebar-layout, blocks-antd, testing
…rLayout. Request: Create gallery with 16 examples and tests.yaml for PageSidebarLayout. Motivation: Gallery examples serve as documentation and visual regression tests. Changes: - gallery.yaml: 16 examples covering basic, dark/light theme, nested menus, collapsed, breadcrumb, header, footer, widths, toggle, logo, slots, CSS keys, theme overrides, shortcuts - tests.yaml: 22 test configurations covering all properties and slots Tags: gallery, tests, page-sidebar-layout, blocks-antd, documentation
Request: Create user-facing documentation for PageSidebarLayout. Motivation: New block needs to be discoverable in the docs site. Changes: - PageSidebarLayout.yaml: Template-driven docs page referencing meta.js and gallery.yaml - menus.yaml: Add PageSidebarLayout to container blocks menu - pages.yaml: Register PageSidebarLayout page Tags: docs, page-sidebar-layout, documentation, user-facing
Request: Fix "Block type PageSidebarLayout was used but is not defined" error in docs. Motivation: The block type registry derives from metas.js exports, not just blocks.js. blocks.js registers the component, metas.js registers the type metadata. Changes: - metas.js: Add PageSidebarLayout meta export between PageHeaderMenu and PageSiderMenu Tags: blocks-antd, metas, page-sidebar-layout, type-registration, fix
Request: Fix "CallMethod param args must be type array" error in Drawer gallery. Motivation: All CallMethod args were using object format instead of the required array format. Also reordered footer slot example to appear after extra slot example. Changes: - Drawer/gallery.yaml: Convert all args to array format, move footer example after extra slot Tags: drawer, gallery, callmethod, args, blocks-antd
…d MobileMenu.
Request: Multiple refinements after initial implementation and testing.
Motivation: Fix visual issues, align theming, and improve gallery examples.
Decisions:
- Unified theme property: properties.theme accepts string ('dark'/'light') for color scheme or object for antd tokens
- MobileMenu category changed to container: enables slot resolution for drawerContent/drawerFooter
- Dark theme uses #1529: matches Ant Design's standard dark sider/menu background
- Sticky logo instead of Affix: prevents gallery examples from stacking logos at viewport bottom
- Unique siderStorageKey per gallery example: prevents localStorage cross-contamination
Changes:
- PageSidebarLayout.js: Add ConfigProvider wrapper for object theme, sticky logo, cascading baseTheme/siderTheme/headerTheme/mobileHeaderTheme, responsive logo (src when expanded, srcMobile when collapsed), fix mobile header always showing
- PageSidebarLayout/meta.js: Merge colorScheme and theme into single dual-purpose theme property
- PageSidebarLayout/gallery.yaml: Use theme property, add unique siderStorageKey, add mixed theme example, update descriptions
- PageSidebarLayout.e2e.yaml: Add logo src/srcMobile
- MobileMenu.js: Add dark drawer theme tokens, map string theme to drawer ConfigProvider
- MobileMenu/meta.js: Change category from display to container
- MobileMenu/gallery.yaml: Reorder slot examples before real-world examples
Tags: page-sidebar-layout, mobile-menu, theme, dark-mode, sticky, localStorage, gallery
Request: MobileMenu should be listed as a container in the docs. Motivation: MobileMenu category changed from display to container to support drawerContent/drawerFooter slots. Changes: - blocks/display/MobileMenu.yaml: Deleted - blocks/container/MobileMenu.yaml: Created with section set to Container Blocks - menus.yaml: Move MobileMenu entry from Display to Container Blocks (alphabetical) - pages.yaml: Update ref path to blocks/container/MobileMenu.yaml (alphabetical in containers) Tags: docs, mobile-menu, container, category, navigation
Request: Generate comprehensive e2e tests for PageSidebarLayout. Motivation: Original tests lacked coverage for localStorage persistence, responsive logo, mobile drawer slots, onToggleSider event, and mobile-specific rendering. Changes: - PageSidebarLayout.e2e.spec.js: Add 12 new tests (27 total) — localStorage persistence/restore, responsive logo src/srcMobile, mobile sider hidden, mobileExtra/mobileDrawerContent/mobileDrawerFooter slots, onToggleSider event, beforeEach localStorage cleanup - PageSidebarLayout.e2e.yaml: Add siderStorageKey, mobileDrawerContent/mobileDrawerFooter slots, onToggleSider event with display block, logo src/srcMobile paths - e2e/app/lowdefy.yaml: Register PageSidebarLayout e2e page Tags: e2e, playwright, page-sidebar-layout, localStorage, mobile, drawer-slots
Request: Fix broken collapse and localStorage behavior.
Motivation: Sider's internal state initialized from properties.initialCollapsed while the parent
initialized from localStorage — they could disagree, causing the first toggle click to do nothing.
Decisions:
- Override Sider's initialCollapsed: pass !openSiderState (from localStorage) as last merge item so Sider always starts in sync with the parent
Changes:
- PageSidebarLayout.js: Add { initialCollapsed: !openSiderState } as final merge to Sider properties
Tags: page-sidebar-layout, sider, localStorage, collapse, state-sync, initialCollapsed
…allery. Request: Add real-world examples and fix stale colorScheme references. Motivation: Gallery was missing required applied examples and still referenced the renamed colorScheme property instead of theme. Changes: - gallery.yaml: Add Admin Dashboard and Project Management applied examples, fix 5 colorScheme references to theme Tags: gallery, page-sidebar-layout, applied-examples, colorScheme, theme
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: ecdac13 The changes in this PR will be included in the next version bump. This PR includes changesets to release 57 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Changes: - feat-page-sidebar-layout.md: @lowdefy/blocks-antd minor bump for new PageSidebarLayout block, Drawer footer slot, MobileMenu enhancements Tags: changeset, page-sidebar-layout, blocks-antd
… other Page blocks. Request: Make sure styles and themes are applied the same way as other Page blocks Motivation: PageSidebarLayout used hardcoded theme strings and colors instead of CSS variables and app-level dark mode, diverging from PageHeaderMenu and PageSiderMenu patterns. Decisions: - Remove string theme props (sider.theme, header.theme, mobileHeader): dark mode handled by app-level ConfigProvider - Place header actions in sider (desktop) and mobile header (mobile): matches PageHeaderMenu pattern - Wrap mobile header in plain div for responsive hiding: Header's inline display:flex overrides Tailwind classes Changes: - PageSidebarLayout.js: Add headerActions integration, remove theme string props, use CSS vars and getDarkMode(), wrap mobile header for responsive hiding, add mobileMenu classNames/styles passthrough - meta.js: Add notifications/profile/darkModeToggle/iconsColor properties, add missing cssKeys and events, use shared schema imports, convert slots to object format, remove stale theme string properties - gallery.yaml: Trim to 6 focused examples, remove theme string usage, add Admin Dashboard with all features - tests.yaml: Remove stale theme tests, add darkModeToggle/notifications/profile/theme tests, fix areas to slots - PageSidebarLayout.e2e.yaml: Remove sider.theme property - changeset: Update to reflect current implementation Tags: page-sidebar-layout, dark-mode, header-actions, notifications, profile, theme, css-variables, blocks-antd
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## develop #2076 +/- ##
========================================
Coverage 72.09% 72.10%
========================================
Files 413 413
Lines 5960 5958 -2
Branches 1507 1506 -1
========================================
- Hits 4297 4296 -1
+ Misses 1386 1385 -1
Partials 277 277 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
… conventions. Request: Make sure the MobileMenu and Drawer changes align with other blocks Motivation: MobileMenu used hardcoded dark drawer theme colors and logo theme fallback, diverging from the app-level ConfigProvider dark mode pattern. Changes: - MobileMenu.js: Remove hardcoded darkDrawerTheme, use getDarkMode() for logo variant selection - MobileMenu/meta.js: Convert slots from array to object format with descriptions - PageSidebarLayout.js: Remove wrong methods rename on desktop Menu (copy-paste from MobileMenu) - PageSidebarLayout/tests.yaml: Revert slots: back to areas: to match established test convention Tags: mobile-menu, dark-mode, theme, blocks-antd, page-sidebar-layout
Request: Review PR #2076 for consistency Motivation: Changeset claimed "Dark drawer theme applied automatically when theme: dark" but this feature was removed when we aligned MobileMenu with app-level dark mode. Changes: - feat-page-sidebar-layout.md: Remove stale dark drawer theme line from MobileMenu section Tags: changeset, mobile-menu, dark-mode
Gervwyk
approved these changes
Apr 16, 2026
…izing, and gallery examples. Request: Add border to sider, decrease and center logo, update gallery examples. Motivation: Align PageSidebarLayout with other Page block conventions and improve gallery accuracy. Changes: - PageSidebarLayout.js: Add borderInlineEnd to sider matching PageSiderMenu pattern - PageSidebarLayout.js: Center logo container with flexbox and set default maxHeight of 32px - gallery.yaml: Use logo_example.png in logo configuration example - gallery.yaml: Remove theme overrides example - gallery.yaml: Replace user avatar sider slots with environment tag in admin example Tags: page-sidebar-layout, sider-border, logo, gallery, blocks-antd
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a new
PageSidebarLayoutblock — a full-height sidebar layout with no top-level header, logo at the sider bottom, and mobile drawer. This is a common layout pattern (sidebar-first navigation) that was previously only available as a custom plugin. The block includes prerequisites: a footer slot for Drawer and logo/content/footer slots for MobileMenu.Changes
PageSidebarLayoutblock with full-height sider, localStorage collapse persistence, cascadingthemeproperty (string for dark/light, object for antd tokens), responsive logo (full when expanded, square when collapsed), sticky logo positioning, 8 content slots, 10 CSS keys, 8 events. Addfootercontent slot andstyles.footerpassthrough to Drawer. Addlogo,drawerContent,drawerFooterto MobileMenu and change its category fromdisplaytocontainer. Add dark drawer theme token mapping whentheme: dark. Fix Drawer gallery CallMethod args format.Key Files
PageSidebarLayout/PageSidebarLayout.js— Main component with localStorage persistence, cascading theme, ConfigProvider wrapperPageSidebarLayout/meta.js— Schema with dual-purposethemeproperty (string or object)MobileMenu/MobileMenu.js— Logo, drawerContent/drawerFooter slots, dark drawer theme mappingDrawer/Drawer.js— Footer content slot and styles.footer passthroughNotes
displaytocontainer— required for the build to resolvedrawerContent/drawerFooterslots. This is backward compatible since existing usage doesn't define slots.themeproperty serves dual purpose: string ('dark'/'light') for cascading color scheme, object for antd design tokens via ConfigProvider. The wrapperPageSidebarLayoutWithThemehandles the dispatch.initialCollapsedis overridden by the parent's localStorage-derived state to prevent state disagreement after reload.