Sidebar - Copy this React, Tailwind Component to your project

Sidebar-Design-Prompt-1.-Collapsed-State-The-sidebar-is-minimized-and-displays-only-icons-without-labels-(text).-Sidebar-width:-50px.-Icons-are-centered-horizontally.-When-hovering-over-an-icon,-a-tooltip-appears,-showing-the-name-of-the-item-(e.g.,-"My-feed",-"Explore").-The-collapsed-state-includes:-A-profile-picture-icon-at-the-very-top.-All-other-menu-items-are-shown-in-order,-as-icons-only.-2.-Expanded-State-The-sidebar-expands-to-display-both-icons-and-labels-(text).-Sidebar-width:-250px.-Items-are-arranged-as-a-vertical-list:-Icons-are-aligned-to-the-left.-Text-labels-are-left-aligned-and-spaced-20px-from-their-corresponding-icons.-Groups:-My-feed-is-displayed-at-the-top-with-a-profile-picture.-Discover-and-Resources-sections-are-clearly-separated-with-bold-group-headers.-The-selected-item-(active-state)-is-highlighted-with:-A-vertical-accent-bar-on-the-left-side-in-a-distinct-color.-The-background-of-the-selected-item-is-slightly-lighter-than-the-sidebar-background.-3.-Mobile-Mode-The-sidebar-is-hidden-by-default-and-only-a-hamburger-menu-(≡)-icon-is-displayed-in-the-top-left-corner.-When-the-hamburger-menu-is-clicked:-The-sidebar-slides-in-from-the-left-as-a-full-menu-showing-both-icons-and-labels.-The-background-outside-the-sidebar-is-dimmed-to-focus-attention-on-the-menu.-The-sidebar-in-mobile-mode-takes-up-a-maximum-of-80%-of-the-screen-width-or-up-to-320px,-whichever-is-smaller.-4.-Behavior-on-Different-Screen-Sizes-Desktop-(≥-1024px):-The-sidebar-defaults-to-the-collapsed-state.-Users-can-expand-it-using-a-toggle-button.-Tablet-(768px---1024px):-The-sidebar-defaults-to-the-expanded-state,-but-with-a-smaller-width-(180px).-Users-can-still-toggle-between-collapsed-and-expanded-states.-Mobile-(<-768px):-The-sidebar-is-hidden,-and-a-hamburger-menu-is-displayed-instead.-5.-Transition-Effects-When-switching-between-collapsed-and-expanded-states,-the-sidebar-uses-a-smooth-transition-effect-over-300ms.-Icons-and-text-fade-in-simultaneously-when-expanding.-The-slide-in-menu-for-mobile-mode-also-uses-a-300ms-slide-in-effect-from-the-left.-Specific-UI-and-CSS-Details-Sidebar-background:-Dark-color-(#1e1e2f).-Icons-and-labels:-Light-color-(#ffffff).-Hover-state:-Slightly-lighter-background-(#2a2a3c).-Active-state:-Vertical-accent-bar-with-a-highlight-color-(e.g.,-light-blue-or-purple).-Font-size-for-labels:-14px.-Spacing-between-items:-16px.-Responsive-layout:-Use-CSS-Grid-or-Flexbox-to-ensure-alignment-and-adaptability.-Implement-media-queries-to-adjust-behavior-and-layout-for-different-screen-sizes.