Add Traefik Hub demo in dashboard

webui/src/layout/Page.tsx

@@ -1,6 +1,7 @@
 import { Flex, globalCss, styled } from '@traefiklabs/faency'
-import { ReactNode, useState } from 'react'
+import { ReactNode, useMemo, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
+import { useLocation } from 'react-router-dom'
 
 import Container from './Container'
 import { LAPTOP_BP, SideBarPanel, SideNav, TopNav } from './Navigation'
@@ -40,14 +41,31 @@ export interface Props {
   children?: ReactNode
 }
 
-const Page = ({ children, title }: Props) => {
+const Page = ({ children }: Props) => {
+  const { pathname } = useLocation()
   const [isSideBarPanelOpen, setIsSideBarPanelOpen] = useState(false)
+  const location = useLocation()
+
+  const isDemoPage = useMemo(() => pathname.includes('hub-dashboard'), [pathname])
+
+  const renderedContent = useMemo(() => {
+    if (isDemoPage) {
+      return children
+    }
+
+    return (
+      <PageContainer data-testid={`${location.pathname} page`} direction="column">
+        <TopNav />
+        {children}
+      </PageContainer>
+    )
+  }, [children, isDemoPage, location.pathname])
 
   return (
     <ToastProvider>
       {globalStyles()}
       <Helmet>
-        <title>{title ? `${title} - ` : ''}Traefik Proxy</title>
+        <title>Traefik Proxy</title>
       </Helmet>
       <Flex>
         <SideBarPanel isOpen={isSideBarPanelOpen} onOpenChange={setIsSideBarPanelOpen} />
@@ -56,10 +74,7 @@ const Page = ({ children, title }: Props) => {
           justify="center"
           css={{ flex: 1, margin: 'auto', ml: 264, [`@media (max-width:${LAPTOP_BP}px)`]: { ml: 60 } }}
         >
-          <PageContainer data-testid={`${title} page`} direction="column">
-            <TopNav />
-            {children}
-          </PageContainer>
+          {renderedContent}
         </Flex>
       </Flex>
       <ToastPool />