custom sider color
want to change the color of the sider i want
import { Sider } from "@refinedev/antd";
import { Menu } from "antd";
import { useEffect, useState } from "react";
const Title = ({collapsed}:{collapsed:boolean}) =>{
return(
<div className="font-bold text-2xl mb-4 text-center h-[7vh] bg-[red] ">{collapsed ? "RF" : "Refine"}</div>
)
}
const Sidebar = () => {
const [off,setOff] = useState(false)
return (
<Sider
className="bg-blue-600"
Title={()=> <Title collapsed={off}/>}
render={({ items, logout, collapsed }) => {
setOff(collapsed)
// const i = items.map((item) => item.key == window.location.pathname);
// console.log("i",i)
return (
<div className="h-full bg-[red]">
<div>
{items.map((item,index) => (
<div key={index} >{item}</div>
))}
</div>
{/* {logout} */}
</div>
);
}}
/>
)
}
export default Sidebar
any one guide me to get this and want to get the active menu in different color.
import { Sider } from "@refinedev/antd";
import { Menu } from "antd";
import { useEffect, useState } from "react";
const Title = ({collapsed}:{collapsed:boolean}) =>{
return(
<div className="font-bold text-2xl mb-4 text-center h-[7vh] bg-[red] ">{collapsed ? "RF" : "Refine"}</div>
)
}
const Sidebar = () => {
const [off,setOff] = useState(false)
return (
<Sider
className="bg-blue-600"
Title={()=> <Title collapsed={off}/>}
render={({ items, logout, collapsed }) => {
setOff(collapsed)
// const i = items.map((item) => item.key == window.location.pathname);
// console.log("i",i)
return (
<div className="h-full bg-[red]">
<div>
{items.map((item,index) => (
<div key={index} >{item}</div>
))}
</div>
{/* {logout} */}
</div>
);
}}
/>
)
}
export default Sidebar
any one guide me to get this and want to get the active menu in different color.
