Responsive Navigation System with Sticky Header and Sidebar

Objective:-Create-a-responsive-navigation-system-using-Next.js,-Tailwind-CSS,-and-Shadcn,-consisting-of-a-sticky-header-and-a-responsive-sidebar.-1.-Header-Navigation-(Sticky-on-Desktop-and-Mobile):-•-Left-Side:-Display-a-logo-and-brand-name.-•-Right-Side:-Include-a-profile-button-(icon-only).-•-Behavior:-•-Always-remains-sticky-at-the-top-on-both-desktop-and-mobile.-•-On-mobile,-the-sidebar’s-burger-menu-icon-will-also-appear-in-the-header-(to-toggle-the-sidebar).-2.-Sidebar-Navigation-(Responsive):-•-Content:-•-A-simple-menu-with-items-like-Home,-Dashboard,-and-Reports.-•-Behavior:-•-Desktop:-The-sidebar-is-always-visible-and-positioned-on-the-left-of-the-screen.-•-Mobile:-•-Sidebar-is-hidden-by-default.-•-Toggled-using-a-burger-menu-button-in-the-header.-•-When-opened,-the-sidebar-slides-in-from-below-the-sticky-header.-Implementation-Guidelines:-•-Use-Tailwind-CSS-for-styling-and-responsiveness.-•-Use-Shadcn-components-where-applicable-for-UI-elements.-•-Ensure-accessibility-and-mobile-first-design-principles.