From b621c3a34eec467067257fbbc7c3df30c83b14a0 Mon Sep 17 00:00:00 2001 From: Jon Kafton <939376+jonkafton@users.noreply.github.com> Date: Tue, 21 Oct 2025 23:31:49 +0200 Subject: [PATCH 1/2] Logo and button link to dashboard --- .../components/MITLogoLink/MITLogoLink.tsx | 9 ++++++- .../page-components/Header/Header.test.tsx | 21 +++++++++++++-- .../src/page-components/Header/Header.tsx | 27 +++++++++++-------- .../src/page-components/Header/MenuButton.tsx | 4 +-- .../src/page-components/Header/UserMenu.tsx | 27 +++++++++++++++---- 5 files changed, 67 insertions(+), 21 deletions(-) diff --git a/frontends/main/src/components/MITLogoLink/MITLogoLink.tsx b/frontends/main/src/components/MITLogoLink/MITLogoLink.tsx index 0ca1ce6e23..15d0c93831 100644 --- a/frontends/main/src/components/MITLogoLink/MITLogoLink.tsx +++ b/frontends/main/src/components/MITLogoLink/MITLogoLink.tsx @@ -7,7 +7,7 @@ import learnLogo from "@/public/images/mit-learn-logo.svg" import { styled } from "ol-components" interface Props { - logo: "mit_white" | "mit_black" | "learn" + logo: "mit_white" | "mit_black" | "learn" | "learn_authenticated" className?: string } @@ -27,6 +27,10 @@ const linkProps = { href: "/", title: "MIT Learn Homepage", }, + learn_authenticated: { + href: "/dashboard", + title: "Your MIT Learning Journey", + }, mit_black: { href: "https://mit.edu/", title: "MIT Homepage", @@ -42,6 +46,9 @@ const imageProps = { learn: { src: learnLogo, }, + learn_authenticated: { + src: learnLogo, + }, mit_black: { src: mitLogoBlack, }, diff --git a/frontends/main/src/page-components/Header/Header.test.tsx b/frontends/main/src/page-components/Header/Header.test.tsx index e51aa8db4c..02d6c0ed60 100644 --- a/frontends/main/src/page-components/Header/Header.test.tsx +++ b/frontends/main/src/page-components/Header/Header.test.tsx @@ -12,11 +12,28 @@ import * as urlConstants from "@/common/urls" import { setMockResponse, urls } from "api/test-utils" describe("Header", () => { - it("Includes a link to the Homepage", async () => { + it("Includes a link to the Homepage for anonymous user", async () => { + setMockResponse.get(urls.userMe.get(), { is_authenticated: false }) + renderWithProviders(
) + const header = screen.getByRole("banner") + const links = within(header).getAllByRole("link", { + name: "MIT Learn Homepage", + }) + links.forEach((link) => { + expect(link).toHaveAttribute("href", "/") + }) + }) + + it("Includes a link to the Dashboard for authenticated user", async () => { setMockResponse.get(urls.userMe.get(), { is_authenticated: true }) renderWithProviders(
) const header = screen.getByRole("banner") - within(header).getAllByTitle("MIT Learn Homepage") + const links = await within(header).findAllByRole("link", { + name: "Your MIT Learning Journey", + }) + links.forEach((link) => { + expect(link).toHaveAttribute("href", "/dashboard") + }) }) }) diff --git a/frontends/main/src/page-components/Header/Header.tsx b/frontends/main/src/page-components/Header/Header.tsx index 1236b75c39..7163a51804 100644 --- a/frontends/main/src/page-components/Header/Header.tsx +++ b/frontends/main/src/page-components/Header/Header.tsx @@ -51,7 +51,7 @@ const Bar = styled(AppBar)(({ theme }) => ({ minHeight: "auto", }, height: theme.custom.dimensions.headerHeight, - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down("md")]: { height: theme.custom.dimensions.headerHeightSm, padding: "0", }, @@ -63,19 +63,19 @@ const FlexContainer = styled.div({ }) const DesktopOnly = styled(FlexContainer)(({ theme }) => ({ - [theme.breakpoints.up("sm")]: { + [theme.breakpoints.up("md")]: { display: "flex", }, - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down("md")]: { display: "none", }, })) const MobileOnly = styled(FlexContainer)(({ theme }) => ({ - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down("md")]: { display: "flex", }, - [theme.breakpoints.up("sm")]: { + [theme.breakpoints.up("md")]: { display: "none", }, })) @@ -88,7 +88,7 @@ const StyledMITLogoLink = styled(MITLogoLink)(({ theme }) => ({ img: { height: "24px", width: "auto", - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down("md")]: { height: "16px", }, }, @@ -100,7 +100,7 @@ const Spacer = styled.div({ const LeftSpacer = styled.div(({ theme }) => ({ width: "24px", - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down("md")]: { width: "16px", }, })) @@ -114,7 +114,7 @@ const StyledSearchButton = styled(ActionButtonLink)(({ theme }) => ({ opacity: 1, }, }, - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down("md")]: { padding: "0", }, alignItems: "center", @@ -128,7 +128,7 @@ const StyledSearchIcon = styled(RiSearch2Line)(({ theme }) => ({ color: theme.custom.colors.white, opacity: 0.5, margin: "4px 0", - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down("md")]: { opacity: 1, }, })) @@ -275,6 +275,7 @@ const Header: FunctionComponent = () => { const [drawerOpen, toggleDrawer] = useToggle(false) const desktopTrigger = React.useRef(null) const mobileTrigger = React.useRef(null) + const { data: user } = useUserMe() const drawerToggleEvent = drawerOpen ? PostHogEvents.ClosedNavDrawer : PostHogEvents.OpenedNavDrawer @@ -293,7 +294,9 @@ const Header: FunctionComponent = () => { - + { - + diff --git a/frontends/main/src/page-components/Header/MenuButton.tsx b/frontends/main/src/page-components/Header/MenuButton.tsx index 3c40c90229..f63b6e3f78 100644 --- a/frontends/main/src/page-components/Header/MenuButton.tsx +++ b/frontends/main/src/page-components/Header/MenuButton.tsx @@ -12,7 +12,7 @@ const MenuButtonText = styled.div(({ theme }) => ({ alignSelf: "center", paddingLeft: "16px", textTransform: "none", - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down("md")]: { display: "none", }, ...theme.typography.subtitle2, @@ -41,7 +41,7 @@ const StyledMenuButton = styled.button(({ theme }) => ({ svg: { color: theme.custom.colors.white, }, - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down("md")]: { padding: "4px 0", }, })) diff --git a/frontends/main/src/page-components/Header/UserMenu.tsx b/frontends/main/src/page-components/Header/UserMenu.tsx index acbb11c597..4894eac9c1 100644 --- a/frontends/main/src/page-components/Header/UserMenu.tsx +++ b/frontends/main/src/page-components/Header/UserMenu.tsx @@ -1,6 +1,7 @@ "use client" import React, { useState } from "react" +import { usePathname } from "next/navigation" import { SimpleMenu, styled, theme } from "ol-components" import type { MenuOverrideProps, SimpleMenuItem } from "ol-components" import { ActionButtonLink, ButtonLink } from "@mitodl/smoot-design" @@ -35,7 +36,7 @@ const UserMenuContainer = styled.button(({ theme }) => ({ "&:hover": { opacity: 1, }, - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down("md")]: { border: "none", opacity: 1, gap: "2px", @@ -48,7 +49,7 @@ const LoginButtonContainer = styled(FlexContainer)(({ theme }) => ({ "&:hover": { textDecoration: "none", }, - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down("md")]: { padding: "0", ".login-button-desktop": { display: "none", @@ -57,7 +58,7 @@ const LoginButtonContainer = styled(FlexContainer)(({ theme }) => ({ display: "flex", }, }, - [theme.breakpoints.up("sm")]: { + [theme.breakpoints.up("md")]: { ".login-button-desktop": { display: "flex", }, @@ -89,7 +90,7 @@ type UserMenuItem = SimpleMenuItem & { const UserNameContainer = styled.span(({ theme }) => ({ color: theme.custom.colors.white, - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down("md")]: { display: "none", }, ...theme.typography.body2, @@ -108,7 +109,7 @@ const StyledMITLogoLink = styled(MITLogoLink)(({ theme }) => ({ width: "64px", height: "32px", marginLeft: "16px", - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down("md")]: { width: "48px", height: "24px", marginLeft: "0", @@ -116,6 +117,14 @@ const StyledMITLogoLink = styled(MITLogoLink)(({ theme }) => ({ }, })) +const DashboardLink = styled(ButtonLink)(({ theme }) => ({ + fontSize: theme.typography.body3.fontSize, + marginRight: "24px", + [theme.breakpoints.down("md")]: { + display: "none", + }, +})) + type DeviceType = "mobile" | "desktop" type UserMenuProps = { variant?: DeviceType @@ -123,6 +132,7 @@ type UserMenuProps = { const UserMenu: React.FC = ({ variant }) => { const [visible, setVisible] = useState(false) + const pathname = usePathname() const loginUrl = urls.auth({ next: { pathname: urls.DASHBOARD_HOME, @@ -135,6 +145,8 @@ const UserMenu: React.FC = ({ variant }) => { return null } + console.log("pathname", pathname) + const items: UserMenuItem[] = [ { label: "Dashboard", @@ -200,6 +212,11 @@ const UserMenu: React.FC = ({ variant }) => { } /> + {!pathname.startsWith("/dashboard") ? ( + + Dashboard + + ) : null} ) From f114ea0c04b5c6e02f56b4c438a1eb5066f8de0c Mon Sep 17 00:00:00 2001 From: Jon Kafton <939376+jonkafton@users.noreply.github.com> Date: Thu, 23 Oct 2025 20:07:08 +0200 Subject: [PATCH 2/2] Remove console log --- frontends/main/src/page-components/Header/UserMenu.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/frontends/main/src/page-components/Header/UserMenu.tsx b/frontends/main/src/page-components/Header/UserMenu.tsx index 4894eac9c1..0c25aa1113 100644 --- a/frontends/main/src/page-components/Header/UserMenu.tsx +++ b/frontends/main/src/page-components/Header/UserMenu.tsx @@ -145,8 +145,6 @@ const UserMenu: React.FC = ({ variant }) => { return null } - console.log("pathname", pathname) - const items: UserMenuItem[] = [ { label: "Dashboard",