feat: restructure sidebar component and update imports in AppLayout

src/components/AppLayout.tsx

@@ -1,7 +1,7 @@
-import { type ReactNode } from 'react'
-import { AppSidebar } from '@/components/AppSidebar'
 import { PageHeader } from '@/components/PageHeader'
+import { AppSidebar } from '@/components/sidebar/AppSidebar'
 import { SidebarProvider } from '@/contexts/SidebarContext'
+import { type ReactNode } from 'react'
 
 interface AppLayoutProps {
   children: ReactNode
@@ -10,7 +10,12 @@ interface AppLayoutProps {
   headerActions?: ReactNode
 }
 
-export function AppLayout({ children, title, description, headerActions }: AppLayoutProps) {
+export function AppLayout({
+  children,
+  title,
+  description,
+  headerActions,
+}: AppLayoutProps) {
   return (
     <SidebarProvider>
       <div className="flex h-screen bg-background">
@@ -20,9 +25,7 @@ export function AppLayout({ children, title, description, headerActions }: AppLa
             {headerActions}
           </PageHeader>
           <main className="flex-1 overflow-y-auto">
-            <div className="container mx-auto p-6">
+            <div className="container mx-auto p-6">{children}</div>
-              {children}
-            </div>
           </main>
         </div>
       </div>