feat: add ContentOnlyLayout and defaultOpen prop to SidebarLayout

.changeset/sidebar-layout-options.md

@@ -0,0 +1,18 @@
+---
+"@tailor-platform/app-shell": minor
+---
+
+Add `ContentOnlyLayout` component and `defaultOpen` prop to `SidebarLayout`.
+
+- `ContentOnlyLayout`: A layout without sidebar for use cases like kiosk screens where only the route content should be rendered.
+- `SidebarLayout` now accepts a `defaultOpen` prop to control the initial expanded/collapsed state of the sidebar.
+
+```tsx
+import { SidebarLayout, ContentOnlyLayout } from "@tailor-platform/app-shell";
+
+// Sidebar-less layout for kiosk or embedded screens
+<ContentOnlyLayout />
+
+// Sidebar collapsed by default
+<SidebarLayout defaultOpen={false} />
+```

packages/core/src/components/content-only-layout.tsx

@@ -0,0 +1,30 @@
+import { AppShellOutlet } from "@/components/content";
+
+export type ContentOnlyLayoutProps = {
+  /**
+   * Custom content renderer.
+   *
+   * @example
+   * ```tsx
+   * <ContentOnlyLayout>
+   *   {({ Outlet }) => (
+   *     <>
+   *       <CustomHeader />
+   *       <Outlet />
+   *       <CustomFooter />
+   *     </>
+   *   )}
+   * </ContentOnlyLayout>
+   * ```
+   */
+  children?: (props: { Outlet: () => React.ReactNode }) => React.ReactNode;
+};
+
+export const ContentOnlyLayout = (props: ContentOnlyLayoutProps) => {
+  const Children = props.children ? props.children({ Outlet: AppShellOutlet }) : null;
+  return (
+    <div className="astw:flex astw:flex-col astw:min-h-svh astw:px-6">
+      {Children ?? <AppShellOutlet />}
+    </div>
+  );
+};

packages/core/src/components/sidebar/sidebar-layout.tsx

@@ -35,6 +35,13 @@ export type SidebarLayoutProps = {
    * ```
    */
   sidebar?: React.ReactNode;
+
+  /**
+   * Whether the sidebar is expanded by default.
+   *
+   * @default true
+   */
+  defaultOpen?: boolean;
 };
 
 const HidableSidebarTrigger = () => {
@@ -56,7 +63,7 @@ export const SidebarLayout = (props: SidebarLayoutProps) => {
   };
 
   return (
-    <SidebarProvider className="astw:flex astw:flex-col">
+    <SidebarProvider defaultOpen={props.defaultOpen} className="astw:flex astw:flex-col">
       <div className="astw:flex astw:flex-1">
         {props.sidebar ?? <DefaultSidebar />}
         <SidebarInset className="astw:w-[calc(100%-var(--sidebar-width))]">

packages/core/src/index.ts

@@ -1,6 +1,7 @@
 import "./globals.css";
 export { AppShell, type AppShellProps } from "./components/appshell";
 export { SidebarLayout, DefaultSidebar } from "./components/sidebar/index";
+export { ContentOnlyLayout, type ContentOnlyLayoutProps } from "./components/content-only-layout";
 export { CommandPalette } from "./components/command-palette";
 export {
   useRegisterCommandPaletteActions,