polen 0.8.1 → 0.8.2-next.1
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../src/template/components/Sidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAMxD,UAAU,YAAY;IACpB,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC,IAAI,EAAE,CAAA;CACjC;AAED,eAAO,MAAM,OAAO,GAAI,WAAW,YAAY,
|
|
1
|
+
{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../src/template/components/Sidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAMxD,UAAU,YAAY;IACpB,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC,IAAI,EAAE,CAAA;CACjC;AAED,eAAO,MAAM,OAAO,GAAI,WAAW,YAAY,gCA+C9C,CAAA"}
|
|
@@ -12,22 +12,43 @@ export const Sidebar = ({ items }) => {
|
|
|
12
12
|
height: `100%`,
|
|
13
13
|
paddingRight: `var(--space-4)`,
|
|
14
14
|
}}>
|
|
15
|
+
<style>
|
|
16
|
+
{`
|
|
17
|
+
/* Using data attributes - more idiomatic for Radix UI */
|
|
18
|
+
.sidebar-nav-item:hover:not([data-active]) {
|
|
19
|
+
background-color: var(--gray-2) !important;
|
|
20
|
+
}
|
|
21
|
+
.sidebar-section:hover:not([data-active]):not([data-active-child]) {
|
|
22
|
+
background-color: var(--gray-2) !important;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/* Alternative with class names (current approach) */
|
|
26
|
+
/*
|
|
27
|
+
.sidebar-nav-item:hover:not(.active) {
|
|
28
|
+
background-color: var(--gray-2) !important;
|
|
29
|
+
}
|
|
30
|
+
.sidebar-section:hover:not(.active):not(.has-active-child) {
|
|
31
|
+
background-color: var(--gray-2) !important;
|
|
32
|
+
}
|
|
33
|
+
*/
|
|
34
|
+
`}
|
|
35
|
+
</style>
|
|
15
36
|
<Flex direction='column' gap='1'>
|
|
16
|
-
{items.map((item) => (<
|
|
37
|
+
{items.map((item) => (<SidebarItem key={item.pathExp} item={item} currentPathExp={location.pathname}/>))}
|
|
17
38
|
</Flex>
|
|
18
39
|
</Box>);
|
|
19
40
|
};
|
|
20
|
-
const
|
|
41
|
+
const SidebarItem = ({ item, currentPathExp, level = 0 }) => {
|
|
21
42
|
if (item.type === `ItemLink`) {
|
|
22
|
-
return <
|
|
43
|
+
return <SidebarItemLink nav={item} currentPathExp={currentPathExp} level={level}/>;
|
|
23
44
|
}
|
|
24
|
-
return <
|
|
45
|
+
return <SidebarItemSection section={item} currentPathExp={currentPathExp} level={level}/>;
|
|
25
46
|
};
|
|
26
|
-
const
|
|
47
|
+
const SidebarItemLink = ({ nav, currentPathExp, level }) => {
|
|
27
48
|
// Normalize paths for comparison - remove leading slash if present
|
|
28
49
|
const normalizedCurrentPath = currentPathExp.startsWith('/') ? currentPathExp.slice(1) : currentPathExp;
|
|
29
50
|
const isActive = normalizedCurrentPath === nav.pathExp;
|
|
30
|
-
return (<Link to={`/${nav.pathExp}`} style={{
|
|
51
|
+
return (<Link to={`/${nav.pathExp}`} data-active={isActive || undefined} className='sidebar-nav-item' style={{
|
|
31
52
|
textDecoration: `none`,
|
|
32
53
|
color: isActive ? `var(--accent-11)` : `var(--gray-12)`,
|
|
33
54
|
padding: `var(--space-2) var(--space-3)`,
|
|
@@ -36,21 +57,13 @@ const SidebarNavItem = ({ nav, currentPathExp, level }) => {
|
|
|
36
57
|
display: `block`,
|
|
37
58
|
backgroundColor: isActive ? `var(--accent-3)` : `transparent`,
|
|
38
59
|
transition: `background-color 0.2s ease, color 0.2s ease`,
|
|
39
|
-
}} onMouseEnter={(e) => {
|
|
40
|
-
if (!isActive) {
|
|
41
|
-
e.currentTarget.style.backgroundColor = `var(--gray-2)`;
|
|
42
|
-
}
|
|
43
|
-
}} onMouseLeave={(e) => {
|
|
44
|
-
if (!isActive) {
|
|
45
|
-
e.currentTarget.style.backgroundColor = `transparent`;
|
|
46
|
-
}
|
|
47
60
|
}}>
|
|
48
61
|
<Text size='2' weight={isActive ? `medium` : `regular`}>
|
|
49
62
|
{nav.title}
|
|
50
63
|
</Text>
|
|
51
64
|
</Link>);
|
|
52
65
|
};
|
|
53
|
-
const
|
|
66
|
+
const SidebarItemSection = ({ section, currentPathExp, level }) => {
|
|
54
67
|
const [isExpanded, setIsExpanded] = useState(true);
|
|
55
68
|
// Normalize paths for comparison - remove leading slash if present
|
|
56
69
|
const normalizedCurrentPath = currentPathExp.startsWith('/') ? currentPathExp.slice(1) : currentPathExp;
|
|
@@ -58,24 +71,14 @@ const SidebarSectionItem = ({ section, currentPathExp, level }) => {
|
|
|
58
71
|
const hasActiveChild = section.navs.some(nav => normalizedCurrentPath === nav.pathExp);
|
|
59
72
|
const isActiveGroup = isDirectlyActive || hasActiveChild;
|
|
60
73
|
return (<>
|
|
61
|
-
<Flex align='center' style={{
|
|
74
|
+
<Flex align='center' data-active={isDirectlyActive || undefined} data-active-child={hasActiveChild || undefined} className='sidebar-section' style={{
|
|
62
75
|
padding: `var(--space-2) var(--space-3)`,
|
|
63
76
|
paddingLeft: `calc(var(--space-3) + ${(level * 16).toString()}px)`,
|
|
64
77
|
borderRadius: `var(--radius-2)`,
|
|
65
78
|
backgroundColor: isDirectlyActive ? `var(--accent-3)` : hasActiveChild ? `var(--accent-2)` : `transparent`,
|
|
66
79
|
transition: `background-color 0.2s ease`,
|
|
67
|
-
}} onMouseEnter={(e) => {
|
|
68
|
-
if (!isActiveGroup) {
|
|
69
|
-
e.currentTarget.style.backgroundColor = `var(--gray-2)`;
|
|
70
|
-
}
|
|
71
|
-
}} onMouseLeave={(e) => {
|
|
72
|
-
if (!isActiveGroup) {
|
|
73
|
-
e.currentTarget.style.backgroundColor = `transparent`;
|
|
74
|
-
}
|
|
75
80
|
}}>
|
|
76
|
-
<Box onClick={(
|
|
77
|
-
e.stopPropagation();
|
|
78
|
-
console.log(`Chevron clicked!`);
|
|
81
|
+
<Box onClick={() => {
|
|
79
82
|
setIsExpanded(!isExpanded);
|
|
80
83
|
}} style={{
|
|
81
84
|
display: `flex`,
|
|
@@ -105,7 +108,7 @@ const SidebarSectionItem = ({ section, currentPathExp, level }) => {
|
|
|
105
108
|
</Text>)}
|
|
106
109
|
</Flex>
|
|
107
110
|
{isExpanded && (<Flex direction='column' gap='1'>
|
|
108
|
-
{section.navs.map((nav) => (<
|
|
111
|
+
{section.navs.map((nav) => (<SidebarItemLink key={nav.pathExp} nav={nav} currentPathExp={currentPathExp} level={level + 1}/>))}
|
|
109
112
|
</Flex>)}
|
|
110
113
|
</>);
|
|
111
114
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sidebar.jsx","sourceRoot":"","sources":["../../../src/template/components/Sidebar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACzE,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAA;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAMhD,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,KAAK,EAAgB,EAAE,EAAE;IACjD,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAA;IAE9B,OAAO,CACL,CAAC,GAAG,CACF,WAAW,CAAC,SAAS,CACrB,KAAK,CAAC,CAAC;YACL,KAAK,EAAE,OAAO;YACd,QAAQ,EAAE,OAAO;YACjB,UAAU,EAAE,CAAC;YACb,WAAW,EAAE,yBAAyB;YACtC,MAAM,EAAE,MAAM;YACd,YAAY,EAAE,gBAAgB;SAC/B,CAAC,CAEF;MAAA,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,CAC9B;QAAA,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,CAAC,
|
|
1
|
+
{"version":3,"file":"Sidebar.jsx","sourceRoot":"","sources":["../../../src/template/components/Sidebar.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -23,9 +23,30 @@ export const Sidebar = ({ items }: SidebarProps) => {
|
|
|
23
23
|
paddingRight: `var(--space-4)`,
|
|
24
24
|
}}
|
|
25
25
|
>
|
|
26
|
+
<style>
|
|
27
|
+
{`
|
|
28
|
+
/* Using data attributes - more idiomatic for Radix UI */
|
|
29
|
+
.sidebar-nav-item:hover:not([data-active]) {
|
|
30
|
+
background-color: var(--gray-2) !important;
|
|
31
|
+
}
|
|
32
|
+
.sidebar-section:hover:not([data-active]):not([data-active-child]) {
|
|
33
|
+
background-color: var(--gray-2) !important;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
/* Alternative with class names (current approach) */
|
|
37
|
+
/*
|
|
38
|
+
.sidebar-nav-item:hover:not(.active) {
|
|
39
|
+
background-color: var(--gray-2) !important;
|
|
40
|
+
}
|
|
41
|
+
.sidebar-section:hover:not(.active):not(.has-active-child) {
|
|
42
|
+
background-color: var(--gray-2) !important;
|
|
43
|
+
}
|
|
44
|
+
*/
|
|
45
|
+
`}
|
|
46
|
+
</style>
|
|
26
47
|
<Flex direction='column' gap='1'>
|
|
27
48
|
{items.map((item) => (
|
|
28
|
-
<
|
|
49
|
+
<SidebarItem
|
|
29
50
|
key={item.pathExp}
|
|
30
51
|
item={item}
|
|
31
52
|
currentPathExp={location.pathname}
|
|
@@ -36,27 +57,27 @@ export const Sidebar = ({ items }: SidebarProps) => {
|
|
|
36
57
|
)
|
|
37
58
|
}
|
|
38
59
|
|
|
39
|
-
interface
|
|
60
|
+
interface SidebarItemProps {
|
|
40
61
|
item: FileRouter.Sidebar.Item
|
|
41
62
|
currentPathExp: string
|
|
42
63
|
level?: number
|
|
43
64
|
}
|
|
44
65
|
|
|
45
|
-
const
|
|
66
|
+
const SidebarItem = ({ item, currentPathExp, level = 0 }: SidebarItemProps) => {
|
|
46
67
|
if (item.type === `ItemLink`) {
|
|
47
|
-
return <
|
|
68
|
+
return <SidebarItemLink nav={item} currentPathExp={currentPathExp} level={level} />
|
|
48
69
|
}
|
|
49
70
|
|
|
50
|
-
return <
|
|
71
|
+
return <SidebarItemSection section={item} currentPathExp={currentPathExp} level={level} />
|
|
51
72
|
}
|
|
52
73
|
|
|
53
|
-
interface
|
|
74
|
+
interface SidebarItemLinkProps {
|
|
54
75
|
nav: FileRouter.Sidebar.ItemLink
|
|
55
76
|
currentPathExp: string
|
|
56
77
|
level: number
|
|
57
78
|
}
|
|
58
79
|
|
|
59
|
-
const
|
|
80
|
+
const SidebarItemLink = ({ nav, currentPathExp, level }: SidebarItemLinkProps) => {
|
|
60
81
|
// Normalize paths for comparison - remove leading slash if present
|
|
61
82
|
const normalizedCurrentPath = currentPathExp.startsWith('/') ? currentPathExp.slice(1) : currentPathExp
|
|
62
83
|
const isActive = normalizedCurrentPath === nav.pathExp
|
|
@@ -64,6 +85,8 @@ const SidebarNavItem = ({ nav, currentPathExp, level }: SidebarNavItemProps) =>
|
|
|
64
85
|
return (
|
|
65
86
|
<Link
|
|
66
87
|
to={`/${nav.pathExp}`}
|
|
88
|
+
data-active={isActive || undefined}
|
|
89
|
+
className='sidebar-nav-item'
|
|
67
90
|
style={{
|
|
68
91
|
textDecoration: `none`,
|
|
69
92
|
color: isActive ? `var(--accent-11)` : `var(--gray-12)`,
|
|
@@ -74,16 +97,6 @@ const SidebarNavItem = ({ nav, currentPathExp, level }: SidebarNavItemProps) =>
|
|
|
74
97
|
backgroundColor: isActive ? `var(--accent-3)` : `transparent`,
|
|
75
98
|
transition: `background-color 0.2s ease, color 0.2s ease`,
|
|
76
99
|
}}
|
|
77
|
-
onMouseEnter={(e) => {
|
|
78
|
-
if (!isActive) {
|
|
79
|
-
e.currentTarget.style.backgroundColor = `var(--gray-2)`
|
|
80
|
-
}
|
|
81
|
-
}}
|
|
82
|
-
onMouseLeave={(e) => {
|
|
83
|
-
if (!isActive) {
|
|
84
|
-
e.currentTarget.style.backgroundColor = `transparent`
|
|
85
|
-
}
|
|
86
|
-
}}
|
|
87
100
|
>
|
|
88
101
|
<Text size='2' weight={isActive ? `medium` : `regular`}>
|
|
89
102
|
{nav.title}
|
|
@@ -92,13 +105,13 @@ const SidebarNavItem = ({ nav, currentPathExp, level }: SidebarNavItemProps) =>
|
|
|
92
105
|
)
|
|
93
106
|
}
|
|
94
107
|
|
|
95
|
-
interface
|
|
108
|
+
interface SidebarItemSectionProps {
|
|
96
109
|
section: FileRouter.Sidebar.ItemSection
|
|
97
110
|
currentPathExp: string
|
|
98
111
|
level: number
|
|
99
112
|
}
|
|
100
113
|
|
|
101
|
-
const
|
|
114
|
+
const SidebarItemSection = ({ section, currentPathExp, level }: SidebarItemSectionProps) => {
|
|
102
115
|
const [isExpanded, setIsExpanded] = useState(true)
|
|
103
116
|
// Normalize paths for comparison - remove leading slash if present
|
|
104
117
|
const normalizedCurrentPath = currentPathExp.startsWith('/') ? currentPathExp.slice(1) : currentPathExp
|
|
@@ -110,6 +123,9 @@ const SidebarSectionItem = ({ section, currentPathExp, level }: SidebarSectionIt
|
|
|
110
123
|
<>
|
|
111
124
|
<Flex
|
|
112
125
|
align='center'
|
|
126
|
+
data-active={isDirectlyActive || undefined}
|
|
127
|
+
data-active-child={hasActiveChild || undefined}
|
|
128
|
+
className='sidebar-section'
|
|
113
129
|
style={{
|
|
114
130
|
padding: `var(--space-2) var(--space-3)`,
|
|
115
131
|
paddingLeft: `calc(var(--space-3) + ${(level * 16).toString()}px)`,
|
|
@@ -117,21 +133,9 @@ const SidebarSectionItem = ({ section, currentPathExp, level }: SidebarSectionIt
|
|
|
117
133
|
backgroundColor: isDirectlyActive ? `var(--accent-3)` : hasActiveChild ? `var(--accent-2)` : `transparent`,
|
|
118
134
|
transition: `background-color 0.2s ease`,
|
|
119
135
|
}}
|
|
120
|
-
onMouseEnter={(e) => {
|
|
121
|
-
if (!isActiveGroup) {
|
|
122
|
-
e.currentTarget.style.backgroundColor = `var(--gray-2)`
|
|
123
|
-
}
|
|
124
|
-
}}
|
|
125
|
-
onMouseLeave={(e) => {
|
|
126
|
-
if (!isActiveGroup) {
|
|
127
|
-
e.currentTarget.style.backgroundColor = `transparent`
|
|
128
|
-
}
|
|
129
|
-
}}
|
|
130
136
|
>
|
|
131
137
|
<Box
|
|
132
|
-
onClick={(
|
|
133
|
-
e.stopPropagation()
|
|
134
|
-
console.log(`Chevron clicked!`)
|
|
138
|
+
onClick={() => {
|
|
135
139
|
setIsExpanded(!isExpanded)
|
|
136
140
|
}}
|
|
137
141
|
style={{
|
|
@@ -176,7 +180,7 @@ const SidebarSectionItem = ({ section, currentPathExp, level }: SidebarSectionIt
|
|
|
176
180
|
{isExpanded && (
|
|
177
181
|
<Flex direction='column' gap='1'>
|
|
178
182
|
{section.navs.map((nav) => (
|
|
179
|
-
<
|
|
183
|
+
<SidebarItemLink
|
|
180
184
|
key={nav.pathExp}
|
|
181
185
|
nav={nav}
|
|
182
186
|
currentPathExp={currentPathExp}
|