Skip to content

[FEAT] Support custom footer area in ThemedSiderV2 without swizzling #6861

@aress31

Description

@aress31

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:

Image

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requestwontfixThis will not be worked on

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions