-
-
Notifications
You must be signed in to change notification settings - Fork 2.7k
Description
Is your feature request related to a problem? Please describe.
I’ve been working on customising the sidebar layout in my project using ThemedLayoutV2
and ThemedSiderV2
.
Despite all my styling efforts, I couldn’t fully utilise the sidebar height to properly include a footer (for example, to display my account component nicely at the bottom).
const CustomSider = () => {
const { setSiderCollapsed } = useThemedLayoutContext();
return (
<ThemedSiderV2
render={({ collapsed, items }) => (
<>
{items}
<Account collapsed={collapsed} />
</>
)}
Title={({ collapsed }) => (
// SNIP
)}
/>
);
};
const SidebarLayout = () => {
const { pathname } = useLocation();
return (
<ThemedLayoutV2
// SNIP
Header={() => <CustomHeader />}
initialSiderCollapsed={Boolean(localStorage.getItem("siderCollapsed"))}
onSiderCollapsed={(collapsed) =>
localStorage.setItem("siderCollapsed", collapsed)
}
Sider={CustomSider}
>
// SNIP
</ThemedLayoutV2>
);
};
And despite all my styling efforts to have a footer with my Account component it seems that it is not possible to uitilize full height of the sidebar, see:
I would appreciate it, if a Footer prop could be supported or even better if this ThemeLayout component could be reworked from the ground up to allow for greater extensibility without to have to swizzle.
Describe alternatives you've considered
No response
Additional context
No response
Describe the thing to improve
It would be great to have a dedicated Footer
prop in ThemedSiderV2
to make this use case straightforward.
Or even better — consider rethinking the ThemedLayout
and ThemedSider
architecture from the ground up to support greater extensibility, without requiring developers to "swizzle" or override internal components.