selected menu item in header on mobile

Author: timea-solid

src/mainPage/menu.ts

@@ -61,6 +61,11 @@ const applyMenuCollapsedState = (navMenu: HTMLElement | null): void => {
 
 const isLoggedIn = (): boolean => Boolean(authSession?.info?.isLoggedIn)
 
+const isViewingOwnProfile = (subject: NamedNode): boolean => {
+  const currentUser = authn.currentUser()
+  return Boolean(currentUser && subject && currentUser.sameTerm(subject))
+}
+
 const ensureMenuSkeleton = () => {
   menuCollapsed = loadMenuCollapsedState()
   const root = document.querySelector('[role="main"]') || document.body
@@ -264,7 +269,13 @@ const renderMenuItems = async (subject: NamedNode, outliner: OutlineManager, con
   const menuItems = await getMenuItems(subject, outliner)
 
   container.replaceChildren(...menuItems.map(createMenuButton))
-  setActiveMenuItem(container, container.dataset.activePaneName)
+  // If the user is logged in and viewing their own profile, select "Your profile"
+  // by default. This also surfaces "Your profile" at the top of the mobile view
+  // via the menu toggle label, which mirrors the active menu item.
+  const activePane = isViewingOwnProfile(subject)
+    ? 'profile'
+    : container.dataset.activePaneName
+  setActiveMenuItem(container, activePane)
 }
 
 export const refreshMenu = (layout: 'mobile' | 'desktop') => {