Header and menu for mobile

[timea-solid]

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?

[NoelDeMartin]

the logged in user drop down menu hover color needs adjusting - simple

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-200 which I think I grabbed from another component somewhere in the Figma. This is how it looks in the prototype vs our implementation:

• 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?

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]

@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]

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.

--header-menu-item-hover: var(--color-header-menu-item-hover, #e6dcff); this is actually lavender-300
    --header-menu-item-selected: var(--color-header-menu-item-selected, #cbb9ff); and this one is lavender-400

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]

Ok thanks @SharonStrats, I'll look at those to tweak the styles.

I am not sure what you mean with "current" style.

@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]

yes it should. I believe in the design it has?!