feature(unlock-app): Enhance dashboard header (#14881)

* enhance dashboard header * cleanup * update settings layout * maintain consistent menu items
unlock-protocol · Oct 28, 2024 · 6ca2911 · 6ca2911
1 parent 59ed406
commit 6ca2911
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 44 deletions.
diff --git a/unlock-app/app/settings/layout.tsx b/unlock-app/app/settings/layout.tsx
@@ -1,27 +1,7 @@
 import { ReactNode } from 'react'
 
-import DashboardHeader from '~/components/interface/layouts/index/DashboardHeader'
-import DashboardFooter from '~/components/interface/layouts/index/DashboardFooter'
-import TermsOfServiceModal from '~/components/interface/layouts/index/TermsOfServiceModal'
-import { Container } from '~/components/interface/Container'
-import { ConnectModal } from '~/components/interface/connect/ConnectModal'
 import { AuthRequired } from 'app/Components/ProtectedContent'
 
 export default function SettingsLayout({ children }: { children: ReactNode }) {
-  return (
-    <div className="overflow-hidden bg-ui-secondary-200">
-      <TermsOfServiceModal />
-      <Container>
-        <ConnectModal />
-
-        <DashboardHeader />
-
-        <div className="flex flex-col gap-10 min-h-screen">
-          <AuthRequired>{children}</AuthRequired>
-        </div>
-
-        <DashboardFooter />
-      </Container>
-    </div>
-  )
+  return <AuthRequired>{children}</AuthRequired>
 }
diff --git a/unlock-app/src/components/interface/layouts/index/DashboardHeader.tsx b/unlock-app/src/components/interface/layouts/index/DashboardHeader.tsx
@@ -5,27 +5,15 @@ import { UserMenu } from '../../connect/UserMenu'
 import { useAuthenticate } from '~/hooks/useAuthenticate'
 import { usePathname } from 'next/navigation'
 
-const MENU = {
-  extraClass: {
-    mobile: 'bg-ui-secondary-200 px-6',
-  },
-  showSocialIcons: false,
-  logo: { url: '/', src: '/images/svg/unlock-logo.svg' },
-  menuSections: [
-    {
-      title: 'Events',
-      url: '/my-events',
-    },
-    {
-      title: 'Locks',
-      url: '/locks',
-    },
-    {
-      title: 'Keys',
-      url: '/keychain',
-    },
-  ],
-}
+// Paths where menu should be hidden
+const HIDDEN_MENU_PATHS = ['/']
+
+// Menu sections shown everywhere when logged in
+const MENU_SECTIONS = [
+  { title: 'Events', url: '/my-events' },
+  { title: 'Locks', url: '/locks' },
+  { title: 'Keys', url: '/keychain' },
+]
 
 interface DashboardHeaderProps {
   showMenu?: boolean
@@ -38,8 +26,44 @@ export default function DashboardHeader({
   const { openConnectModal } = useConnectModal()
   const pathname = usePathname()
 
-  const menuProps =
-    showMenu && pathname !== '/' ? MENU : { ...MENU, menuSections: [] }
+  // Determine logo config based on pathname
+  const getLogo = () => {
+    if (pathname?.includes('subscription')) {
+      return {
+        url: '/subscription',
+        src: '/images/svg/logo-unlock-subscriptions.svg',
+      }
+    }
+    if (pathname?.includes('event')) {
+      return {
+        url: '/event',
+        src: '/images/svg/logo-unlock-events.svg',
+      }
+    }
+    if (pathname?.includes('certification')) {
+      return {
+        url: '/certification',
+        src: '/images/svg/logo-unlock-certificate.svg',
+      }
+    }
+    return {
+      url: '/',
+      src: '/images/svg/unlock-logo.svg',
+    }
+  }
+
+  // Determine if menu should be shown
+  const shouldShowMenu =
+    showMenu && account && !HIDDEN_MENU_PATHS.includes(pathname || '')
+
+  const menuProps = {
+    extraClass: {
+      mobile: 'bg-ui-secondary-200 px-6',
+    },
+    showSocialIcons: false,
+    logo: getLogo(),
+    menuSections: shouldShowMenu ? MENU_SECTIONS : [],
+  }
 
   return (
     <HeaderNav