Making top nav menu responsive #16618
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
|
|
@@ -5,22 +5,23 @@ | |||||
| */ | ||||||
|
|
||||||
| import { User } from "@gitpod/gitpod-protocol"; | ||||||
| import { FC, useCallback, useContext, useEffect, useMemo, useState } from "react"; | ||||||
| import { Link } from "react-router-dom"; | ||||||
| import { useLocation } from "react-router"; | ||||||
| import { Location } from "history"; | ||||||
| import { countries } from "countries-list"; | ||||||
| import gitpodIcon from "../icons/gitpod.svg"; | ||||||
| import { getGitpodService, gitpodHostUrl } from "../service/service"; | ||||||
| import { useCurrentUser } from "../user-context"; | ||||||
| import ContextMenu, { ContextMenuEntry } from "../components/ContextMenu"; | ||||||
| import { Separator } from "../components/Separator"; | ||||||
| import PillMenuItem from "../components/PillMenuItem"; | ||||||
| import { PaymentContext } from "../payment-context"; | ||||||
| import FeedbackFormModal from "../feedback-form/FeedbackModal"; | ||||||
| import { isGitpodIo } from "../utils"; | ||||||
| import OrganizationSelector from "./OrganizationSelector"; | ||||||
| import { getAdminTabs } from "../admin/admin.routes"; | ||||||
| import classNames from "classnames"; | ||||||
|
|
||||||
| interface Entry { | ||||||
| title: string; | ||||||
|
|
@@ -34,12 +35,6 @@ export default function Menu() { | |||||
| const { setCurrency, setIsStudent, setIsChargebeeCustomer } = useContext(PaymentContext); | ||||||
| const [isFeedbackFormVisible, setFeedbackFormVisible] = useState<boolean>(false); | ||||||
|
|
||||||
| useEffect(() => { | ||||||
| const { server } = getGitpodService(); | ||||||
| Promise.all([ | ||||||
|
|
@@ -52,64 +47,49 @@ export default function Menu() { | |||||
| ]).then((setters) => setters.forEach((s) => s())); | ||||||
| }, [setCurrency, setIsChargebeeCustomer, setIsStudent]); | ||||||
|
|
||||||
| const adminMenu: Entry = useMemo( | ||||||
| () => ({ | ||||||
| title: "Admin", | ||||||
| link: "/admin", | ||||||
| alternatives: [ | ||||||
| ...getAdminTabs().reduce( | ||||||
| (prevEntry, currEntry) => | ||||||
| currEntry.alternatives | ||||||
| ? [...prevEntry, ...currEntry.alternatives, currEntry.link] | ||||||
| : [...prevEntry, currEntry.link], | ||||||
| [] as string[], | ||||||
| ), | ||||||
| ], | ||||||
| }), | ||||||
| [], | ||||||
| ); | ||||||
|
|
||||||
| const handleFeedbackFormClick = useCallback(() => { | ||||||
| setFeedbackFormVisible(true); | ||||||
| }, []); | ||||||
|
|
||||||
| const onFeedbackFormClose = useCallback(() => { | ||||||
| setFeedbackFormVisible(false); | ||||||
| }, []); | ||||||
|
|
||||||
| return ( | ||||||
| <> | ||||||
| <header className="app-container flex flex-col pt-4" data-analytics='{"button_type":"menu"}'> | ||||||
| <div className="flex justify-between h-10 mb-3 w-full"> | ||||||
| <div className="flex items-center"> | ||||||
| {/* hidden on smaller screens */} | ||||||
| <Link to="/" className="hidden md:inline pr-3 w-10"> | ||||||
|
There was a problem hiding this comment. thought: Seems like there could be room for keeping the logo but let's try this and see if we need to revert this. |
||||||
| <img src={gitpodIcon} className="h-6" alt="Gitpod's logo" /> | ||||||
| </Link> | ||||||
| <OrganizationSelector /> | ||||||
| {/* hidden on smaller screens (in it's own menu below on smaller screens) */} | ||||||
| <div className="hidden md:block pl-2"> | ||||||
| <OrgPagesNav /> | ||||||
|
There was a problem hiding this comment. thought: Looking forward for the changes in #16433 to land and tone down a bit these two links here. |
||||||
| </div> | ||||||
| </div> | ||||||
| <div className="flex items-center w-auto" id="menu"> | ||||||
| {/* hidden on smaller screens - TODO: move to user menu on smaller screen */} | ||||||
| <nav className="hidden md:block flex-1"> | ||||||
| <ul className="flex flex-1 items-center justify-between text-base text-gray-500 dark:text-gray-400 space-x-2"> | ||||||
| <li className="flex-1"></li> | ||||||
| {user?.rolesOrPermissions?.includes("admin") && ( | ||||||
|
|
@@ -128,52 +108,146 @@ export default function Menu() { | |||||
| )} | ||||||
| </ul> | ||||||
| </nav> | ||||||
| {/* Hide normal user menu on small screens */} | ||||||
| <UserMenu user={user} className="hidden md:block" /> | ||||||
| {/* Show a user menu w/ admin & feedback links on small screens */} | ||||||
| <UserMenu | ||||||
| user={user} | ||||||
| className="md:hidden" | ||||||
| withAdminLink | ||||||
| withFeedbackLink | ||||||
|
Comment on lines
+117
to
+118
There was a problem hiding this comment. praise: Loving the move of these links on smaller viewports. 🔮 |
||||||
| onFeedback={handleFeedbackFormClick} | ||||||
| /> | ||||||
| </div> | ||||||
| {isFeedbackFormVisible && <FeedbackFormModal onClose={onFeedbackFormClose} />} | ||||||
| </div> | ||||||
| </header> | ||||||
| <Separator /> | ||||||
| {/* only shown on small screens */} | ||||||
| <OrgPagesNav className="md:hidden app-container flex justify-start py-2" /> | ||||||
| {/* only shown on small screens */} | ||||||
| <Separator className="md:hidden" /> | ||||||
| </> | ||||||
| ); | ||||||
| } | ||||||
|
|
||||||
| type OrgPagesNavProps = { | ||||||
| className?: string; | ||||||
| }; | ||||||
| const OrgPagesNav: FC<OrgPagesNavProps> = ({ className }) => { | ||||||
| const location = useLocation(); | ||||||
|
|
||||||
| const leftMenu: Entry[] = useMemo( | ||||||
| () => [ | ||||||
| { | ||||||
| title: "Workspaces", | ||||||
| link: "/workspaces", | ||||||
| alternatives: ["/"], | ||||||
| }, | ||||||
| { | ||||||
| title: "Projects", | ||||||
| link: `/projects`, | ||||||
| alternatives: [] as string[], | ||||||
| }, | ||||||
| ], | ||||||
| [], | ||||||
| ); | ||||||
|
|
||||||
| return ( | ||||||
| <div | ||||||
| className={classNames( | ||||||
| "text-base text-gray-500 dark:text-gray-400 flex items-center space-x-1 py-1", | ||||||
|
There was a problem hiding this comment. suggestion: The y-padding here is probably not needed as it's ignored by thy
Suggested change
|
||||||
| className, | ||||||
| )} | ||||||
| > | ||||||
| {leftMenu.map((entry) => ( | ||||||
| <div key={entry.title}> | ||||||
| <PillMenuItem name={entry.title} selected={isSelected(entry, location)} link={entry.link} /> | ||||||
| </div> | ||||||
| ))} | ||||||
| </div> | ||||||
| ); | ||||||
| }; | ||||||
|
|
||||||
| type UserMenuProps = { | ||||||
| user?: User; | ||||||
| className?: string; | ||||||
| withAdminLink?: boolean; | ||||||
| withFeedbackLink?: boolean; | ||||||
| onFeedback?: () => void; | ||||||
| }; | ||||||
| const UserMenu: FC<UserMenuProps> = ({ user, className, withAdminLink, withFeedbackLink, onFeedback }) => { | ||||||
| const extraSection = useMemo(() => { | ||||||
| const items: ContextMenuEntry[] = []; | ||||||
|
|
||||||
| if (withAdminLink && user?.rolesOrPermissions?.includes("admin")) { | ||||||
| items.push({ | ||||||
| title: "Admin", | ||||||
| link: "/admin", | ||||||
| }); | ||||||
| } | ||||||
| if (withFeedbackLink && isGitpodIo()) { | ||||||
| items.push({ | ||||||
| title: "Feedback", | ||||||
| onClick: onFeedback, | ||||||
| }); | ||||||
| } | ||||||
|
|
||||||
| // Add a separator to the last item | ||||||
| if (items.length > 0) { | ||||||
| items[items.length - 1].separator = true; | ||||||
| } | ||||||
|
|
||||||
| return items; | ||||||
| }, [onFeedback, user?.rolesOrPermissions, withAdminLink, withFeedbackLink]); | ||||||
|
|
||||||
| return ( | ||||||
| <div | ||||||
| className={classNames( | ||||||
| "ml-3 flex items-center justify-start mb-0 pointer-cursor m-l-auto rounded-full border-2 border-transparent hover:border-gray-200 dark:hover:border-gray-700 p-0.5 font-medium flex-shrink-0", | ||||||
| className, | ||||||
| )} | ||||||
| data-analytics='{"label":"Account"}' | ||||||
| > | ||||||
| <ContextMenu | ||||||
| menuEntries={[ | ||||||
| { | ||||||
| title: (user && (User.getPrimaryEmail(user) || user?.name)) || "User", | ||||||
| customFontStyle: "text-gray-400", | ||||||
| separator: true, | ||||||
| }, | ||||||
| { | ||||||
| title: "User Settings", | ||||||
| link: "/user/settings", | ||||||
| }, | ||||||
| { | ||||||
| title: "Docs", | ||||||
| href: "https://www.gitpod.io/docs/", | ||||||
| target: "_blank", | ||||||
| rel: "noreferrer", | ||||||
| }, | ||||||
| { | ||||||
| title: "Help", | ||||||
| href: "https://www.gitpod.io/support/", | ||||||
| target: "_blank", | ||||||
| rel: "noreferrer", | ||||||
| separator: true, | ||||||
| }, | ||||||
| ...extraSection, | ||||||
| { | ||||||
| title: "Logout", | ||||||
| href: gitpodHostUrl.asApiLogout().toString(), | ||||||
| }, | ||||||
| ]} | ||||||
| > | ||||||
| <img className="rounded-full w-8 h-8" src={user?.avatarUrl || ""} alt={user?.name || "Anonymous"} /> | ||||||
| </ContextMenu> | ||||||
| </div> | ||||||
| ); | ||||||
| }; | ||||||
|
|
||||||
| function isSelected(entry: Entry, location: Location<any>) { | ||||||
| const all = [entry.link, ...(entry.alternatives || [])].map((l) => l.toLowerCase()); | ||||||
| const path = location.pathname.toLowerCase(); | ||||||
| return all.some((n) => n === path || n + "/" === path); | ||||||
| } | ||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
thought: The org menu seems to push the user menu icon beyond the viewport in some cases. We could introduce a custom max width instead of the
max-w-xsused on the org menu but it's should be fine for now as it should be an edge case.