@@ -39,7 +39,6 @@ function inferActive(r: ToolbarClient.ToolbarResponse<any>, location: History.Lo
39 39 40 40
export default function ToolbarRenderer(p: {
41 41
onAutoClose?: () => void | undefined;
42 -
sidebarMode: SidebarMode;
43 42
appTitle: React.ReactNode
44 43
}): React.ReactElement | null {
45 44
const response = useAPI(() => ToolbarClient.API.getCurrentToolbar(), []);
@@ -97,25 +96,16 @@ export default function ToolbarRenderer(p: {
97 96
var icon = ToolbarConfig.coloredIcon(parseIcon(res.iconName), res.iconColor);
98 97 99 98
return (
100 -
<CustomSidebarDropdown parentTitle={title} icon={icon} sidebarMode={p.sidebarMode} key={key}>
99 +
<ToolbarDropdown parentTitle={title} icon={icon} key={key}>
101 100
{res.elements && res.elements.map((sr, i) => renderNavItem(sr, onRefresh, i))}
102 -
</CustomSidebarDropdown>
101 +
</ToolbarDropdown>
103 102
);
104 103
}
105 104 106 105
if (res.url) {
107 106
return (
108 -
<Nav.Item key={key}>
109 -
<Nav.Link
110 -
title={res.label}
111 -
className={p.sidebarMode.firstLower()}
112 -
onClick={(e: React.MouseEvent<any>) => AppContext.pushOrOpenInTab(res.url!, e)}
113 -
onAuxClick={(e: React.MouseEvent<any>) => AppContext.pushOrOpenInTab(res.url!, e)}
114 -
active={res == active}>
115 -
{ToolbarConfig.coloredIcon(parseIcon(res.iconName), res.iconColor)}<span>{res.label}</span>
116 -
{p.sidebarMode == "Narrow" && <div className={"nav-item-float"}>{res.label}</div>}
117 -
</Nav.Link>
118 -
</Nav.Item>
107 +
<ToolbarNavItem key={key} title={res.label} onClick={(e: React.MouseEvent<any>) => AppContext.pushOrOpenInTab(res.url!, e)}
108 +
active={res == active} icon={ToolbarConfig.coloredIcon(parseIcon(res.iconName), res.iconColor)} />
119 109
);
120 110
}
121 111
@@ -124,15 +114,15 @@ export default function ToolbarRenderer(p: {
124 114
if (!config)
125 115
return <Nav.Item style={{ color: "red" }}>{res.content!.EntityType + "ToolbarConfig not registered"}</Nav.Item>;
126 116 127 -
return config.getMenuItem(res, res == active, p.sidebarMode, key);
117 +
return config.getMenuItem(res, res == active, key);
128 118
}
129 119 130 120
if (res.type == "Header") {
131 121
return (
132 -
<div key={key} className={"nav-item-header" + (p.sidebarMode == "Wide" ? "" : " mini")}>
122 +
<div key={key} className={"nav-item-header"}>
133 123
{ToolbarConfig.coloredIcon(parseIcon(res.iconName), res.iconColor)}
134 -
{p.sidebarMode == "Wide" && <span>{res.label}</span>}
135 -
{p.sidebarMode == "Narrow" && <div className={"nav-item-float"}>{res.label}</div>}
124 +
<span className={"nav-item-text"}>{res.label}</span>
125 +
<div className={"nav-item-float"}>{res.label}</div>
136 126
</div>
137 127
);
138 128
}
@@ -152,30 +142,36 @@ export default function ToolbarRenderer(p: {
152 142
}
153 143
}
154 144 155 -
function CustomSidebarDropdown(props: { parentTitle: string | undefined, sidebarMode: SidebarMode, icon: any, children: any }) {
145 +
function ToolbarDropdown(props: { parentTitle: string | undefined, icon: any, children: any }) {
156 146
var [show, setShow] = React.useState(false);
157 147 158 148
return (
159 149
<div>
160 -
<div className="nav-item">
161 -
<div
162 -
title={props.parentTitle}
163 -
className={"nav-link"}
164 -
onClick={() => setShow(!show)}
165 -
style={{ paddingLeft: props.sidebarMode == "Wide" ? 25 : 13, cursor: 'pointer' }}>
150 +
<ToolbarNavItem title={props.parentTitle} onClick={() => setShow(!show)}
151 +
icon={
166 152
<div style={{ display: 'inline-block', position: 'relative' }}>
167 153
<div className="nav-arrow-icon" style={{ position: 'absolute' }}><FontAwesomeIcon icon={show ? "caret-down" : "caret-right"} className="icon" /></div>
168 154
<div className="nav-icon-with-arrow">
169 155
{props.icon}
170 156
</div>
171 157
</div>
172 -
<span className={"nav-item-dropdown-elem"} style={{ marginLeft: "16px", verticalAlign: "middle" }}>{props.parentTitle}</span>
173 -
{props.sidebarMode == "Narrow" && <div className={"nav-item-float"}>{props.parentTitle}</div>}
174 -
</div>
175 -
</div>
158 +
}
159 +
/>
176 160
<div style={{ display: show ? "block" : "none" }}>
177 161
{show && props.children}
178 162
</div>
179 163
</div>
180 164
);
181 165
}
166 + 167 +
export function ToolbarNavItem(p: { title: string | undefined, active?: boolean, onClick: (e: React.MouseEvent) => void, icon?: React.ReactNode }) {
168 +
return (
169 +
<Nav.Item >
170 +
<Nav.Link title={p.title} onClick={p.onClick} active={p.active}>
171 +
{p.icon}
172 +
<span className={"nav-item-text"}>{p.title}</span>
173 +
<div className={"nav-item-float"}>{p.title}</div>
174 +
</Nav.Link>
175 +
</Nav.Item >
176 +
);
177 +
}
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4