feat: replace global header with footer, move utility icons to sidebar

[LeeSkies]

Goal

Move persistent utility controls out of the global top header and into the sidebar/drawer chrome, leaving the main content area less visually crowded while keeping share, language, theme, bug report, and GitHub actions available from the app shell.

Changes

• Removed global top header (Header.tsx + Header.css)
• Added AppFooter.tsx with copyright text (hidden on mobile)
• Removed page-level footer from HomePage.tsx
• Refactored header icon buttons to MUI IconButton size="small"
• Moved utility icons into:
  • Desktop Sider: custom footer with collapse chevron + icons
  • Mobile Drawer: extra area next to the close button
• Added direction-aware floating hamburger IconButton on mobile
• Removed DonationButton from the utility footer because donation remains available from the sidebar menu
• Minor menu SCSS fixes for item width and collapsed spacing

Testing

• Stabilized tests/realtimemap.spec.ts by waiting for the map, popup, and tooltip loading state before interacting with the geek-info controls
• npx playwright test tests/realtimemap.spec.ts --project=chromium
• npx playwright test tests/singlelineTest.spec.ts --project=chromium --grep "should show tooltip after clicking on map point"

[github-actions]

Preview: https://s3.amazonaws.com/noam-gaash.co.il/29008136644/open-bus/2777/index.html
Preview Storybook: https://s3.amazonaws.com/noam-gaash.co.il/29008136644/open-bus/2777/storybook/index.html
Test Report (if available): 'https://s3.amazonaws.com/noam-gaash.co.il/29008136644/open-bus/aadfbde1f27871e227ad4a5addf5702a3be9ba08/test-results/index.html'

[LeeSkies]

Not sure why the ci fails here tbh, doest seem to be a change of mine

[arielvino]

About the utility icons:

I think some of them should be easily accessible (theme, language, copy link) - but now for a computer they are at the bottom of the sidebar - so the user must scroll all the way down just to see that they even exists.

About the footer:

I agree that we should have one. I had similar idea about the same time #1700.
But notice that the way you put the footer in the layout is fixed to the screen, not to the content. So it appear always on the bottom of the screen, even if the content is longer and scrollable.

For example:

A few ideas

As a reference lets look for example how Github has done it.
They have a header with some quick actions (profile, notifications, etc.), and it is only visible on the top of the page (you can scroll past it and it will disappear):

And they also have a footer with some common but not quick actions (terms, contact, etc.) it also scrollable with the page, like their header:

We may also use the footer for similar things: donate, report a bug, join us on github, about, public appeal - they me be a natural fit to be put in the footer.

And github also have another thing that we don't have:
a recognizable icon.
we have at least two, which is worse than having one...

[LeeSkies]

@arielvino Most of your observations i agree with, didn't wanna change too much in one pr.

First, the goal was to free up some real estate; having a header just for action icons, most of them secondary actions or utilities, is sub optimal.

GH is a great example for some UI components, not all, but in this case there are two distinctions:

a. Our footer was for some reason applying only to the main page, not the other routes, which is why i tried preserving the original look, by keeping it at same level, at least till o know the intent behind it better.
b. GH's main layout's navigation stays hidden, while nested layouts have their navigation up top. this justifies having a header / top bar, which could also house the icons.

The point of my first PRs here as u could probably see, was to make the app a bit more easy to look at (no offense) without changing too much, since i wasnt familiar with the contribution guidelines yet.

#Revised suggestion then

1. New Icon proposal - the favicon is a keyboard emoji i think? looks like it anyway. creating a new icon would have to convey one or more of the concepts of maps, time, vehicles, transportation. I'd do that.
2. Current animated logo at the top of the side bar is too big and unclear, i suggest completely removing it in favor of a more modern one, the one from the first point.
3. Moving the navigation to top - grouping by the current route groups, just horizontal instead of vertical. hovering would open a menu with the nested routes. Safe triangles based, this should feel and maybe also better.
4. Restructured page layout -
5. As for the actions separation - Why do we need the copy link one? why not just copy the page url? for the rest - language, theme, bug report (for now, till the app is stable, then at the bottom) at the top, GH link at the bottom next to the copyright clause.

Thoughts?

[arielvino]

Yeah I familiar with that too... I joined here only few months ago, and at the beginning I was careful to preserve the existing behavior as much as I could...

Sometimes indeed there is a real reason behind something that looks bad.
But often it simply some overlook or mistake: someone building the core of a feature but forget some details, someone does a change that break existing code and missed it in the review, something that has a reason in the past but was left behind when the original reason removed, or sometimes simply a non-optimal decision...

So feel free to suggest any change...
Especially if it only touch UI/UX and not any core logic then it likely not have very strong reason to stay as-is.
And in case there is a hidden reason - a reviewer will likely bring it up.

Icon

I now see at least 3:

• the fav icon
  https://open-bus-map-search.hasadna.org.il/favicon.ico
• the animated icon - it also used by @OpenBusBot - it is the only one that have some meaning of "data".
• preloader icon - also used when the menu is collapsed instead of the animated icon. This is the keyboard one 🚌

[LeeSkies]

Alright, what do you think about the rest of the suggestions I raised there then?

[arielvino]

Icon

I agree we should have one modern icon with meaningful representation and use it everywhere, as a recognizable branding.

Horizontal menu

I think it better to have the individual pages easily visible, rather than exposing only the group headers.
Or maybe we can leave only the groups in vertical collapsible menu - and within each group having the individual pages in a horizontal bar?
(inspired by Github's design, where you choose a repo in the vertical menu - and within each repo you have the main actions on a horizontal menu)
The problem is that horizontal menu is too wide for narrow screens.

Copy llink button

I added it some time ago because the URL bar required maintain a continuous syncing on every change and it had some bugs. Doable, but I thought it simpler that way, and also a bit encouraging people to share links by making it an intentional button.
I think that once we understand WHERE quick-action buttons SHOULD live - it can fit there easily.

Community

Maybe add a Community portal separate from the main portal? where we can introduce all of: github, donate, about, public appeal, also the hidden page data research.
That will free up some items in the main menu. (some of them can still be on the footer too)

[arielvino]

I think now that the menu is more compact with #1769 and #1816 - moving the utility icons to the sidebar will be great.