Draggable Sidebar Sample

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.

[Demo]

Features

• Draggable Sidebar: A resizable sidebar that users can drag to change its width.
• Typography Display: Various typography elements such as titles, paragraphs, and lists are displayed alongside the draggable sidebar.
• Responsive Layout: The sidebar can be dragged from the right side to adjust its width.

Usage Example

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>
  );
}

Components

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
}

Props

DraggableSidebar

• 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.

DraggableSidebarSample

• mode: The mode to style the typography (light or dark).

Styling

The sidebar container and draggable button have basic styles applied via CSS and react-draggable for handling the dragging functionality.