From a9484419560b5c05845e4182e68d604991499307 Mon Sep 17 00:00:00 2001 From: premiare Date: Fri, 18 Aug 2023 00:12:13 +1000 Subject: [PATCH] init mobileNavigation and added documenso symbol --- apps/marketing/public/logo_icon.png | Bin 0 -> 8200 bytes .../src/components/(marketing)/header.tsx | 27 +++- .../(marketing)/mobile-navigation.tsx | 153 ++++++++++++++++++ 3 files changed, 174 insertions(+), 6 deletions(-) create mode 100644 apps/marketing/public/logo_icon.png create mode 100644 apps/marketing/src/components/(marketing)/mobile-navigation.tsx diff --git a/apps/marketing/public/logo_icon.png b/apps/marketing/public/logo_icon.png new file mode 100644 index 0000000000000000000000000000000000000000..cb4765fcf145b088ec3ad7b1ffe0e16e9db04c4a GIT binary patch literal 8200 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 export const Header = ({ className, ...props }: HeaderProps) => { + const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); return (
Documenso Logo -
- - Pricing - - +
Blog @@ -35,6 +39,17 @@ export const Header = ({ className, ...props }: HeaderProps) => { Sign in
+ +
+ +
+
); }; diff --git a/apps/marketing/src/components/(marketing)/mobile-navigation.tsx b/apps/marketing/src/components/(marketing)/mobile-navigation.tsx new file mode 100644 index 000000000..4d9eea4e3 --- /dev/null +++ b/apps/marketing/src/components/(marketing)/mobile-navigation.tsx @@ -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 ( + + + + Blog + + + + Pricing + + + + Status + + + + Support + + + + Privacy + + + + Sign in + + + +
+ + + + + + + + + + + +
+
+ background pattern +
+
+ ); +};