exotic-emerald•2y ago

Change Themed layout

I have declared resource in App.tsx and got a sider with all the route and pages. Now on one page i need to render something else in the sider, how can i do it?

8 Replies

kapa.ai•2y ago

Hi @dreamer9067. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You can customize the Sider component in Refine by using the render prop. This prop is a function that receives an object with the items and logout properties. The items property is the list of navigation items and the logout property is the logout button. You can add your custom elements in this function. Here is an example of how to use the render prop to customize the Sider:

import { Sider } from "@refinedev/antd";  
  
const CustomSider = () => {  
 return (  
 <Sider  
 render={({ items, logout, collapsed }) => {  
 return (  
 <>  
 <div>My Custom Element</div>  
 {items}  
 {logout}  
 </>  
 );  
 }}  
 />  
 );  
};

import { Sider } from "@refinedev/antd";  
  
const CustomSider = () => {  
 return (  
 <Sider  
 render={({ items, logout, collapsed }) => {  
 return (  
 <>  
 <div>My Custom Element</div>  
 {items}  
 {logout}  
 </>  
 );  
 }}  
 />  
 );  
};

In this example, "My Custom Element" is the custom element that you want to add to the Sider. You can replace this with your own custom element. You can also customize the Sider for different pages by using different render functions for different routes. For more information, you can refer to the Refine documentation (https://refine.dev/docs/advanced-tutorials/custom-layout). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

exotic-emeraldOP•2y ago

@kapa.ai how to remove refine from document title ??

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- You can remove "refine" from the document title by using the useDocumentTitle hook provided by Refine. This hook allows you to set the document title for the current page. Here is an example of how to use it:

import { useDocumentTitle } from "@refinedev/react-router-v6";  
  
const PostList = () => {  
 useDocumentTitle("Posts");  
  
 return (  
 <List>  
 {/* ... */}  
 </List>  
 );  
};

import { useDocumentTitle } from "@refinedev/react-router-v6";  
  
const PostList = () => {  
 useDocumentTitle("Posts");  
  
 return (  
 <List>  
 {/* ... */}  
 </List>  
 );  
};

In this example, the document title for the PostList page is set to "Posts". You can replace "Posts" with the title you want for your page. You can use this hook in any component that is a child of the <Refine> component. For more information, you can refer to the Refine documentation (https://refine.dev/docs/packages/documentation/routers/react-router-v6). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

exotic-emeraldOP•2y ago

@kapa.ai can u share a code using react ant design for below requirement? there needs to be an icon upon clicked a popup will appear which will have a input for search and list of values which can be filtered by the input. Input dropdown should always be focused when dropdown opens

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Sure, you can use Ant Design's AutoComplete component to create a search input with a dropdown list. Here is an example:

import { AutoComplete, Input, Button } from 'antd';
import { SearchOutlined } from '@ant-design/icons';

const Complete: React.FC = () => {
  const [options, setOptions] = useState<{ value: string }[]>([]);

  const handleSearch = (value: string) => {
    setOptions(
      !value ? [] : [{ value }, { value: value + value }, { value: value + value + value }],
    );
  };

  const onSelect = (value: string) => {
    console.log('onSelect', value);
  };

  return (
    <AutoComplete
      options={options}
      onSelect={onSelect}
      onSearch={handleSearch}
    >
      <Input.Search size="large" placeholder="input here" enterButton />
    </AutoComplete>
  );
};

ReactDOM.render(<Complete />, mountNode);

import { AutoComplete, Input, Button } from 'antd';
import { SearchOutlined } from '@ant-design/icons';

const Complete: React.FC = () => {
  const [options, setOptions] = useState<{ value: string }[]>([]);

  const handleSearch = (value: string) => {
    setOptions(
      !value ? [] : [{ value }, { value: value + value }, { value: value + value + value }],
    );
  };

  const onSelect = (value: string) => {
    console.log('onSelect', value);
  };

  return (
    <AutoComplete
      options={options}
      onSelect={onSelect}
      onSearch={handleSearch}
    >
      <Input.Search size="large" placeholder="input here" enterButton />
    </AutoComplete>
  );
};

ReactDOM.render(<Complete />, mountNode);

In this example, AutoComplete is used to create a search input with a dropdown list. The onSearch prop is used to handle the search input and update the dropdown list. The onSelect prop is used to handle the selection of an item from the dropdown list. Please note that this is a basic example and you might need to adjust it according to your requirements. For more information, you can refer to the Ant Design's AutoComplete documentation (https://ant.design/components/auto-complete/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

Change Themed layout

Did you find this page helpful?