Responsive Toggle Navbar - Copy this Html, Bootstrap Component to your project

Create a responsive navbar with a toggle function. On the right side of the page, there will be a black background box containing a left pointing ('<') arrow icon. When the icon is clicked, the navbar should smoothly expand from the right, and the arrow icon should transform into a right pointing ('>') arrow. Clicking it again will collapse the navbar and reverse the icon animation. Inside the navbar, include a logo at the top, followed by four simple nav items: Home, About, Contact, and Products. These items should have a sleek, light bold color scheme with smooth hover and transition animations. The navbar will also feature a vertical black strip extending from top to bottom on the right edge, indicating the presence of the menu. At the bottom of the navbar, add a semi transparent heading, 'Some Products,' followed by seven small product links with a blue underline.