Is this possible to update standart UI?

[YunusEmreAlps]

Hi,

I hope you're well and everything is good with you.

I'm using refine with the mantine UI framework. How can I update menu UI or is this possible?

For example, I want to update the navbar like this https://ui.mantine.dev/category/navbars examples. The logout button will be at the bottom of this like in this examples.

Thank you very much.
Best regards,

[vinclou]

@YunusEmreAlps

1. Visit the following for how the original is implemented Sider
2. Either implement your own version, or grab the code and extend it to your liking
3. Grab the Layout or create your own, here's example for Ant (it will be located in layouts folder of Refine repo)

export const Layout: React.FC<TCustomLayoutProps> = ({ children, Header, Sider, Title, Footer, initialSiderCollapsed }) => {
	const SiderToRender = Sider ?? DefaultSider
	const HeaderToRender = Header ?? DefaultHeader
	const TitleToRender = Title ?? DefaultTitle

	return (
		<ThemedLayoutContextProvider initialSiderCollapsed={initialSiderCollapsed}>
			<AntdLayout>
				<SiderToRender Title={TitleToRender} />
				<AntdLayout>
					<HeaderToRender />
					<AntdLayout.Content className='my-4 mx-auto'>
						{children}
						<DefaultOffLayoutArea />
					</AntdLayout.Content>
					{Footer && <Footer />}
				</AntdLayout>
			</AntdLayout>
		</ThemedLayoutContextProvider>
	)
}

4. Wrap all your elements in the custom layout and you should have your sider ready