Customizing sider items
is there a way to customize the sider items in the render function?
<ThemedSiderV2
render={({ items, logout }) => {
console.log('SIDER ITEM RENDER - ', items);
return (
<>
{items.map((item) =>
React.cloneElement(item, {
onClick: async () => {
await invalidate({
resource: item.props.resource,
invalidates: ['resourceAll'],
});
},
}),
)}
{logout}
</>
);
}}
Title={(props) => {
return (
<div
style={{
display: 'flex',
alignItems: 'center',
}}
>
{!props.collapsed && (
<>
<Typography.Text strong>
{parameters.app.name || 'Admin Panel'}
</Typography.Text>
</>
)}
</div>
);
}}
/>
here i'd like to make some of the parent resources to be always expanded
13 Replies
Hi @biohazard#1521. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Currently, Refine does not provide a built-in prop or API to make specific parent resources always expanded in the sider menu via the render function of <ThemedSiderV2>. This is a known feature request in the community, as highlighted in an open GitHub issue where users have asked for an option to show expanded menus by default for resources with parents. As of now, the default behavior is that parent menus are collapsed, and there is no documented way to override this per resource in the render function or resource definition. The only available options are to use the default open state (which applies globally) or to customize the component further, potentially by swizzling it or managing open keys yourself, but this is not officially documented or supported for per-resource expansion out of the box Multi level menu - option to show expanded menu by default.
If you need more advanced control, you may need to swizzle the component and implement your own logic for open keys, as suggested in related discussions about customizing the sider Enhance Sider Customizability.
In summary:
- You can customize the rendering and behavior of items in the render function, but making specific parents always expanded is not natively supported. - This feature is requested but not yet available. - For now, deeper customization would require swizzling or managing open state yourself. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
- You can customize the rendering and behavior of items in the render function, but making specific parents always expanded is not natively supported. - This feature is requested but not yet available. - For now, deeper customization would require swizzling or managing open state yourself. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<@680514070167683118> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
flat-fuchsiaOP•3w ago
@kapa.ai i'm having trouble running 2 refine apps at the same time, i keep getting
refine devtools failed to start. Port 5002 is already in use, please make sure no other devtools server is running
Let me check the knowledge base for you again. One moment! :books:
----------------------
When running two Refine apps at the same time, you may encounter the error:
You can change the port used by the Devtools server for each app by setting the
Set a different
refine devtools failed to start. Port 5002 is already in use, please make sure no other devtools server is runningThis happens because each Refine app tries to start its own Devtools server, and by default, they use the same ports (5001 and 5002). When the port is already in use by another instance, the second app cannot start its Devtools server and throws this error. Solution:
You can change the port used by the Devtools server for each app by setting the
REFINE_DEVTOOLS_PORT environment variable. For example, you can start one app with the default port and the other with a different port:
This will run the Devtools server on port 5003 for that app, avoiding the port conflict. This method is documented as the way to specify the port for Devtools in the Enterprise Edition, but the environment variable is respected by both @refinedev/cli and @refinedev/devtools-server in general Refine Devtools: Specifying the Port.
Summary:Set a different
REFINE_DEVTOOLS_PORT for each app you want to run simultaneously to avoid port conflicts with Devtools.
If you continue to have issues, make sure no orphaned Devtools processes are running in the background that might be occupying the ports Devtools Error: listen EADDRINUSE.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@680514070167683118> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
flat-fuchsiaOP•3w ago
@kapa.ai still getting the same
REFINE_DEVTOOLS_PORT=5003 yarn dev
yarn run v1.22.22
warning ../../../../../package.json: No license field
$ GENERATE_SOURCEMAP=true refine dev
╭──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ — Refine Devtools beta version is out! To install in your project, just run npm run refine devtools init. https://s.refine.dev/devtools-beta │
│ │
│ — Hello from Refine team! Hope you enjoy! Join our Discord community to get help and discuss with other users. https://discord.gg/refine │
│ │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
✗ refine devtools failed to start. Port 5002 is already in use, please make sure no other devtools server is running
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
GitHub
refine/packages/devtools at master · refinedev/refine
A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility. - refinedev/refine
Let me check the knowledge base for you again. One moment! :books:
----------------------
The error persists because, even after setting
Sometimes, a previous process may still be running and occupying the port. You can kill the process using: - On macOS/Linux: - On Windows: Application does not start after installation, port 5001 error 2. Try a higher, unused port.
For example: This should set the main server to 5010 and the WebSocket to 5011. 3. Remove Devtools temporarily.
If you do not need Devtools, you can remove the
- Make sure no other process is using the conflicting port. - Try setting
REFINE_DEVTOOLS_PORT=5003, the Devtools server is still trying to use port 5002, which is already in use. According to the knowledge sources, this is a known issue when running multiple Refine apps simultaneously: both the main Devtools server and its WebSocket server use consecutive ports (e.g., 5001 and 5002 by default). If you only change the main port, the WebSocket port may still conflict.
The documentation for the Enterprise Edition states that setting the REFINE_DEVTOOLS_PORT environment variable should change the port for both the server and the WebSocket, and this is respected by both @refinedev/cli and @refinedev/devtools-server Refine Devtools: Specifying the Port. However, there are user reports that even after changing the port, the error can persist, possibly due to a bug or a process not shutting down properly Devtools Error: listen EADDRINUSE.
What you can try:
1. Ensure all previous Devtools processes are stopped.Sometimes, a previous process may still be running and occupying the port. You can kill the process using: - On macOS/Linux: - On Windows: Application does not start after installation, port 5001 error 2. Try a higher, unused port.
For example: This should set the main server to 5010 and the WebSocket to 5011. 3. Remove Devtools temporarily.
If you do not need Devtools, you can remove the
@refinedev/devtools dependency from your project to avoid the port conflict entirely Application does not start after installation, port 5001 error.
If the problem persists even after these steps, it may be due to a bug in how the environment variable is handled, or a process is not being properly terminated. The knowledge sources do not provide a definitive fix beyond these workarounds.
Summary:- Make sure no other process is using the conflicting port. - Try setting
REFINE_DEVTOOLS_PORT to a higher, unused port.
- Remove Devtools if not needed.
If none of these resolve the issue, the knowledge sources do not provide further troubleshooting steps.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@680514070167683118> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Let me check the knowledge base for you again. One moment! :books:
----------------------
Based on your
lsof -i :5002 output, it appears that a Node.js process (PID 23325) is currently listening on port 5002 and has several established connections. This is likely the Devtools server from one of your running Refine apps. As long as this process is active, any attempt to start another Devtools server on the same port (5002) will result in the "port already in use" error.
What you should do:
- If you want to free up port 5002, you need to stop the Node.js process that is currently using it. You can do this by running:
(Replace 23325 with the actual PID if it changes.)
- After stopping the process, you should be able to start your second Refine app, or you can set a different REFINE_DEVTOOLS_PORT for each app to avoid conflicts.
The knowledge sources confirm that port conflicts are a known issue when running multiple Refine apps with Devtools enabled, and the recommended solution is to either stop the process using the port or set a different port for each app using the REFINE_DEVTOOLS_PORT environment variable Devtools Error: listen EADDRINUSE Application does not start after installation, port 5001 error.
If you continue to see the port in use after killing the process, make sure all related Node.js processes are stopped, as sometimes orphaned processes can linger and keep the port occupied.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@680514070167683118> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
flat-fuchsiaOP•3w ago
@kapa.ai so just to clarify, if i don't use enterprise edition, devtools wont work anyways right?
Let me check the knowledge base for you again. One moment! :books:
----------------------
No, that's not correct—Refine Devtools are available and work in the Community Edition as well. You do not need the Enterprise Edition to use Devtools. The documentation and user reports confirm that Devtools can be installed and used in Community Edition projects, and there are instructions and troubleshooting steps for both editions regarding port conflicts and setup Improve DevTools documentation (manual configuration, login, etc.) Refine Devtools: Specifying the Port.
The Enterprise Edition adds extra features, such as the ability to change the Devtools server port or use a custom domain, but the core Devtools functionality is available in the Community Edition as well.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
<@680514070167683118> Kapa.ai is still learning and improving, please let me know how I did by reacting below.