Skip to content

Commit c053066

Browse files
pojntfxpojntfx
committed
feat: Port navbar to PatternFly V6, merge user and overflow menus
Signed-off-by: Felicitas Pojtinger <[email protected]>
1 parent 7eaf5d7 commit c053066

File tree

3 files changed

+83
-50
lines changed

3 files changed

+83
-50
lines changed

‎cmd/bofied-backend/main.go‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -183,7 +183,7 @@ For more information, please visit https://github.com/pojntfx/bofied.`,
183183

184184
cmd.PersistentFlags().BoolP(pureConfigKey, "p", false, "Prevent usage of stdlib in configuration file, even if enabled in `Configuration` function")
185185

186-
cmd.PersistentFlags().String(starterURLKey, "https://github.com/pojntfx/ipxe-binaries/releases/download/latest/ipxe.tar.gz", "Download URL to a starter .tar.gz archive; the default chainloads https://netboot.xyz/")
186+
cmd.PersistentFlags().String(starterURLKey, "https://github.com/pojntfx/ipxe-binaries/releases/latest/download/ipxe.tar.gz", "Download URL to a starter .tar.gz archive; the default chainloads https://netboot.xyz/")
187187
cmd.PersistentFlags().BoolP(skipStarterDownloadKey, "s", false, "Don't initialize by downloading the starter on the first run")
188188

189189
// Bind env variables

‎pkg/components/navbar.go‎

