Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-10 04:22:32 +10:00
Code Issues Packages Projects Releases Wiki Activity

init mobileNavigation and added documenso symbol

Browse Source
This commit is contained in:
premiare
2023-08-18 00:12:13 +10:00
parent 9ca84f5ede
commit 6e62eb8d81
3 changed files with 174 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
apps/marketing/public/logo_icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.0 KiB

23
apps/marketing/src/components/(marketing)/header.tsx
View File

@ -1,20 +1,28 @@
import { HTMLAttributes } from 'react';
'use client';
import { HTMLAttributes, useState } from 'react';
import Image from 'next/image';
import Link from 'next/link';
import { Menu, X } from 'lucide-react';
import { cn } from '@documenso/ui/lib/utils';
import { Button } from '@documenso/ui/primitives/button';
import { MobileNavigation } from './mobile-navigation';
export type HeaderProps = HTMLAttributes<HTMLElement>;
export const Header = ({ className, ...props }: HeaderProps) => {
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState<boolean>(false);
return (
<header className={cn('flex items-center justify-between', className)} {...props}>
<Link href="/">
<Image src="/logo.png" alt="Documenso Logo" width={170} height={0}></Image>
</Link>
<div className="flex items-center gap-x-6">
<div className="hidden items-center gap-x-6 md:flex">
<Link href="/blog" className="text-sm font-semibold text-[#8D8D8D] hover:text-[#6D6D6D]">
Blog
</Link>
@ -31,6 +39,17 @@ export const Header = ({ className, ...props }: HeaderProps) => {
Sign in
</Link>
</div>
<div className="flex md:hidden">
<Button
variant="default"
className="z-20 w-10 p-0"
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
>
{isMobileMenuOpen ? <X /> : <Menu />}
</Button>
</div>
<MobileNavigation isMenuOpen={isMobileMenuOpen} />
</header>
);
};

153
apps/marketing/src/components/(marketing)/mobile-navigation.tsx Normal file
View File

@ -0,0 +1,153 @@
'use client';
import Image from 'next/image';
import Link from 'next/link';
import { Variants, motion } from 'framer-motion';
import { Github, Slack, Twitter } from 'lucide-react';
import { cn } from '@documenso/ui/lib/utils';
import backgroundPattern from '~/assets/background-pattern.png';
export type MobileNavigationProps = {
isMenuOpen: boolean;
className?: string;
};
const itemVariants: Variants = {
open: {
opacity: 1,
y: 0,
x: 0,
transition: { type: 'spring', stiffness: 300, damping: 24 },
},
closed: { opacity: 0, y: 0, x: 60, transition: { duration: 0.2 } },
exit: {
opacity: 0,
y: 0,
x: 60,
transition: { duration: 0.2 },
},
};
export const MobileNavigation = ({ isMenuOpen }: MobileNavigationProps) => {
// used for testing alternate animations
// const vertical = `${!isMenuOpen ? '-translate-y-full' : 'translate-y-0'}`;
const horizontal = `${!isMenuOpen ? 'translate-x-full' : 'translate-x-0'}`;
return (
<motion.div
animate={isMenuOpen ? 'open' : 'closed'}
className={cn(
horizontal,
'bg-secondary fixed left-0 right-0 top-16 z-10 flex h-[94dvh] w-full transform flex-col items-start justify-start gap-4 shadow-md backdrop-blur-lg transition duration-500 ease-in-out md:hidden',
)}
variants={{
open: {
transition: {
type: 'spring',
bounce: 0,
duration: 0.7,
delayChildren: 0.3,
staggerChildren: 0.05,
},
},
closed: {
transition: {
type: 'spring',
bounce: 0,
duration: 0.3,
},
},
exit: {
transition: {
type: 'spring',
bounce: 0,
duration: 0.3,
},
},
}}
>
<motion.div className="flex w-full flex-col items-start gap-y-2 px-8 pt-12">
<Link
passHref
href="/blog"
className="text-4xl font-semibold text-[#8D8D8D] hover:text-[#6D6D6D]"
>
<motion.p variants={itemVariants}>Blog</motion.p>
</Link>
<Link
href="/pricing"
className="text-4xl font-semibold text-[#8D8D8D] hover:text-[#6D6D6D]"
>
<motion.p variants={itemVariants}>Pricing</motion.p>
</Link>
<Link
href="https://status.documenso.com"
target="_blank"
className="text-4xl font-semibold text-[#8D8D8D] hover:text-[#6D6D6D]"
>
<motion.p variants={itemVariants}>Status</motion.p>
</Link>
<Link
href="mailto:support@documenso.com"
className="text-4xl font-semibold text-[#8D8D8D] hover:text-[#6D6D6D]"
>
<motion.p variants={itemVariants}>Support</motion.p>
</Link>
<Link
href="/privacy"
className="text-4xl font-semibold text-[#8D8D8D] hover:text-[#6D6D6D]"
>
<motion.p variants={itemVariants}>Privacy</motion.p>
</Link>
<Link
href="https://app.documenso.com/login"
target="_blank"
className="text-4xl font-semibold text-[#8D8D8D] hover:text-[#6D6D6D]"
>
<motion.p variants={itemVariants}>Sign in</motion.p>
</Link>
</motion.div>
<div className="mx-auto mt-8 flex w-full flex-wrap items-center justify-center gap-x-4 gap-y-4 ">
<Link
href="https://twitter.com/documenso"
target="_blank"
className="text-[#8D8D8D] hover:text-[#6D6D6D]"
>
<Twitter className="h-8 w-8" />
</Link>
<Link
href="https://github.com/documenso/documenso"
target="_blank"
className="text-[#8D8D8D] hover:text-[#6D6D6D]"
>
<Github className="h-8 w-8" />
</Link>
<Link
href="https://documenso.slack.com"
target="_blank"
className="text-[#8D8D8D] hover:text-[#6D6D6D]"
>
<Slack className="h-8 w-8" />
</Link>
</div>
<div className="absolute inset-0 -z-10 flex items-start justify-center">
<Image
src={backgroundPattern}
alt="background pattern"
className="-mr-[15vw] -mt-[15vh] h-full max-h-[150vh] scale-125 object-cover md:-mr-[50vw] md:scale-150 lg:scale-[175%]"
/>
</div>
</motion.div>
);
};