mirror of
https://github.com/hanzoai/sign.git
synced 2026-10-21 01:21:51 +00:00
zeekay
9d66337dec
The wordmark was an SVG that guessed its own width, and clipped the name to "Hanzo Sigı". It is now text: NEXT_PUBLIC_APP_NAME, "Hanzo eSign" by default, measured by the browser and sized by the caller, with no mark in front of it anywhere. The mobile menu and the public profile header drew the upstream Documenso logo; the emails and the sealed PDF's certificate and audit log drew it too, from static/logo.png, which is now the wordmark set in Zen. The app header is hanzo.ai's: the wordmark at the left, quiet nav, pill controls at the right, a hairline under it. A visitor without a session sees the same bar with the wordmark alone, and a footer with the copyright and hanzo.ai's terms and privacy policy, on sign-in, the other unauthenticated pages, a recipient's completion and result pages and public profiles. The signing pages keep their own bar, which now shows the wordmark at every width.
133 lines
4.0 KiB
TypeScript
133 lines
4.0 KiB
TypeScript
import { useMemo } from 'react';
|
|
|
|
import { useLingui } from '@lingui/react/macro';
|
|
import { Trans } from '@lingui/react/macro';
|
|
import { ReadStatus } from '@prisma/client';
|
|
import { Link } from 'react-router';
|
|
|
|
import { authClient } from '@hanzo/esign-auth/client';
|
|
import { useSession } from '@hanzo/esign-lib/client-only/providers/session';
|
|
import { isPersonalLayout } from '@hanzo/esign-lib/utils/organisations';
|
|
import type { TGetInboxCountResponse } from '@hanzo/esign-trpc/server/document-router/get-inbox-count.types';
|
|
import { useZapQuery } from '@hanzo/esign-trpc/zap/react';
|
|
import { Sheet, SheetContent } from '@hanzo/esign-ui/primitives/sheet';
|
|
import { ThemeSwitcher } from '@hanzo/esign-ui/primitives/theme-switcher';
|
|
|
|
import { companyName } from '~/components/branding/brand';
|
|
import { BrandingLogo } from '~/components/general/branding-logo';
|
|
import { useOptionalCurrentTeam } from '~/providers/team';
|
|
|
|
export type AppNavMobileProps = {
|
|
isMenuOpen: boolean;
|
|
onMenuOpenChange?: (_value: boolean) => void;
|
|
};
|
|
|
|
export const AppNavMobile = ({ isMenuOpen, onMenuOpenChange }: AppNavMobileProps) => {
|
|
const { t } = useLingui();
|
|
|
|
const { organisations } = useSession();
|
|
|
|
const currentTeam = useOptionalCurrentTeam();
|
|
|
|
const { data: unreadCountData } = useZapQuery<TGetInboxCountResponse>(
|
|
'document.inbox.getCount',
|
|
{
|
|
readStatus: ReadStatus.NOT_OPENED,
|
|
},
|
|
{
|
|
// refetchInterval: 30000, // Refetch every 30 seconds
|
|
},
|
|
);
|
|
|
|
const handleMenuItemClick = () => {
|
|
onMenuOpenChange?.(false);
|
|
};
|
|
|
|
const menuNavigationLinks = useMemo(() => {
|
|
let teamUrl = currentTeam?.url || null;
|
|
|
|
if (!teamUrl && isPersonalLayout(organisations)) {
|
|
teamUrl = organisations[0].teams[0]?.url || null;
|
|
}
|
|
|
|
if (!teamUrl) {
|
|
return [
|
|
{
|
|
href: '/inbox',
|
|
text: t`Inbox`,
|
|
},
|
|
{
|
|
href: '/settings/profile',
|
|
text: t`Settings`,
|
|
},
|
|
];
|
|
}
|
|
|
|
return [
|
|
{
|
|
href: `/t/${teamUrl}/documents`,
|
|
text: t`Documents`,
|
|
},
|
|
{
|
|
href: `/t/${teamUrl}/templates`,
|
|
text: t`Templates`,
|
|
},
|
|
{
|
|
href: '/inbox',
|
|
text: t`Inbox`,
|
|
},
|
|
{
|
|
href: '/settings/profile',
|
|
text: t`Settings`,
|
|
},
|
|
];
|
|
}, [currentTeam, organisations]);
|
|
|
|
return (
|
|
<Sheet open={isMenuOpen} onOpenChange={onMenuOpenChange}>
|
|
<SheetContent className="flex w-full max-w-[350px] flex-col">
|
|
<Link to="/" onClick={handleMenuItemClick} className="self-start">
|
|
<BrandingLogo className="text-[19px]" />
|
|
</Link>
|
|
|
|
<div className="mt-8 flex w-full flex-col items-start gap-y-4">
|
|
{menuNavigationLinks.map(({ href, text }) => (
|
|
<Link
|
|
key={href}
|
|
className="flex items-center gap-2 text-2xl font-semibold text-foreground hover:text-foreground/80"
|
|
to={href}
|
|
onClick={() => handleMenuItemClick()}
|
|
>
|
|
{text}
|
|
{href === '/inbox' && unreadCountData && unreadCountData.count > 0 && (
|
|
<span className="flex h-6 min-w-[1.5rem] items-center justify-center rounded-full bg-primary px-1.5 text-xs font-semibold text-primary-foreground">
|
|
{unreadCountData.count > 99 ? '99+' : unreadCountData.count}
|
|
</span>
|
|
)}
|
|
</Link>
|
|
))}
|
|
|
|
<button
|
|
className="text-2xl font-semibold text-foreground hover:text-foreground/80"
|
|
onClick={async () => authClient.signOut()}
|
|
>
|
|
<Trans>Sign Out</Trans>
|
|
</button>
|
|
</div>
|
|
|
|
<div className="mt-auto flex w-full flex-col space-y-4 self-end">
|
|
<div className="w-fit">
|
|
<ThemeSwitcher />
|
|
</div>
|
|
|
|
<p className="text-sm text-muted-foreground">
|
|
© {new Date().getFullYear()} {companyName()}
|
|
<br />
|
|
<Trans>All rights reserved.</Trans>
|
|
</p>
|
|
</div>
|
|
</SheetContent>
|
|
</Sheet>
|
|
);
|
|
};
|