Repository navigation
Header and menu for mobile #828
Description
Some remarks:
- the logged in user drop down menu hover color needs adjusting - simple
- when i resize browser for mobile -> the avatar button has no more left side arrow - are we optimizing styles for mobile yet?
- when on mobile, the selected menu item name is displayed top left, in the header. I believe this will be 'feature' of the web component menu? or header?
Metadata
Metadata
Assignees
Labels
No labels
Type
Projects
- Status
Activity
NoelDeMartin commentedon Jul 6, 2026
Can you give more details about this one? I've actually been trying to get the color from Figma, but it seems like we're lacking some permissions to see some files. In any case, I'm using
slate-200which I think I grabbed from another component somewhere in the Figma. This is how it looks in the prototype vs our implementation:Ok, we have to talk about these. The different UI for mobile should be easy enough, but I'm not sure about how the name should be calculated. Right now, the menu doesn't even have a "current" style. Should it have?
Also, what happens if the user is in a url that is none of the menu options? I guess the title of the page should depend on the current url, not the menu. But in that case, I wonder why we only show it on mobile. Couldn't it potentially hide some important information in Desktop?
timea-solid commentedon Jul 13, 2026
@SharonStrats maybe you can help with the exact color on the hover over a drop down menu item.
I am not sure what you mean with "current" style.
The title of the page never should reflect the URl you are on, not in solidOS. The default, current item is always profile and then whatever you select from the menu. You could be inside storage and look at an address book, that is ok, it is till in storage. IN any case, that is how I did the previous left side menu.
SharonStrats commentedon Jul 13, 2026
There is a hover and a selected color you can have a look here (this is from solidcommunity.net). This is also how we have the select and comboboxes in profile-pane to match.
I know this doesn't belong in this ticket but it would be good to also change the hover on the ghost button to lavender-300 that is what we have now.
if you need me to check anything in Figma let me know. I have the developer license so I might be able to see something different.
NoelDeMartin commentedon Jul 14, 2026
Ok thanks @SharonStrats, I'll look at those to tweak the styles.
@timea-solid I mean that when you open the dropdown menu of the account, the currently selected item doesn't have any different style from the others. Maybe it should?
timea-solid commentedon Jul 14, 2026
yes it should. I believe in the design it has?!
SolidOS#828 Tweak hover styles
SolidOS#828 Implement selected menu items
SolidOS#828 Implement selected menu items
NoelDeMartin commentedon Jul 14, 2026
Ok, I have opened a PR with a couple of the improvements mentioned in this issue: #836
I haven't implemented the detection of what's the selected item in the menu (neither showing it in the title of the page) because I think that requires more changes and I'm not sure I'll be able to make it in time. I have prepared the components to support this with
selectedstyles and attributes, though. Looking at the code quickly, it seems like we should port the functionality fromsrc/mainPage/menu.tsin thesolid-panesrepo.Merge pull request #836 from NoelDeMartin/improvements