Make title not collapse
How can I make the ThemedTitleV2 still show the full text at the top of the page even when the ThemedSiderV2 is collapsed?
8 Replies
Hi @chris. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
To ensure that the
ThemedTitleV2
component still shows the full text at the top of the page even when the ThemedSiderV2
is collapsed, you can customize the Title
prop of the ThemedLayoutV2
component. Instead of using the collapsed
prop to conditionally render different icons or text, you can always render the full text.
Here is an example of how to achieve this:
In this example, the Title
prop of ThemedLayoutV2
is set to always render the ThemedTitleV2
component with the full text "My Project" and the MyLargeIcon
icon, regardless of whether the sidebar is collapsed or not.
For more details, you can refer to the documentation on customizing the Title
prop:
- Ant Design ThemedLayout Title (https://refine.dev/docs/ui-integrations/ant-design/components/themed-layout/#title)
- Mantine ThemedLayout Title (https://refine.dev/docs/ui-integrations/mantine/components/themed-layout/#title)
- Material UI ThemedLayout Title (https://refine.dev/docs/ui-integrations/material-ui/components/themed-layout/#title)
This approach ensures that the title remains fully visible at the top of the page even when the sidebar is collapsed.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@132392716767068160> kapa.ai is still learning and improving, please let us know how it did by reacting below
like-goldOP•5mo ago
@kapa.ai ThemedTitleV2 seems to require the collapsed property
Let me check the knowledge base for you. One moment! :books:
----------------------
You're correct that the
ThemedTitleV2
component requires the collapsed
property. To ensure that the full text is always displayed, you can still pass the collapsed
property but ignore it in your custom rendering logic.
Here is an example of how to achieve this:
In this example, the collapsed
property is passed to the ThemedTitleV2
component, but the text "My Project" is always displayed in full, regardless of the collapsed state.
For more details, you can refer to the documentation on customizing the Title
prop:
- Ant Design ThemedLayout Title (https://refine.dev/docs/ui-integrations/ant-design/components/themed-layout/#title)
- Mantine ThemedLayout Title (https://refine.dev/docs/ui-integrations/mantine/components/themed-layout/#title)
- Material UI ThemedLayout Title (https://refine.dev/docs/ui-integrations/material-ui/components/themed-layout/#title)
- Chakra UI ThemedLayout Title (https://refine.dev/docs/ui-integrations/chakra-ui/components/themed-layout/#title)
This approach ensures that the title remains fully visible at the top of the page even when the sidebar is collapsed.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@132392716767068160> kapa.ai is still learning and improving, please let us know how it did by reacting below
like-goldOP•5mo ago
@kapa.ai what do you mean by custom rendering logic? The example is just back to the default configuration which makes it collapsed
Let me check the knowledge base for you. One moment! :books:
----------------------
To ensure that the
ThemedTitleV2
component always shows the full text at the top of the page, even when the ThemedSiderV2
is collapsed, you need to customize the Title
prop to ignore the collapsed
state for the text rendering.
Here is an example of how to achieve this:
In this example, the CustomTitle
component is used to render the title. It receives the collapsed
prop but always displays the full text "My Project" and the MyLargeIcon
icon, regardless of the collapsed state.
For more details, you can refer to the documentation on customizing the Title
prop:
- Ant Design ThemedLayout Title (https://refine.dev/docs/ui-integrations/ant-design/components/themed-layout/#title)
- Mantine ThemedLayout Title (https://refine.dev/docs/ui-integrations/mantine/components/themed-layout/#title)
- Material UI ThemedLayout Title (https://refine.dev/docs/ui-integrations/material-ui/components/themed-layout/#title)
- Chakra UI ThemedLayout Title (https://refine.dev/docs/ui-integrations/chakra-ui/components/themed-layout/#title)
This approach ensures that the title remains fully visible at the top of the page even when the sidebar is collapsed.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@132392716767068160> kapa.ai is still learning and improving, please let us know how it did by reacting below