national-gold•4mo ago

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

kapa.ai•4mo ago

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:

import { Refine } from "@refinedev/core";  
import { ThemedLayoutV2, ThemedTitleV2 } from "@refinedev/antd";  
  
import { MyLargeIcon } from "./MyIcon";  
  
const App: React.FC = () => {  
  return (  
    <Refine  
    // ...  
    >  
      <ThemedLayoutV2  
        Title={() => (  
          <ThemedTitleV2  
            // Always show the full text regardless of the collapsed state
            icon={<MyLargeIcon />}  
            text="My Project"  
          />  
        )}  
      >  
        {/* ... */}  
      </ThemedLayoutV2>  
    </Refine>  
  );  
};

import { Refine } from "@refinedev/core";  
import { ThemedLayoutV2, ThemedTitleV2 } from "@refinedev/antd";  
  
import { MyLargeIcon } from "./MyIcon";  
  
const App: React.FC = () => {  
  return (  
    <Refine  
    // ...  
    >  
      <ThemedLayoutV2  
        Title={() => (  
          <ThemedTitleV2  
            // Always show the full text regardless of the collapsed state
            icon={<MyLargeIcon />}  
            text="My Project"  
          />  
        )}  
      >  
        {/* ... */}  
      </ThemedLayoutV2>  
    </Refine>  
  );  
};

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: ----------------------

kapa.ai•4mo ago

<@132392716767068160> kapa.ai is still learning and improving, please let us know how it did by reacting below

national-gold•4mo ago

@kapa.ai ThemedTitleV2 seems to require the collapsed property

kapa.ai•4mo ago

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:

import { Refine } from "@refinedev/core";  
import { ThemedLayoutV2, ThemedTitleV2 } from "@refinedev/antd";  
  
import { MyLargeIcon } from "./MyIcon";  
  
const App: React.FC = () => {  
  return (  
    <Refine  
    // ...  
    >  
      <ThemedLayoutV2  
        Title={({ collapsed }) => (  
          <ThemedTitleV2  
            // Pass the collapsed prop but always show the full text
            collapsed={collapsed}  
            icon={<MyLargeIcon />}  
            text="My Project"  
          />  
        )}  
      >  
        {/* ... */}  
      </ThemedLayoutV2>  
    </Refine>  
  );  
};

import { Refine } from "@refinedev/core";  
import { ThemedLayoutV2, ThemedTitleV2 } from "@refinedev/antd";  
  
import { MyLargeIcon } from "./MyIcon";  
  
const App: React.FC = () => {  
  return (  
    <Refine  
    // ...  
    >  
      <ThemedLayoutV2  
        Title={({ collapsed }) => (  
          <ThemedTitleV2  
            // Pass the collapsed prop but always show the full text
            collapsed={collapsed}  
            icon={<MyLargeIcon />}  
            text="My Project"  
          />  
        )}  
      >  
        {/* ... */}  
      </ThemedLayoutV2>  
    </Refine>  
  );  
};

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: ----------------------

kapa.ai•4mo ago

<@132392716767068160> kapa.ai is still learning and improving, please let us know how it did by reacting below

national-gold•4mo ago

@kapa.ai what do you mean by custom rendering logic? The example is just back to the default configuration which makes it collapsed

kapa.ai•4mo ago

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:

import { Refine } from "@refinedev/core";  
import { ThemedLayoutV2, ThemedSiderV2 } from "@refinedev/antd";  
  
const CustomTitle = ({ collapsed }) => {
  return (
    <div>
      <MyLargeIcon />
      <span>My Project</span>
    </div>
  );
};

const App: React.FC = () => {  
  return (  
    <Refine>  
      <ThemedLayoutV2  
        Sider={() => (  
          <ThemedSiderV2  
            Title={({ collapsed }) => <CustomTitle collapsed={collapsed} />}  
            render={({ items, logout, collapsed }) => {  
              return (  
                <>  
                  <div>My Custom Element</div>  
                  {items}  
                  {logout}  
                </>  
              );  
            }}  
          />  
        )}  
      >  
        {/* ... */}  
      </ThemedLayoutV2>  
    </Refine>  
  );  
};

import { Refine } from "@refinedev/core";  
import { ThemedLayoutV2, ThemedSiderV2 } from "@refinedev/antd";  
  
const CustomTitle = ({ collapsed }) => {
  return (
    <div>
      <MyLargeIcon />
      <span>My Project</span>
    </div>
  );
};

const App: React.FC = () => {  
  return (  
    <Refine>  
      <ThemedLayoutV2  
        Sider={() => (  
          <ThemedSiderV2  
            Title={({ collapsed }) => <CustomTitle collapsed={collapsed} />}  
            render={({ items, logout, collapsed }) => {  
              return (  
                <>  
                  <div>My Custom Element</div>  
                  {items}  
                  {logout}  
                </>  
              );  
            }}  
          />  
        )}  
      >  
        {/* ... */}  
      </ThemedLayoutV2>  
    </Refine>  
  );  
};

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: ----------------------

kapa.ai•4mo ago

<@132392716767068160> kapa.ai is still learning and improving, please let us know how it did by reacting below