Chat Layout - Copy this React, Tailwind Component to your project

I want to create a layout for a dashboard application with the following requirements: Layout Structure: A grid-based layout that is responsive to screen sizes. Left Sidebar: Contains navigation options such as My Feed, Following, Explore, Bookmarks, and History. Main Content Area: Displays content cards in a grid layout. Top Bar: Includes a search bar, profile settings, and a "New Post" button. Technical Requirements: Use React + TypeScript. Styling with SCSS/CSS modules. Fully responsive for desktop, tablet, and mobile devices. Support animations for interactions (e.g., sidebar toggling, card hover effects). Breakpoints for responsive layouts: Desktop: Grid layout with 3 or more columns. Tablet: Grid layout with 2 columns. Mobile: Single-column layout. Features: Sidebar that can be toggled (show/hide) on smaller screens. Smooth transitions and animations for layout adjustments. Content cards with customizable sizes and consistent styling. Implement hover and focus effects on interactive elements. Adaptive design that adjusts the card grid layout based on screen size. Auxiliary Components: Modal container for full-screen modals (e.g., feedback form or settings). Overlay for popup/modal dialogs. Reusable card component for displaying content dynamically. Toast notifications for user interactions. Please create a basic code structure with the necessary components, including the grid system, sidebar, top bar, and card components, along with responsive styling.