@pattern-stack/frontend-patterns 0.2.0-alpha.14 → 0.2.0-alpha.16

package/dist/index.js

@@ -10693,7 +10693,11 @@ const SidebarButton = ({
     }
   );
 };
-const Sidebar = ({ className, footer }) => {
+const Sidebar = ({
+  className,
+  footer,
+  topOffset = "header"
+}) => {
   const { isExpanded, toggleSidebar } = useSidebar();
   const { navigation } = useNavigation();
   const location = reactRouterDom.useLocation();
@@ -10713,9 +10717,9 @@ const Sidebar = ({ className, footer }) => {
     "aside",
     {
       className: cn(
-        "fixed left-0 top-16 flex flex-col bg-background border-r border-border z-40",
+        "fixed left-0 flex flex-col bg-background border-r border-border z-40",
         "transition-all duration-300 ease-in-out",
-        "h-[calc(100vh-4rem)]",
+        topOffset === "none" ? "top-0 h-screen" : "top-16 h-[calc(100vh-4rem)]",
         // Full height minus header (4rem = 64px)
         !isExpanded ? "w-16" : "w-64",
         className
@@ -10723,23 +10727,43 @@ const Sidebar = ({ className, footer }) => {
       "data-component-name": "Sidebar",
       "data-collapsed": !isExpanded,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center p-3 pt-4", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
           {
-            onClick: toggleSidebar,
             className: cn(
-              "w-7 h-7 rounded-md",
-              "bg-muted/50 text-muted-foreground",
-              "flex items-center justify-center",
-              "hover:bg-muted hover:text-foreground",
-              "active:scale-95",
-              "transition-all duration-150 ease-out"
+              "flex items-center p-3 pt-4",
+              isExpanded ? "justify-between gap-2" : "justify-center"
             ),
-            "data-component-name": "SidebarToggle",
-            title: !isExpanded ? "Expand sidebar" : "Collapse sidebar",
-            children: !isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3.5 h-3.5" })
+            "data-component-name": "SidebarHeader",
+            children: [
+              isExpanded && (navigation == null ? void 0 : navigation.logo) != null && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "flex-1 min-w-0 flex items-center",
+                  "data-component-name": "SidebarLogo",
+                  children: typeof navigation.logo === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold text-foreground truncate", children: navigation.logo }) : navigation.logo
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: toggleSidebar,
+                  className: cn(
+                    "w-7 h-7 rounded-md shrink-0",
+                    "bg-muted/50 text-muted-foreground",
+                    "flex items-center justify-center",
+                    "hover:bg-muted hover:text-foreground",
+                    "active:scale-95",
+                    "transition-all duration-150 ease-out"
+                  ),
+                  "data-component-name": "SidebarToggle",
+                  title: !isExpanded ? "Expand sidebar" : "Collapse sidebar",
+                  children: !isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3.5 h-3.5" })
+                }
+              )
+            ]
           }
-        ) }),
+        ),
         /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "flex-1 p-3 space-y-2", "data-component-name": "SidebarNav", children: items.map((item) => {
           const [itemBasePath, itemQuery] = item.path.split("?");
           const currentPath = location.pathname;
@@ -10842,7 +10866,13 @@ const AppLayout = ({ header, sidebar } = {}) => {
   const hideHeader = header === false;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-screen bg-background", children: [
     !hideHeader && /* @__PURE__ */ jsxRuntime.jsx(AppHeader, { ...header ?? {} }),
-    /* @__PURE__ */ jsxRuntime.jsx(Sidebar, { footer: sidebar == null ? void 0 : sidebar.footer }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Sidebar,
+      {
+        footer: sidebar == null ? void 0 : sidebar.footer,
+        topOffset: hideHeader ? "none" : "header"
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(
       "main",
       {