feat: Mobile content-navigation-menu #310

therobrob · 2025-09-12T16:58:56Z

Description

Display a content-navigation-menu on mobile devices (max. MD).

sticky menu bar with page name
bottom sheet: choose another chapter
click and drag-support

# Conflicts: # assets/js/main.js

# Conflicts: # assets/js/aside.js

netlify · 2025-09-12T16:59:08Z

✅ Deploy Preview for fipguide ready!

Name	Link
🔨 Latest commit	`78b4864`
🔍 Latest deploy log	https://app.netlify.com/projects/fipguide/deploys/68e57df90d34670008776479
😎 Deploy Preview	https://deploy-preview-310--fipguide.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

# Conflicts: # assets/js/highlightHeadline.js # i18n/fr.yaml

therobrob · 2025-09-29T16:34:25Z

Changes:

Remove the "current chapter" text
Instead, display the country/operator name
Replace the button with a drag indicator

Instead, display the country/operator name Replace the button with a drag indicator

# Conflicts: # assets/js/resizeObserver.js # layouts/_default/baseof.html

…avigation-menu

therobrob · 2025-10-04T09:14:42Z

The mobile content navigation is ready for review! :)
Some annotations:

i'm sure, there is some potential for code improvement – feel free to comment or adjust.
the dragging-mechanism isn't perfect jet. The deltaY and the according ifs have to adjusted, but i wanted to finish this first implementation, because it took a long time.
I've added an issue to unite the overlay implementations: Unite overlay implementations #349

lenderom · 2025-10-04T09:33:54Z

Great job @therobrob 🤩

I have two minor ideas :)

What do you think about adding the back to country option also above the headline for easier usage. So in this case: <- Back to Portugal
What do you think about closing the menu when clicking on the greyed out content part of the page:

therobrob · 2025-10-04T09:52:08Z

Great job @therobrob 🤩

I have two minor ideas :)

What do you think about adding the back to country option also above the headline for easier usage. So in this case: <- Back to Portugal

What do you think about closing the menu when clicking on the greyed out content part of the page:

Thanks :)

you can go back to country in the open bottom-sheet already. Do you think, it is that important to add it at the top of the page? I wonder if it's too prominent there 🤔
This idea is included in Unite overlay implementations #349. Should we add it in this PR already?

MoritzWeber0

Thanks, the mobile navigation menu looks great! 🥳

Before I start with the detailed review, here are some visual spots that I noticed.

MoritzWeber0 · 2025-10-06T07:28:02Z

assets/sass/contentNavigation.scss

🎨 (non-blocking)

The border radius doesn't match in dark mode.

fixed in the newest commit :)

Small detail, but there are left and right borders on the upper element, but not the lower element. Would be good to make this uniform.

assets/js/contentNavigation.js

MoritzWeber0 · 2025-10-06T07:31:13Z

layouts/partials/contentNavigation.html

🐛 (bug)

The news pages are broken:

Example: https://deploy-preview-310--fipguide.netlify.app/en/news/6/

fixed in the newest commit :)

It is fixed indeed, but now the content navigation is no longer there on mobile. Can we add it, similarly to the operator and country pages?

assets/sass/contentNavigation.scss

lenderom · 2025-10-06T19:41:26Z

Great job @therobrob 🤩
I have two minor ideas :)

What do you think about adding the back to country option also above the headline for easier usage. So in this case: <- Back to Portugal

What do you think about closing the menu when clicking on the greyed out content part of the page:

Thanks :)

you can go back to country in the open bottom-sheet already. Do you think, it is that important to add it at the top of the page? I wonder if it's too prominent there 🤔

This idea is included in Unite overlay implementations #349. Should we add it in this PR already?

This is also fine for me. It was just a quick idea that came to my mind :)
Ah, thanks haven't seen it :D

# Conflicts: # assets/sass/sidemenu.scss

MoritzWeber0

I'm through the HTML + SCSS parts, they mostly look great :)
I'll have a look at the JS in the next days.

MoritzWeber0 · 2025-10-07T21:06:21Z

assets/js/contentNavigation.js

🎨 (visual non-blocking)

In Chrome on Android, the gesture bar overlays the content when scrolling down. I don't know if there is an option to tell Chrome to not do that and keep the gesture bar in it's separate area, so we can also handle this as issue and fix it afterwards, unless you have a solution in mind.

MoritzWeber0 · 2025-10-07T21:12:59Z

layouts/partials/contentNavigation.html

It is fixed indeed, but now the content navigation is no longer there on mobile. Can we add it, similarly to the operator and country pages?

MoritzWeber0 · 2025-10-07T21:15:08Z

layouts/partials/contentNavigation.html

@@ -0,0 +1,87 @@
+<aside id="aside" class="o-aside o-aside__bottom-sheet">


Since the same HTML is used for the aside and the bottom-sheet, shouldn't we just take o-aside and remove the "bottom-sheet" prefix?

o-aside__bottom-sheet > o-aside
o-aside__bottom-sheet-header > o-aside__header
o-aside > o-aside__drag
and so on.

The only conflict I see it the news sidebar, but maybe we can consistently update the classes there.

MoritzWeber0 · 2025-10-07T21:16:01Z

layouts/partials/contentNavigation.html

+  <button
+    class="o-aside__bottom-sheet-header"
+    aria-label="{{ T "contentNavigation.button" }}"
+    aria-controls="bottomSheet-content"


Suggested change

aria-controls="bottomSheet-content"

aria-controls="bottom-sheet-content"

The id of the content element is different.

MoritzWeber0 · 2025-10-07T21:20:03Z

