This project demonstrates a draggable sidebar component built with React, Ant Design, and react-draggable
. The sidebar allows users to adjust its width by dragging the sidebar handle.
To use the draggable sidebar, you can import and render the DraggableSidebarSample component in your app.
import { DraggableSidebarSample } from "./DraggableSidebarSample";
function App() {
return (
<div>
<DraggableSidebarSample mode="light" />
</div>
);
}
DraggableSidebarSample
This is the main component that displays a draggable sidebar alongside some example typography.
import { Typography, Flex } from "antd";
import { DraggableSidebar } from "./DraggableSidebar/DraggableSidebar";
function DraggableSidebarSample(props) {
// Typography and content rendering logic
}
defaultWidth
: The initial width of the sidebar (optional). Defaults to 540px
.className
: A custom class name for styling the sidebar container.children
: The content to be displayed inside the sidebar.mode
: The mode to style the typography (light or dark).The sidebar container and draggable button have basic styles applied via CSS and react-draggable
for handling the dragging functionality.