Two-level Sidebar Navigation with Mobile Off-canvas Menu

This implements a two-level sidebar navigation pattern with the following structure: - For mobile screens, an off-canvas slide-out menu is used which slides in from the left. It contains the first level links and team links. - For larger screens, a persistent vertical sidebar on the left contains the first level and team links. - The top navigation bar contains the page title and user profile link on mobile, and just the user profile link on desktop. - The main content area is to the right. - There is also a provision for a secondary sidebar on desktop screens on the right. The Tailwind CSS classes used include: - Flexbox utilities like flex, flex-col, flex-1 for layout. - Box styling like bg-white, px-4, py-6 etc. - Text styling like text-gray-700, font-semibold etc. - Hover styling like hover:bg-gray-50, hover:text-indigo-600 etc. - Breakpoint specific helpers like lg:hidden, lg:flex etc. - Transition helpers like transition-opacity. - Transform helpers like -translate-x-full. So in summary, it utilizes Tailwind's responsive, breakpoint and transform utilities to create a responsive sidebar navigation.