Update drop drown for logged in desktop (library) #2021
Conversation
… icon instead of link
| <DropdownMenuItemWithIcon icon={'/static/icons/library_icon.svg'} textEn={'Library'} textHe={'ספריה'} /> | ||
| </DropdownMenuItem> | ||
| <DropdownMenuSeparator /> | ||
| <DropdownMenuItem url={'//sheets.sefaria.org'}> | ||
| <DropdownMenuItem url={'//sheets.sefaria.org'} newTab={true}> |
There was a problem hiding this comment.
What are these double slashes?
There was a problem hiding this comment.
To make the URL not relative (i.e. route to sheets.sefaria.org vs localhost:8000/sheets.sefaria.org). It's a bit hacky, is there a better way to do this?
There was a problem hiding this comment.
Might be /sheets, confirm with SK.
| @@ -40,7 +45,7 @@ const DropdownMenuItemWithIcon = ({icon, textEn, textHe}) => { | |||
| ); | |||
| } | |||
|
|
|||
| const DropdownMenu = ({children}) => { | |||
| const DropdownMenu = ({children, menuIconComponent}) => { | |||
There was a problem hiding this comment.
What are you passing in here? another react component as a prop? thats generally not considered a good practice...
There was a problem hiding this comment.
If you need to be able to insert a dynamic component the way to do it is composability, as we have done with the rest of the menu.
Further break down the top components so you can render the menu icon component inline as children.
For example
<DropdownMenu>
<ProfilePic>
<DropDownMenuContents>
<DropDownMenuItem>
.....
</DropDownMenuContents>
</DropdownMenu>
There was a problem hiding this comment.
Thanks for pointing this out! I didn't realize, and really appreciate learning about better React practices.
I will push back a drop - in this case, I needed parity with the code that renders the "initials" when a profile image is not present, and needed to structure the code this way iirc to enable that in both PRs. Happy to discuss more, and hear your insights as to if there's a better and more proper React way of doing this. Thanks!
static/icons/logged_out.svg
Outdated
There was a problem hiding this comment.
Why is this icon in this PR if the PR is for logged in menu?
There was a problem hiding this comment.
Mistake, taking out. Thanks for catching :)
| <DropdownMenuItemWithIcon icon={'/static/icons/sheets_icon.svg'} textEn={'Sheets'} textHe={'דפים'}/> | ||
| </DropdownMenuItem> | ||
| <DropdownMenuSeparator /> | ||
| <DropdownMenuItem url={'//developers.sefaria.org'}> | ||
| <DropdownMenuItem url={'//developers.sefaria.org'} newTab={true}> |
Description
Updating the user drop down for library logged-in view.
Code Changes
static/css/s2.css- CSS shifts to get everything working, tested to make sure it doesn't break anything. Commenting out the chevron dropdown (see note below)static/icons/logged_out.svg- The icon for logged out users.static/js/Header.jsx- The new logged in dropdown component (<LoggedInDropdown />), rendering it. Fixes also to the module switcher to jive with the adjustment to<DropdownMenu />static/js/common/DropdownMenu.jsx- Adjusting the dropdown menu component to flexibly allow opening in new tabs vs same window, and accepting an icon component instead of a url for more flexibility.Notes
<DropdownMenu />component, accepting the icon image (from which the dropdown 'hangs') as a component instead of a url string. This allows for greater flexibility when rendering components like the initials icon. We will need to likely shift some small pieces in other PRs for everything to merge seamlessly, but it should be fairly easy.