Lines changed: 75 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ func (c *Navbar) Render() app.UI {
3131
avatarHash := md5.Sum([]byte(c.UserEmail))
3232

3333
return app.Header().
34-
Class("pf-v6-c-masthead pf-m-display-stack pf-m-display-inline-on-sm").
34+
Class("pf-v6-c-masthead pf-m-display-inline").
3535
Body(
3636
app.Div().
3737
Class("pf-v6-c-masthead__main").
@@ -60,10 +60,10 @@ func (c *Navbar) Render() app.UI {
6060
Class("pf-v6-c-toolbar__content").
6161
Body(
6262
app.Div().
63-
Class("pf-v6-c-toolbar__content-section").
63+
Class("pf-v6-c-toolbar__content-section pf-v6-u-align-items-center").
6464
Body(
6565
app.Div().
66-
Class("pf-v6-c-toolbar__group pf-m-align-end").
66+
Class("pf-v6-c-toolbar__group pf-m-align-end pf-v6-u-align-items-center").
6767
Body(
6868
app.Div().
6969
Class(func() string {
@@ -123,10 +123,14 @@ func (c *Navbar) Render() app.UI {
123123
Aria("label", "Actions").
124124
Body(
125125
app.Span().
126-
Class("pf-v6-c-menu-toggle__text").
126+
Class("pf-v6-c-menu-toggle__text pf-v6-u-display-flex pf-v6-u-display-block-on-md").
127127
Body(
128+
app.Img().
129+
Src(fmt.Sprintf("https://www.gravatar.com/avatar/%v?s=150", hex.EncodeToString(avatarHash[:]))).
130+
Alt("Avatar image of user with email "+c.UserEmail).
131+
Class("pf-v6-c-avatar pf-m-sm pf-v6-u-display-none-on-md"),
128132
app.I().
129-
Class("fas fa-ellipsis-v pf-v6-u-display-none-on-lg").
133+
Class("fas fa-ellipsis-v pf-v6-u-display-none pf-v6-u-display-inline-block-on-md pf-v6-u-display-none-on-lg").
130134
Aria("hidden", true),
131135
app.I().
132136
Class("fas fa-question-circle pf-v6-u-display-none pf-v6-u-display-inline-block-on-lg").
@@ -224,8 +228,7 @@ func (c *Navbar) Render() app.UI {
224228
),
225229
),
226230
),
227-
app.Div().
228-
Class("pf-v6-c-toolbar__item pf-m-hidden pf-m-visible-on-md").
231+
app.Div().Class("pf-v6-c-toolbar__item pf-m-hidden pf-m-visible-on-md").
229232
Body(
230233
app.Div().
231234
Class(func() string {
@@ -239,59 +242,82 @@ func (c *Navbar) Render() app.UI {
239242
}()).
240243
Body(
241244
app.Button().
242-
Class("pf-v6-c-dropdown__toggle pf-m-plain").
243-
ID("page-layout-horizontal-nav-dropdown-kebab-2-button").
244-
Aria("expanded", c.UserMenuExpanded).
245+
Class("pf-v6-c-menu-toggle pf-m-plain").
245246
Type("button").
247+
Aria("expanded", c.UserMenuExpanded).
248+
Aria("label", "User actions").
246249
Body(
247250
app.Span().
248-
Class("pf-v6-c-dropdown__toggle-text").
251+
Class("pf-v6-c-menu-toggle__icon pf-v6-u-display-flex").
252+
Body(
253+
app.Img().
254+
Src(fmt.Sprintf("https://www.gravatar.com/avatar/%v?s=150", hex.EncodeToString(avatarHash[:]))).
255+
Alt("Avatar image of user with email "+c.UserEmail).
256+
Class("pf-v6-c-avatar pf-m-sm"),
257+
),
258+
app.Span().
259+
Class("pf-v6-c-menu-toggle__text").
249260
Text(c.UserEmail),
250-
app.
251-
Span().
252-
Class("pf-v6-c-dropdown__toggle-icon").
261+
app.Span().
262+
Class("pf-v6-c-menu-toggle__controls").
253263
Body(
254-
app.I().
255-
Class("fas fa-caret-down").
256-
Aria("hidden", true),
264+
app.Span().
265+
Class("pf-v6-c-menu-toggle__toggle-icon").
266+
Body(
267+
app.I().
268+
Class("fas fa-caret-down").
269+
Aria("hidden", true),
270+
),
257271
),
258-
).OnClick(func(ctx app.Context, e app.Event) {
259-
c.ToggleUserMenuExpanded()
260-
}),
261-
app.Ul().
262-
Class("pf-v6-c-dropdown__menu").
263-
Aria("labelledby", "page-layout-horizontal-nav-dropdown-kebab-2-button").
272+
).
273+
OnClick(func(ctx app.Context, e app.Event) {
274+
c.ToggleUserMenuExpanded()
275+
}),
276+
277+
app.Div().
278+
Class("pf-v6-c-menu pf-v6-x-u-position-absolute").
264279
Hidden(!c.UserMenuExpanded).
265280
Body(
266-
app.Li().Body(
267-
app.Button().
268-
Class("pf-v6-c-button pf-v6-c-dropdown__menu-item").
269-
Type("button").
270-
Body(
271-
app.Span().
272-
Class("pf-v6-c-button__icon pf-m-start").
273-
Body(
274-
app.I().
275-
Class("fas fa-sign-out-alt").
276-
Aria("hidden", true),
277-
),
278-
app.Text("Logout"),
279-
).
280-
OnClick(func(ctx app.Context, e app.Event) {
281-
c.Logout(ctx)
282-
}),
283-
),
281+
app.Div().
282+
Class("pf-v6-c-menu__content").
283+
Body(
284+
app.Ul().
285+
Role("menu").
286+
Class("pf-v6-c-menu__list").
287+
Body(
288+
app.Li().
289+
Class("pf-v6-c-menu__list-item").
290+
Role("none").
291+
Body(
292+
app.Button().
293+
Class("pf-v6-c-menu__item").
294+
Type("button").
295+
Aria("role", "menuitem").
296+
Body(
297+
app.Span().
298+
Class("pf-v6-c-menu__item-main").
299+
Body(
300+
app.Span().
301+
Class("pf-v6-c-menu__item-icon").
302+
Body(
303+
app.I().
304+
Class("fas fa-sign-out-alt").
305+
Aria("hidden", true),
306+
),
307+
app.Span().
308+
Class("pf-v6-c-menu__item-text").
309+
Text("Logout"),
310+
),
311+
).
312+
OnClick(func(ctx app.Context, e app.Event) {
313+
c.Logout(ctx)
314+
}),
315+
),
316+
),
317+
),
284318
),
285319
),
286320
),
287-
app.Div().
288-
Class("pf-v6-c-toolbar__item").
289-
Body(
290-
app.Img().
291-
Class("pf-v6-c-avatar").
292-
Src(fmt.Sprintf("https://www.gravatar.com/avatar/%v?s=150", hex.EncodeToString(avatarHash[:]))).
293-
Alt("Avatar image"),
294-
),
295321
),
296322
),
297323
),

‎web/index.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,3 +52,10 @@
5252
.pf-v6-x-u-position-absolute {
5353
position: absolute;
5454
}
55+
56+
@media (max-width: 48rem) {
57+
.pf-v6-c-menu.pf-v6-x-u-position-absolute {
58+
left: 0;
59+
width: 100%;
60+
}
61+
}

0 commit comments

Comments
 (0)