@sykoramaros/marosh-components 0.1.3 → 0.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -0
- package/dist/index.d.ts +13 -0
- package/dist/index.js +19 -19
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +4164 -1437
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/components/MainSidebarLayout.tsx +107 -0
- package/src/index.ts +4 -0
package/package.json
CHANGED
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Sidebar,
|
|
3
|
+
SidebarContent,
|
|
4
|
+
SidebarGroup,
|
|
5
|
+
SidebarGroupContent,
|
|
6
|
+
SidebarGroupLabel,
|
|
7
|
+
SidebarMenu,
|
|
8
|
+
SidebarMenuButton,
|
|
9
|
+
SidebarMenuItem,
|
|
10
|
+
SidebarTrigger,
|
|
11
|
+
SidebarProvider,
|
|
12
|
+
} from "@/components/ui/sidebar"
|
|
13
|
+
import { Link, Outlet } from "@tanstack/react-router"
|
|
14
|
+
import { MainNav, type NavItem } from "@/components/MainNav"
|
|
15
|
+
import { Footer, type FooterProps } from "@/components/Footer"
|
|
16
|
+
|
|
17
|
+
export interface MainSidebarLayoutProps {
|
|
18
|
+
useSidebar?: boolean
|
|
19
|
+
useMainNav?: boolean
|
|
20
|
+
useFooter?: boolean
|
|
21
|
+
appName?: string
|
|
22
|
+
navItems?: NavItem[]
|
|
23
|
+
footerProps?: FooterProps
|
|
24
|
+
sidebarDefaultOpen?: boolean
|
|
25
|
+
children?: React.ReactNode
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
export const MainSidebarLayout = ({
|
|
29
|
+
useSidebar = false,
|
|
30
|
+
useMainNav = false,
|
|
31
|
+
useFooter = false,
|
|
32
|
+
appName = "App",
|
|
33
|
+
navItems = [],
|
|
34
|
+
footerProps,
|
|
35
|
+
sidebarDefaultOpen = true,
|
|
36
|
+
}: MainSidebarLayoutProps) => {
|
|
37
|
+
// Layout bez sidebaru
|
|
38
|
+
if (!useSidebar) {
|
|
39
|
+
return (
|
|
40
|
+
<div className="flex-1 flex min-h-screen flex-col">
|
|
41
|
+
{useMainNav && <MainNav navItems={navItems} />}
|
|
42
|
+
<main className="flex-1 p-5">
|
|
43
|
+
<Outlet />
|
|
44
|
+
</main>
|
|
45
|
+
{useFooter && footerProps && (
|
|
46
|
+
<footer>
|
|
47
|
+
<Footer {...footerProps} />
|
|
48
|
+
</footer>
|
|
49
|
+
)}
|
|
50
|
+
</div>
|
|
51
|
+
)
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
// Layout se sidebarem
|
|
55
|
+
return (
|
|
56
|
+
<SidebarProvider defaultOpen={sidebarDefaultOpen}>
|
|
57
|
+
<div className="flex min-h-screen w-full">
|
|
58
|
+
<Sidebar>
|
|
59
|
+
<SidebarContent>
|
|
60
|
+
<SidebarGroup>
|
|
61
|
+
<SidebarGroupLabel className="h-14">
|
|
62
|
+
<span className="text-md font-medium">{appName}</span>
|
|
63
|
+
</SidebarGroupLabel>
|
|
64
|
+
<SidebarGroupContent>
|
|
65
|
+
<SidebarMenu>
|
|
66
|
+
{navItems.map((item) => (
|
|
67
|
+
<SidebarMenuItem key={item.title}>
|
|
68
|
+
<SidebarMenuButton asChild>
|
|
69
|
+
<Link to={item.url}>
|
|
70
|
+
{item.icon && (
|
|
71
|
+
<span className="inline-flex h-5 w-5 shrink-0 items-center">
|
|
72
|
+
<item.icon className="h-full w-full" />
|
|
73
|
+
</span>
|
|
74
|
+
)}
|
|
75
|
+
<span className="text-base font-medium">
|
|
76
|
+
{item.title}
|
|
77
|
+
</span>
|
|
78
|
+
</Link>
|
|
79
|
+
</SidebarMenuButton>
|
|
80
|
+
</SidebarMenuItem>
|
|
81
|
+
))}
|
|
82
|
+
</SidebarMenu>
|
|
83
|
+
</SidebarGroupContent>
|
|
84
|
+
</SidebarGroup>
|
|
85
|
+
</SidebarContent>
|
|
86
|
+
</Sidebar>
|
|
87
|
+
|
|
88
|
+
<div className="flex-1 flex flex-col">
|
|
89
|
+
<header className="sticky top-0 z-10 flex items-center border-b bg-background px-4 h-14 gap-2">
|
|
90
|
+
<SidebarTrigger />
|
|
91
|
+
{useMainNav && <MainNav navItems={navItems} />}
|
|
92
|
+
</header>
|
|
93
|
+
|
|
94
|
+
<main className="flex-1 p-6">
|
|
95
|
+
<Outlet />
|
|
96
|
+
</main>
|
|
97
|
+
|
|
98
|
+
{useFooter && footerProps && (
|
|
99
|
+
<footer>
|
|
100
|
+
<Footer {...footerProps} />
|
|
101
|
+
</footer>
|
|
102
|
+
)}
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
</SidebarProvider>
|
|
106
|
+
)
|
|
107
|
+
}
|