@sykoramaros/marosh-components 0.1.4 → 0.1.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sykoramaros/marosh-components",
   "private": false,
-  "version": "0.1.4",
+  "version": "0.1.6",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/App.tsx

@@ -1,10 +1,10 @@
 // import "./App.css"
 
 import { Button } from "@/components/ui/button"
-import { CustomButton } from "@/components/CustomButton"
-import { MainNav } from "@/components/MainNav"
+import { CustomButton } from "@/components/basicComponents/CustomButton"
+import { MainNav } from "@/components/basicComponents/MainNav"
 import { Menu } from "lucide-react"
-import { Footer } from "@/components/Footer"
+import { Footer } from "@/components/basicComponents/Footer"
 export const App = () => {
   return (
     <>

package/src/components/basicComponents/MainSidebarLayout.tsx

@@ -0,0 +1,107 @@
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarTrigger,
+  SidebarProvider,
+} from "@/components/ui/sidebar"
+import { Link, Outlet } from "@tanstack/react-router"
+import { MainNav, type NavItem } from "@/components/basicComponents/MainNav"
+import { Footer, type FooterProps } from "@/components/basicComponents/Footer"
+
+export interface MainSidebarLayoutProps {
+  useSidebar?: boolean
+  useMainNav?: boolean
+  useFooter?: boolean
+  appName?: string
+  navItems?: NavItem[]
+  footerProps?: FooterProps
+  sidebarDefaultOpen?: boolean
+  children?: React.ReactNode
+}
+
+export const MainSidebarLayout = ({
+  useSidebar = false,
+  useMainNav = false,
+  useFooter = false,
+  appName = "App",
+  navItems = [],
+  footerProps,
+  sidebarDefaultOpen = true,
+}: MainSidebarLayoutProps) => {
+  // Layout bez sidebaru
+  if (!useSidebar) {
+    return (
+      <div className="flex-1 flex min-h-screen flex-col">
+        {useMainNav && <MainNav navItems={navItems} />}
+        <main className="flex-1 p-5">
+          <Outlet />
+        </main>
+        {useFooter && footerProps && (
+          <footer>
+            <Footer {...footerProps} />
+          </footer>
+        )}
+      </div>
+    )
+  }
+
+  // Layout se sidebarem
+  return (
+    <SidebarProvider defaultOpen={sidebarDefaultOpen}>
+      <div className="flex min-h-screen w-full">
+        <Sidebar>
+          <SidebarContent>
+            <SidebarGroup>
+              <SidebarGroupLabel className="h-14">
+                <span className="text-md font-medium">{appName}</span>
+              </SidebarGroupLabel>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {navItems.map((item) => (
+                    <SidebarMenuItem key={item.title}>
+                      <SidebarMenuButton asChild>
+                        <Link to={item.url}>
+                          {item.icon && (
+                            <span className="inline-flex h-5 w-5 shrink-0 items-center">
+                              <item.icon className="h-full w-full" />
+                            </span>
+                          )}
+                          <span className="text-base font-medium">
+                            {item.title}
+                          </span>
+                        </Link>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          </SidebarContent>
+        </Sidebar>
+
+        <div className="flex-1 flex flex-col">
+          <header className="sticky top-0 z-10 flex items-center border-b bg-background px-4 h-14 gap-2">
+            <SidebarTrigger />
+            {useMainNav && <MainNav navItems={navItems} />}
+          </header>
+
+          <main className="flex-1 p-6">
+            <Outlet />
+          </main>
+
+          {useFooter && footerProps && (
+            <footer>
+              <Footer {...footerProps} />
+            </footer>
+          )}
+        </div>
+      </div>
+    </SidebarProvider>
+  )
+}

package/src/index.ts

@@ -3,15 +3,19 @@ export { Link } from "@tanstack/react-router"
 export {
   CustomButton,
   type CustomButtonProps,
-} from "@/components/CustomButton.tsx"
+} from "@/components/basicComponents/CustomButton"
 export {
   MainNav,
   type NavItem,
   type MainNavProps,
-} from "@/components/MainNav.tsx"
+} from "@/components/basicComponents/MainNav"
 export {
   Footer,
   type FooterProps,
   type FooterLinks,
   type FooterSocial,
-} from "@/components/Footer.tsx"
+} from "@/components/basicComponents/Footer"
+export {
+  MainSidebarLayout,
+  type MainSidebarLayoutProps,
+} from "@/components/basicComponents/MainSidebarLayout"