Sidebar Navigation with Indicator Badges

This component implements a vertical sidebar navigation menu with indicator badges. It uses Flexbox to arrange the navigation links vertically and adds styling like background colors, borders, and rounded corners to visually distinguish the active link and badge indicators. The sidebar itself has a border and background color to separate it from the main content area. The logo sits fixed at the top within the sidebar. Below that is the navigation section that takes up the remaining height and uses Flex column layout. The navigation links have different styles based on state - the active link has a background color and text color change compared to the default link styles. The indicator badges are implemented as inline elements that conditionally show a background color on hover/active.

Similar Components

Other components related to sidebar, navigation, menu, flexbox, indicators, badges tags