fix header responsive?

seed-hypermedia · Nov 7, 2024 · 1927be7 · 1927be7
1 parent c4cb45c
commit 1927be7
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 60 deletions.
diff --git 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<ResponsePayloadType>(url?: string) {
   return response;
 }
 
-function DocumentDirectory({
-  id,
-  homeId,
-}: {
-  id: UnpackedHypermediaId;
-  homeId: UnpackedHypermediaId;
-}) {
-  const response = useAPI<DirectoryPayload>(`/hm/api/directory?id=${id.id}`);
-  if (response?.error) return <ErrorComponent error={response?.error} />;
-  if (!response) return null;
-  const {directory, authorsMetadata} = response;
-  if (!authorsMetadata) return null;
-  return (
-    <YStack paddingVertical="$4">
-      {directory?.map((doc) => (
-        <DirectoryItem
-          entry={doc}
-          siteHomeId={homeId}
-          authorsMetadata={authorsMetadata}
-          PathButtonComponent={PathButton}
-        />
-      ))}
-    </YStack>
-  );
-}
-
 function PathButton() {
   return null;
 }

diff --git 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={<MobileSearchUI homeId={homeId} />}
         />
         <Container
           clearVerticalSpace

diff --git a/frontend/apps/web/app/page-header.tsx b/frontend/apps/web/app/page-header.tsx
@@ -133,20 +133,25 @@ export function SiteHeader(props: {
   homeId: UnpackedHypermediaId | null;
   docMetadata: HMMetadata | null;
   docId: UnpackedHypermediaId | null;
-  openSheet?: () => 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 <NewsSiteHeader {...props} />;
+    return (
+      <NewsSiteHeader
+        {...props}
+        searchUI={props.homeId ? <SearchUI homeId={props.homeId} /> : null}
+        isWeb
+      />
+    );
   }
-  return <DefaultSiteHeader {...props} />;
+  return <DefaultSiteHeader isWeb {...props} />;
 }
 
 export function DefaultSiteHeader({

diff --git 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
@@ -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,75 +20,141 @@ 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 (
-    <YStack paddingBottom="$4" paddingHorizontal="$4">
-      {homeId ? (
+    <>
+      <YStack
+        borderBottomWidth={1}
+        borderColor="$borderColor"
+        zIndex="$zIndex.7"
+        // @ts-ignore
+        position="sticky"
+        top={0}
+        right={0}
+        left={0}
+        backgroundColor="$background"
+      >
         <HomeHeader
+          onOpen={() => setOpen(true)}
           homeId={homeId}
           homeMetadata={homeMetadata}
           rightContent={rightContent}
+          searchUI={searchUI}
+          isWeb={isWeb}
         />
-      ) : null}
 
-      <XStack gap="$5" justifyContent="center" ai="center">
-        {supportQuery?.results
-          ?.filter((result) => result.path.length === 1)
-          ?.map((result) => {
-            if (result.path.length === 1 && result.path[0] === "") return null;
-            return (
-              <NewsSiteHeaderLink
-                result={result}
-                key={result.path.join("/")}
-                active={!!docId?.path && result.path[0] === docId.path[0]}
-              />
-            );
-          })}
-        {afterLinksContent}
-      </XStack>
-    </YStack>
+        <XStack
+          ai="center"
+          gap="$4"
+          padding="$2"
+          jc="center"
+          display="none"
+          $gtSm={{display: "flex"}}
+        >
+          {supportQuery?.results
+            ?.filter((result) => result.path.length === 1)
+            ?.map((result) => {
+              if (result.path.length === 1 && result.path[0] === "")
+                return null;
+              return (
+                <NewsSiteHeaderLink
+                  result={result}
+                  key={result.path.join("/")}
+                  active={!!docId?.path && result.path[0] === docId.path[0]}
+                />
+              );
+            })}
+          {afterLinksContent}
+        </XStack>
+      </YStack>
+      {isWeb ? (
+        <MobileMenu
+          open={open}
+          onClose={() => setOpen(false)}
+          mobileSearchUI={mobileSearchUI}
+        >
+          {children}
+        </MobileMenu>
+      ) : null}
+    </>
   );
 }
 
 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 (
     <XStack paddingHorizontal="$4" paddingVertical="$2.5" ai="center" gap="$4">
       <XStack w={38} />
       <XStack f={1} />
-      <SiteLogo id={homeId} metadata={homeMetadata} />
+      <XStack ai="center" gap="$2" {...homeLinkProps}>
+        <HMIcon size={24} id={homeId} metadata={homeMetadata} />
+        <SizableText size="$4" fontWeight="bold">
+          {homeMetadata?.name}
+        </SizableText>
+      </XStack>
       <XStack f={1} />
       <XStack
         ai="center"
         gap="$3"
         position="absolute"
-        right={0}
+        right="$4"
         top={0}
         height="100%"
         background="$background"
       >
         {rightContent}
       </XStack>
+      {isWeb ? (
+        <>
+          <Button
+            $gtSm={{display: "none"}}
+            icon={<Menu size={20} />}
+            chromeless
+            size="$2"
+            onPress={() => {
+              onOpen();
+            }}
+          />
+          <XStack display="none" $gtSm={{display: "flex"}}>
+            {searchUI}
+          </XStack>
+        </>
+      ) : null}
     </XStack>
   );
 }
@@ -121,7 +187,7 @@ export function MobileMenu({
   onClose,
   mobileSearchUI,
 }: {
-  children: React.ReactNode;
+  children: React.JSX.Element;
   open: boolean;
   onClose: () => void;
   mobileSearchUI?: React.ReactNode;