Developer Platform - Copy this React, Tailwind Component to your project

Design a sleek, modern developer focused platform with a responsive sidebar and main content area. The UI should include the following features and behaviors: 1. Sidebar Appearance: Dark themed sidebar on the left with clean, simple icons and labels. Organized into sections: My feed at the top, with a profile picture. Main menu options: Following, Explore, Bookmarks, History. Group headers (e.g., "Network", "Discover", "Resources") with collapsible submenus: Discover: Tags, Sources, Leaderboard, Discussions, Submit a link. Resources: Docs, Changelog, Feedback. Active menu item is highlighted with: A vertical accent bar. Lighter background color. Behavior: Collapsed Mode: Sidebar width: 50px. Displays icons only (no labels). Tooltips appear on hover to display the menu item's name. Default state for smaller screens and when collapsed manually. Expanded Mode: Sidebar width: 250px. Displays both icons and labels (text). Smooth slide in animation (300ms) when toggled to expanded. Toggle Button: Add a hamburger menu toggle button at the top left corner. Clicking the button switches between collapsed and expanded states. Mobile Behavior: Sidebar is hidden by default, and the hamburger button triggers a slide in menu from the left. When opened, it overlays the content and dims the background. Sidebar in mobile mode occupies 80% of the screen width or up to 320px. 2. Main Content Area Appearance: Display a grid layout of content cards with a dark background. Each card includes: A bold title. Tags (e.g., #security, #backend) displayed as chips. Read time (e.g., "7m read time"). A preview image or graphic. Interaction buttons (e.g., like, share, save, link). 3. Top Navigation Bar A search bar centered at the top. Icons on the right for notifications, user profile, and a "New Post" button. Show keyboard shortcut hints (e.g., Ctrl + K for search). 4. Responsive Design Desktop: Sidebar defaults to the collapsed state. Users can manually toggle it to expand. Tablet: Sidebar is expanded by default, but collapsible. Main content cards adjust to fewer columns. Mobile: Sidebar is hidden, with a hamburger menu for toggling. Cards stack vertically for better readability. Transitions and Interactions Use smooth animations (300ms) for sidebar transitions between collapsed and expanded states. Hover effects: Slight color changes for menu items and cards. Add a sliding effect for the mobile menu (from left to right) with dimmed background when active.