Interactive Tab Bar

This component is a stylish and interactive navigation bar designed using HTML, CSS, and JavaScript. The navigation bar consists of five menu items, each represented by an icon, with a dynamic "tubelight" effect that highlights the active menu item. The bar is styled with a modern black background, rounded corners, and subtle shadow effects to give it a floating appearance. The icons inside the navigation bar are SVGs, which are initially set to a semi-transparent state and become fully opaque when the item is selected. A custom "tubelight" element, which is a white rectangular light strip, moves smoothly to indicate the active menu item. The movement of this light is animated, and its position is controlled by JavaScript when a menu item is clicked. The component also includes additional social media and external link icons, which are positioned as floating meta-links on the page for easy access. These links have a hover effect that changes their background and border color to enhance interactivity. The JavaScript code ensures that when a navigation link is clicked, the active state is smoothly transitioned, and the corresponding light effect follows the clicked item. The component is designed to be visually engaging while providing smooth transitions and interactions for the user.