MikrotikManager/app/(main)/layout.tsx

import type { CSSProperties, ReactNode } from "react"
import { AppSidebar } from "@/components/app-sidebar"
import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar"
import { CommandPalette } from "@/components/command-palette"
import { ReleaseNotesModal } from "@/components/release-notes-modal"
import { DataSourceProvider } from "@/lib/data-source"
import { EvoBGPProvider } from "@/lib/evobgp-context"

const SKIP_TO_CONTENT_CLASS =
  "bg-background text-foreground ring-ring sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-50 focus:rounded-md focus:px-3 focus:py-2 focus:text-sm focus:font-medium focus:shadow-sm focus:ring-2"

export default function MainLayout({ children }: { children: ReactNode }) {
  return (
    <DataSourceProvider>
      <EvoBGPProvider>
        <SidebarProvider
          style={{ "--sidebar-width": "240px" } as CSSProperties}
        >
          <a href="#main-content" className={SKIP_TO_CONTENT_CLASS}>
            К содержимому
          </a>
          <AppSidebar />
          <SidebarInset id="main-content" className="h-svh overflow-hidden">
            {children}
          </SidebarInset>
          <CommandPalette />
          <ReleaseNotesModal />
        </SidebarProvider>
      </EvoBGPProvider>
    </DataSourceProvider>
  )
}