From 1927be760149b2f4d4e19a21c7f5e1ab305a61ee Mon Sep 17 00:00:00 2001 From: Horacio Herrera Date: Thu, 7 Nov 2024 17:49:46 +0100 Subject: [PATCH] fix header responsive? --- frontend/apps/web/app/document.tsx | 28 ------ frontend/apps/web/app/newspaper.tsx | 2 + frontend/apps/web/app/page-header.tsx | 13 ++- frontend/packages/ui/src/button.ts | 4 +- frontend/packages/ui/src/top-bar.tsx | 120 ++++++++++++++++++++------ 5 files changed, 107 insertions(+), 60 deletions(-) diff --git a/frontend/apps/web/app/document.tsx b/frontend/apps/web/app/document.tsx index f4894731..838ada3a 100644 --- a/frontend/apps/web/app/document.tsx +++ b/frontend/apps/web/app/document.tsx @@ -19,7 +19,6 @@ import {SiteRoutingProvider, useRouteLink} from "@shm/shared/src/routing"; import "@shm/shared/src/styles/document.css"; import {getRandomColor} from "@shm/ui/src/avatar"; import {Container} from "@shm/ui/src/container"; -import {DirectoryItem} from "@shm/ui/src/directory"; import {CommentGroup} from "@shm/ui/src/discussion"; import { BlocksContent, @@ -44,7 +43,6 @@ import {NewspaperPage} from "./newspaper"; import {NotFoundPage} from "./not-found"; import {PageFooter} from "./page-footer"; import {PageHeader, SiteHeader} from "./page-header"; -import type {DirectoryPayload} from "./routes/hm.api.directory"; import {DiscussionPayload} from "./routes/hm.api.discussion"; import {MobileSearchUI} from "./search"; import {EmbedDocument, EmbedInline} from "./web-embeds"; @@ -379,32 +377,6 @@ function useAPI(url?: string) { return response; } -function DocumentDirectory({ - id, - homeId, -}: { - id: UnpackedHypermediaId; - homeId: UnpackedHypermediaId; -}) { - const response = useAPI(`/hm/api/directory?id=${id.id}`); - if (response?.error) return ; - if (!response) return null; - const {directory, authorsMetadata} = response; - if (!authorsMetadata) return null; - return ( - - {directory?.map((doc) => ( - - ))} - - ); -} - function PathButton() { return null; } diff --git a/frontend/apps/web/app/newspaper.tsx b/frontend/apps/web/app/newspaper.tsx index c1b3fcf1..ab96b3d0 100644 --- a/frontend/apps/web/app/newspaper.tsx +++ b/frontend/apps/web/app/newspaper.tsx @@ -5,6 +5,7 @@ import {XStack, YStack} from "@tamagui/stacks"; import {SiteDocumentPayload} from "./loaders"; import {PageFooter} from "./page-footer"; import {SiteHeader} from "./page-header"; +import {MobileSearchUI} from "./search"; export function NewspaperPage(props: SiteDocumentPayload) { const { @@ -50,6 +51,7 @@ export function NewspaperPage(props: SiteDocumentPayload) { docId={id} breadcrumbs={props.breadcrumbs} supportQueries={supportQueries} + mobileSearchUI={} /> void; breadcrumbs: Array<{ id: UnpackedHypermediaId; metadata: HMMetadata; }>; supportQueries?: HMQueryResult[]; - children: React.ReactNode; + children: React.JSX.Element; mobileSearchUI?: React.ReactNode; isWeb?: boolean; }) { if (props.homeMetadata?.layout === "Seed/Experimental/Newspaper") { - return ; + return ( + : null} + isWeb + /> + ); } - return ; + return ; } export function DefaultSiteHeader({ diff --git a/frontend/packages/ui/src/button.ts b/frontend/packages/ui/src/button.ts index a192c780..4502f527 100644 --- a/frontend/packages/ui/src/button.ts +++ b/frontend/packages/ui/src/button.ts @@ -1,4 +1,6 @@ -import {styled, Button as TButton, ThemeableStack} from "tamagui"; +import {Button as TButton} from "@tamagui/button"; +import {ThemeableStack} from "@tamagui/stacks"; +import {styled} from "@tamagui/web"; export const Button = styled(TButton, { className: "btn", diff --git a/frontend/packages/ui/src/top-bar.tsx b/frontend/packages/ui/src/top-bar.tsx index c243e77d..0c19c3c6 100644 --- a/frontend/packages/ui/src/top-bar.tsx +++ b/frontend/packages/ui/src/top-bar.tsx @@ -8,10 +8,10 @@ import { } from "@shm/shared"; import {XStack, YStack} from "@tamagui/stacks"; import {SizableText} from "@tamagui/text"; -import {useEffect} from "react"; +import {useEffect, useState} from "react"; import {Button} from "./button"; -import {Close} from "./icons"; -import {SiteLogo} from "./site-logo"; +import {HMIcon} from "./hm-icon"; +import {Close, Menu} from "./icons"; export function NewsSiteHeader({ homeMetadata, @@ -20,46 +20,81 @@ export function NewsSiteHeader({ rightContent, docId, afterLinksContent, + children, + searchUI, + mobileSearchUI, + isWeb = false, }: { homeMetadata: HMMetadata | null; homeId: UnpackedHypermediaId | null; supportQueries?: HMQueryResult[]; rightContent?: React.ReactNode; - docId?: UnpackedHypermediaId; + docId: UnpackedHypermediaId | null; afterLinksContent?: React.ReactNode; searchUI?: React.ReactNode; - children?: React.ReactNode; + children: React.JSX.Element; mobileSearchUI?: React.ReactNode; isWeb?: boolean; }) { + const [open, setOpen] = useState(false); if (!homeId) return null; const supportQuery = supportQueries?.find((q) => q.in.uid === homeId?.uid); return ( - - {homeId ? ( + <> + setOpen(true)} homeId={homeId} homeMetadata={homeMetadata} rightContent={rightContent} + searchUI={searchUI} + isWeb={isWeb} /> - ) : null} - - {supportQuery?.results - ?.filter((result) => result.path.length === 1) - ?.map((result) => { - if (result.path.length === 1 && result.path[0] === "") return null; - return ( - - ); - })} - {afterLinksContent} - - + + {supportQuery?.results + ?.filter((result) => result.path.length === 1) + ?.map((result) => { + if (result.path.length === 1 && result.path[0] === "") + return null; + return ( + + ); + })} + {afterLinksContent} + + + {isWeb ? ( + setOpen(false)} + mobileSearchUI={mobileSearchUI} + > + {children} + + ) : null} + ); } @@ -67,28 +102,59 @@ function HomeHeader({ homeMetadata, homeId, rightContent, + searchUI, + onOpen, + isWeb = false, }: { homeMetadata: HMMetadata | null; homeId: UnpackedHypermediaId; rightContent?: React.ReactNode; + searchUI?: React.ReactNode; + onOpen: () => void; + isWeb?: boolean; }) { + const homeLinkProps = useRouteLink({ + key: "document", + id: homeId, + }); return ( - + + + + {homeMetadata?.name} + + {rightContent} + {isWeb ? ( + <> +