assets/sass/styles.scss

  font-size: 1.8rem;
  overflow-x: hidden;
-  margin: 0;
+  margin: 0 0 7rem 0;


The margin should only be applied if we are in mobile view and on a page where the mobile navigation is visible. For example not on the General Information page or on desktop devices.

MoritzWeber0 · 2025-10-07T21:24:16Z

assets/sass/contentNavigation.scss

+    overflow: hidden;
+    flex-flow: column;
+    transition: transform 0.5s ease-in-out;
+    border-radius: 1rem 1rem 0 0;


Suggested change

border-radius: 1rem 1rem 0 0;

border-radius: var(--border-radius-m) var(--border-radius-m) 0 0;

MoritzWeber0 · 2025-10-07T21:27:38Z

assets/sass/contentNavigation.scss

Small detail, but there are left and right borders on the upper element, but not the lower element. Would be good to make this uniform.

therobrob added 8 commits April 27, 2025 13:30

feat: added existing ideas for mobile content navigation menu

d888ed4

Merge branch 'main' into feat/mobile-content-navigation-menu

051b73e

# Conflicts: # assets/js/main.js

feat: first draft for mobile content navigation menu

a823843

Merge branch 'main' into feat/mobile-content-navigation-menu

f258041

# Conflicts: # assets/js/aside.js

feat: positioning

2177f2f

feat: added current value in mobile content navigation menu

a1e9c16

feat: adjusted rootMargin for mobile

6b665b5

feat: add current chapter

143eeb4

therobrob changed the title ~~Feat/mobile content navigation menu~~ Mobile content-navigation-menu Sep 12, 2025

therobrob added 4 commits September 12, 2025 19:03

feat: add current chapter

47e8a40

Merge branch 'main' into feat/mobile-content-navigation-menu

0316c76

# Conflicts: # assets/js/highlightHeadline.js # i18n/fr.yaml

feat: merge highlightHeadline.js

aa7aef4

Merge branch 'main' into feat/mobile-content-navigation-menu

825816d

therobrob and others added 15 commits September 29, 2025 18:59

space for footer

06bbc29

Remove the "current chapter" text

feec84a

Instead, display the country/operator name Replace the button with a drag indicator

Remove the "current chapter" text

3d69b89

Instead, display the country/operator name Replace the button with a drag indicator

Merge branch 'main' into feat/mobile-content-navigation-menu

d2355fd

# Conflicts: # assets/js/resizeObserver.js # layouts/_default/baseof.html

styling

43e1836

added country/operator title

64771a7

Merge remote-tracking branch 'origin/main' into feat/mobile-content-n…

bcf6028

…avigation-menu

styling

7bdce38

dragging

0daa1f3

dragging

21b03a0

dragging

4ad6a55

tidy up

92c9835

tidy up

1487443

tidy up

7185799

tidy up

31a7351

therobrob added 9 commits October 4, 2025 09:33

renaming

76a9b35

renaming

fb4f252

fixing scroll-indicator

fba3c73

tidy up

27958d8

breakpoint-adjustment

bed3a16

Merge branch 'main' into feat/mobile-content-navigation-menu

d92291a

remove unused css-properties

fa3f986

a11y

1ba8b0e

a11y

843c33e

therobrob marked this pull request as ready for review October 4, 2025 09:14

therobrob requested a review from MoritzWeber0 October 4, 2025 09:16

therobrob added 3 commits October 4, 2025 11:57

code-styling-fix

e3783cd

code-styling-fix

39664f4

optimizing lockScroll

404efb5

MoritzWeber0 reviewed Oct 6, 2025

View reviewed changes

assets/sass/contentNavigation.scss Show resolved Hide resolved

therobrob added 6 commits October 6, 2025 22:15

Merge branch 'main' into feat/mobile-content-navigation-menu

baed251

bugfixing review comments

ba4a8eb

bugfixing review comments

a2b8520

bugfixing review comments

c4d5f94

Merge branch 'main' into feat/mobile-content-navigation-menu

7a8a0a7

# Conflicts: # assets/sass/sidemenu.scss

resolve merge conflict

d6e7798

MoritzWeber0 changed the title ~~Mobile content-navigation-menu~~ feat: Mobile content-navigation-menu Oct 7, 2025

therobrob added 2 commits October 7, 2025 22:53

removed half-opened-option

bcda49c

Merge branch 'main' into feat/mobile-content-navigation-menu

78b4864

MoritzWeber0 reviewed Oct 7, 2025

View reviewed changes

		@@ -0,0 +1,87 @@
		<aside id="aside" class="o-aside o-aside__bottom-sheet">

	aria-controls="bottomSheet-content"
	aria-controls="bottom-sheet-content"

	border-radius: 1rem 1rem 0 0;
	border-radius: var(--border-radius-m) var(--border-radius-m) 0 0;

feat: Mobile content-navigation-menu #310

Are you sure you want to change the base?

feat: Mobile content-navigation-menu #310

Conversation

therobrob commented Sep 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Uh oh!

netlify bot commented Sep 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for fipguide ready!

Uh oh!

therobrob commented Sep 29, 2025

Uh oh!

therobrob commented Oct 4, 2025

Uh oh!

lenderom commented Oct 4, 2025

Uh oh!

therobrob commented Oct 4, 2025

Uh oh!

MoritzWeber0 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

lenderom commented Oct 6, 2025

Uh oh!

MoritzWeber0 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

therobrob commented Sep 12, 2025 •

edited

Loading

netlify bot commented Sep 12, 2025 •

edited

Loading