polen 0.9.0-next.4 → 0.9.0-next.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/build/template/components/sidebar/Sidebar.d.ts +5 -3
- package/build/template/components/sidebar/Sidebar.d.ts.map +1 -1
- package/build/template/components/sidebar/Sidebar.jsx +3 -3
- package/build/template/components/sidebar/Sidebar.jsx.map +1 -1
- package/build/template/routes/root.d.ts.map +1 -1
- package/build/template/routes/root.jsx +24 -29
- package/build/template/routes/root.jsx.map +1 -1
- package/package.json +1 -1
- package/src/template/components/sidebar/Sidebar.tsx +7 -5
- package/src/template/routes/root.tsx +58 -46
@@ -1,7 +1,9 @@
|
|
1
1
|
import type { FileRouter } from '#lib/file-router/index';
|
2
|
-
|
3
|
-
|
2
|
+
import type { BoxOwnProps, LayoutProps, MarginProps } from '@radix-ui/themes/props';
|
3
|
+
interface SidebarProps extends LayoutProps, MarginProps, BoxOwnProps {
|
4
|
+
data: FileRouter.Sidebar.Item[];
|
5
|
+
style?: React.CSSProperties;
|
4
6
|
}
|
5
|
-
export declare const Sidebar: ({
|
7
|
+
export declare const Sidebar: ({ data, ...props }: SidebarProps) => import("react").JSX.Element;
|
6
8
|
export {};
|
7
9
|
//# sourceMappingURL=Sidebar.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../../src/template/components/sidebar/Sidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAA;
|
1
|
+
{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../../src/template/components/sidebar/Sidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAExD,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAGnF,UAAU,YAAa,SAAQ,WAAW,EAAE,WAAW,EAAE,WAAW;IAClE,IAAI,EAAE,UAAU,CAAC,OAAO,CAAC,IAAI,EAAE,CAAA;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B;AAED,eAAO,MAAM,OAAO,GAAI,oBAAoB,YAAY,gCAiBvD,CAAA"}
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import { Box } from '@radix-ui/themes';
|
2
2
|
import { Items } from "./SidebarItem.jsx";
|
3
|
-
export const Sidebar = ({
|
4
|
-
return (<Box data-testid='sidebar' role='Sidebar'
|
3
|
+
export const Sidebar = ({ data, ...props }) => {
|
4
|
+
return (<Box data-testid='sidebar' role='Sidebar' {...props}>
|
5
5
|
<style>
|
6
6
|
{`
|
7
7
|
div[role="Sidebar"] a:not([data-active]):hover {
|
@@ -9,7 +9,7 @@ export const Sidebar = ({ items }) => {
|
|
9
9
|
}
|
10
10
|
`}
|
11
11
|
</style>
|
12
|
-
<Items items={
|
12
|
+
<Items items={data}/>
|
13
13
|
</Box>);
|
14
14
|
};
|
15
15
|
//# sourceMappingURL=Sidebar.jsx.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Sidebar.jsx","sourceRoot":"","sources":["../../../../src/template/components/sidebar/Sidebar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAA;
|
1
|
+
{"version":3,"file":"Sidebar.jsx","sourceRoot":"","sources":["../../../../src/template/components/sidebar/Sidebar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAA;AAEtC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAOzC,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAgB,EAAE,EAAE;IAC1D,OAAO,CACL,CAAC,GAAG,CACF,WAAW,CAAC,SAAS,CACrB,IAAI,CAAC,SAAS,CACd,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,KAAK,CACJ;QAAA,CAAC;;;;SAIA,CACH;MAAA,EAAE,KAAK,CACP;MAAA,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,EACrB;IAAA,EAAE,GAAG,CAAC,CACP,CAAA;AACH,CAAC,CAAA"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../../src/template/routes/root.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AA8B1D,eAAO,MAAM,SAAS,mCA6BrB,CAAA;
|
1
|
+
{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../../src/template/routes/root.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AA8B1D,eAAO,MAAM,SAAS,mCA6BrB,CAAA;AAwJD,eAAO,MAAM,IAAI;;;;CAIf,CAAA"}
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import { createRoute } from '#lib/react-router-aid/react-router-aid';
|
2
2
|
import { GitHubLogoIcon } from '@radix-ui/react-icons';
|
3
|
-
import { Box, Button, Heading, Text } from '@radix-ui/themes';
|
3
|
+
import { Box, Button, Grid, Heading, Text } from '@radix-ui/themes';
|
4
4
|
import { Flex, Theme } from '@radix-ui/themes';
|
5
5
|
import radixStylesUrl from '@radix-ui/themes/styles.css?url';
|
6
6
|
import { Arr } from '@wollybeard/kit';
|
@@ -58,37 +58,32 @@ const Layout = () => {
|
|
58
58
|
};
|
59
59
|
const currentNavPathExp = getCurrentNavPathExp();
|
60
60
|
const sidebar = currentNavPathExp && projectDataPages.sidebarIndex[currentNavPathExp];
|
61
|
-
const
|
62
|
-
|
63
|
-
<Box m='8'>
|
64
|
-
<Flex align='center' gap='8' pb='4' mb='8' style={{
|
61
|
+
const isShowSidebar = sidebar && sidebar.items.length > 0;
|
62
|
+
const header = (<Flex gridArea={'header'} align='center' gap='8' pb='4' mb='8' style={{
|
65
63
|
borderBottom: `1px solid var(--gray-3)`,
|
66
64
|
}}>
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
</Flex>
|
74
|
-
</LinkReactRouter>
|
75
|
-
<Flex direction='row' gap='4'>
|
76
|
-
{projectDataNavbar.map((item, key) => (<Link key={key} color='gray' to={item.pathExp}>
|
77
|
-
{item.title}
|
78
|
-
</Link>))}
|
79
|
-
</Flex>
|
65
|
+
<LinkReactRouter to='/' style={{ color: `inherit`, textDecoration: `none` }}>
|
66
|
+
<Flex align='center' gap='2'>
|
67
|
+
<GitHubLogoIcon style={{ width: 30, height: 30 }}/>
|
68
|
+
<Text size='3' weight='medium'>
|
69
|
+
{templateVariables.title}
|
70
|
+
</Text>
|
80
71
|
</Flex>
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
72
|
+
</LinkReactRouter>
|
73
|
+
<Flex direction='row' gap='4'>
|
74
|
+
{projectDataNavbar.map((item, key) => (<Link key={key} color='gray' to={item.pathExp}>
|
75
|
+
{item.title}
|
76
|
+
</Link>))}
|
77
|
+
</Flex>
|
78
|
+
</Flex>);
|
79
|
+
return (<Theme asChild>
|
80
|
+
<Grid width={{ initial: 'var(--container-4)' }} areas="'header header header header header header header header' 'sidebar sidebar . content content content content content'" rows='min-content auto' columns='repeat(8, 1fr)' gapX='2' my='8' mx='auto'>
|
81
|
+
{header}
|
82
|
+
{isShowSidebar && (<Sidebar gridColumn='1 / 3' gridRow='2 / auto' data={sidebar.items}/>)}
|
83
|
+
<Box gridArea='content / content / auto / 8'>
|
84
|
+
<Outlet />
|
85
|
+
</Box>
|
86
|
+
</Grid>
|
92
87
|
</Theme>);
|
93
88
|
};
|
94
89
|
const children = [
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"root.jsx","sourceRoot":"","sources":["../../../src/template/routes/root.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAA;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AACtD,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAA;
|
1
|
+
{"version":3,"file":"root.jsx","sourceRoot":"","sources":["../../../src/template/routes/root.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
@@ -1,17 +1,19 @@
|
|
1
1
|
import type { FileRouter } from '#lib/file-router/index'
|
2
2
|
import { Box } from '@radix-ui/themes'
|
3
|
+
import type { BoxOwnProps, LayoutProps, MarginProps } from '@radix-ui/themes/props'
|
3
4
|
import { Items } from './SidebarItem.tsx'
|
4
5
|
|
5
|
-
interface SidebarProps {
|
6
|
-
|
6
|
+
interface SidebarProps extends LayoutProps, MarginProps, BoxOwnProps {
|
7
|
+
data: FileRouter.Sidebar.Item[]
|
8
|
+
style?: React.CSSProperties
|
7
9
|
}
|
8
10
|
|
9
|
-
export const Sidebar = ({
|
11
|
+
export const Sidebar = ({ data, ...props }: SidebarProps) => {
|
10
12
|
return (
|
11
13
|
<Box
|
12
14
|
data-testid='sidebar'
|
13
15
|
role='Sidebar'
|
14
|
-
|
16
|
+
{...props}
|
15
17
|
>
|
16
18
|
<style>
|
17
19
|
{`
|
@@ -20,7 +22,7 @@ export const Sidebar = ({ items }: SidebarProps) => {
|
|
20
22
|
}
|
21
23
|
`}
|
22
24
|
</style>
|
23
|
-
<Items items={
|
25
|
+
<Items items={data} />
|
24
26
|
</Box>
|
25
27
|
)
|
26
28
|
}
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import type { ReactRouter } from '#dep/react-router/index'
|
2
2
|
import { createRoute } from '#lib/react-router-aid/react-router-aid'
|
3
3
|
import { GitHubLogoIcon } from '@radix-ui/react-icons'
|
4
|
-
import { Box, Button, Heading, Text } from '@radix-ui/themes'
|
4
|
+
import { Box, Button, Grid, Heading, Text } from '@radix-ui/themes'
|
5
5
|
import { Flex, Theme } from '@radix-ui/themes'
|
6
6
|
import radixStylesUrl from '@radix-ui/themes/styles.css?url'
|
7
7
|
import { Arr } from '@wollybeard/kit'
|
@@ -75,53 +75,65 @@ const Layout = () => {
|
|
75
75
|
|
76
76
|
const currentNavPathExp = getCurrentNavPathExp()
|
77
77
|
const sidebar = currentNavPathExp && projectDataPages.sidebarIndex[currentNavPathExp]
|
78
|
-
const
|
78
|
+
const isShowSidebar = sidebar && sidebar.items.length > 0
|
79
|
+
|
80
|
+
const header = (
|
81
|
+
<Flex
|
82
|
+
gridArea={'header'}
|
83
|
+
align='center'
|
84
|
+
gap='8'
|
85
|
+
pb='4'
|
86
|
+
mb='8'
|
87
|
+
style={{
|
88
|
+
borderBottom: `1px solid var(--gray-3)`,
|
89
|
+
}}
|
90
|
+
>
|
91
|
+
<LinkReactRouter
|
92
|
+
to='/'
|
93
|
+
style={{ color: `inherit`, textDecoration: `none` }}
|
94
|
+
>
|
95
|
+
<Flex align='center' gap='2'>
|
96
|
+
<GitHubLogoIcon style={{ width: 30, height: 30 }} />
|
97
|
+
<Text size='3' weight='medium'>
|
98
|
+
{templateVariables.title}
|
99
|
+
</Text>
|
100
|
+
</Flex>
|
101
|
+
</LinkReactRouter>
|
102
|
+
<Flex direction='row' gap='4'>
|
103
|
+
{projectDataNavbar.map((item, key) => (
|
104
|
+
<Link key={key} color='gray' to={item.pathExp}>
|
105
|
+
{item.title}
|
106
|
+
</Link>
|
107
|
+
))}
|
108
|
+
</Flex>
|
109
|
+
</Flex>
|
110
|
+
)
|
111
|
+
|
79
112
|
return (
|
80
113
|
<Theme asChild>
|
81
|
-
<
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
<Link key={key} color='gray' to={item.pathExp}>
|
105
|
-
{item.title}
|
106
|
-
</Link>
|
107
|
-
))}
|
108
|
-
</Flex>
|
109
|
-
</Flex>
|
110
|
-
{showSidebar
|
111
|
-
? (
|
112
|
-
<Flex gap='8'>
|
113
|
-
<Sidebar items={sidebar.items} />
|
114
|
-
<Box style={{ flex: 1 }}>
|
115
|
-
<Outlet />
|
116
|
-
</Box>
|
117
|
-
</Flex>
|
118
|
-
)
|
119
|
-
: (
|
120
|
-
<Box>
|
121
|
-
<Outlet />
|
122
|
-
</Box>
|
123
|
-
)}
|
124
|
-
</Box>
|
114
|
+
<Grid
|
115
|
+
width={{ initial: 'var(--container-4)' }}
|
116
|
+
areas="'header header header header header header header header' 'sidebar sidebar . content content content content content'"
|
117
|
+
rows='min-content auto'
|
118
|
+
columns='repeat(8, 1fr)'
|
119
|
+
gapX='2'
|
120
|
+
my='8'
|
121
|
+
mx='auto'
|
122
|
+
>
|
123
|
+
{header}
|
124
|
+
{isShowSidebar && (
|
125
|
+
<Sidebar
|
126
|
+
gridColumn='1 / 3'
|
127
|
+
gridRow='2 / auto'
|
128
|
+
data={sidebar.items}
|
129
|
+
// ml='-100px'
|
130
|
+
// style={{ transform: 'translate(calc(-100% - var(--space-8)))' }}
|
131
|
+
/>
|
132
|
+
)}
|
133
|
+
<Box gridArea='content / content / auto / 8'>
|
134
|
+
<Outlet />
|
135
|
+
</Box>
|
136
|
+
</Grid>
|
125
137
|
</Theme>
|
126
138
|
)
|
127
139
|
}
|