From 6d360e581d6516aa512d7f5073aef16483112fbf Mon Sep 17 00:00:00 2001 From: Mythie Date: Mon, 21 Aug 2023 19:56:18 +1000 Subject: [PATCH] fix: styling updates --- .../src/components/(marketing)/footer.tsx | 6 +- .../src/components/(marketing)/header.tsx | 22 ++- .../(marketing)/mobile-hamburger.tsx | 22 +-- .../(marketing)/mobile-navigation.tsx | 179 +++++++----------- apps/marketing/src/hooks/use-window-size.ts | 26 +-- 5 files changed, 98 insertions(+), 157 deletions(-) diff --git a/apps/marketing/src/components/(marketing)/footer.tsx b/apps/marketing/src/components/(marketing)/footer.tsx index e82318a38..701d9b60f 100644 --- a/apps/marketing/src/components/(marketing)/footer.tsx +++ b/apps/marketing/src/components/(marketing)/footer.tsx @@ -3,7 +3,7 @@ import { HTMLAttributes } from 'react'; import Image from 'next/image'; import Link from 'next/link'; -import { Github, Slack, Twitter } from 'lucide-react'; +import { Github, MessagesSquare, Twitter } from 'lucide-react'; import { cn } from '@documenso/ui/lib/utils'; @@ -36,11 +36,11 @@ export const Footer = ({ className, ...props }: FooterProps) => { - + diff --git a/apps/marketing/src/components/(marketing)/header.tsx b/apps/marketing/src/components/(marketing)/header.tsx index 8ec63c1fe..4b9458ce2 100644 --- a/apps/marketing/src/components/(marketing)/header.tsx +++ b/apps/marketing/src/components/(marketing)/header.tsx @@ -13,23 +13,19 @@ import { MobileNavigation } from './mobile-navigation'; export type HeaderProps = HTMLAttributes; export const Header = ({ className, ...props }: HeaderProps) => { - const [isMobileOpen, setIsMobileOpen] = useState(false); - - const handleMenuToggle = () => { - setIsMobileOpen(!isMobileOpen); - }; + const [isHamburgerMenuOpen, setIsHamburgerMenuOpen] = useState(false); return (
- isMobileOpen && handleMenuToggle()}> - Documenso Logo + setIsHamburgerMenuOpen(false)}> + Documenso Logo
Pricing - + Blog @@ -47,8 +43,14 @@ export const Header = ({ className, ...props }: HeaderProps) => {
- - + setIsHamburgerMenuOpen((v) => !v)} + isMenuOpen={isHamburgerMenuOpen} + /> +
); }; diff --git a/apps/marketing/src/components/(marketing)/mobile-hamburger.tsx b/apps/marketing/src/components/(marketing)/mobile-hamburger.tsx index 9b4bc93a2..30c80f1d0 100644 --- a/apps/marketing/src/components/(marketing)/mobile-hamburger.tsx +++ b/apps/marketing/src/components/(marketing)/mobile-hamburger.tsx @@ -1,34 +1,18 @@ 'use client'; -import { useEffect } from 'react'; - import { Menu, X } from 'lucide-react'; import { Button } from '@documenso/ui/primitives/button'; -import { useWindowSize } from '~/hooks/use-window-size'; - export interface HamburgerMenuProps { isMenuOpen: boolean; - menuToggle: () => void; + onToggleMenuOpen?: () => void; } -export const HamburgerMenu = ({ isMenuOpen, menuToggle }: HamburgerMenuProps) => { - const { width } = useWindowSize(); - - useEffect(() => { - // Update document.body.style.overflow based on the menu state - // If the window width is less than 768px, we want to prevent scrolling when the menu is open - if (width < 768 && isMenuOpen) { - document.body.style.overflow = 'hidden'; - } else { - document.body.style.overflow = 'auto'; - } - }, [isMenuOpen, width]); - +export const HamburgerMenu = ({ isMenuOpen, onToggleMenuOpen }: HamburgerMenuProps) => { return (
-
diff --git a/apps/marketing/src/components/(marketing)/mobile-navigation.tsx b/apps/marketing/src/components/(marketing)/mobile-navigation.tsx index a4ea79de6..bc64e7f59 100644 --- a/apps/marketing/src/components/(marketing)/mobile-navigation.tsx +++ b/apps/marketing/src/components/(marketing)/mobile-navigation.tsx @@ -3,24 +3,17 @@ import Image from 'next/image'; import Link from 'next/link'; -import { Variants, motion, useReducedMotion } from 'framer-motion'; -import { Github, Slack, Twitter } from 'lucide-react'; +import { motion, useReducedMotion } from 'framer-motion'; +import { Github, MessagesSquare, Twitter } from 'lucide-react'; -import { cn } from '@documenso/ui/lib/utils'; - -import backgroundPattern from '~/assets/background-pattern.png'; +import { Sheet, SheetContent } from '@documenso/ui/primitives/sheet'; export type MobileNavigationProps = { isMenuOpen: boolean; - menuToggle: () => void; + onMenuOpenChange?: (_value: boolean) => void; }; -export interface MenuNavigationLinksProps { - href: string; - text: string; -} - -export const MenuNavigationLinks = [ +export const MENU_NAVIGATION_LINKS = [ { href: '/blog', text: 'Blog', @@ -47,112 +40,82 @@ export const MenuNavigationLinks = [ }, ]; -export const MobileNavigation = ({ isMenuOpen, menuToggle }: MobileNavigationProps) => { +export const MobileNavigation = ({ isMenuOpen, onMenuOpenChange }: MobileNavigationProps) => { const shouldReduceMotion = useReducedMotion(); const handleMenuItemClick = () => { - menuToggle(); + onMenuOpenChange?.(false); }; - const itemVariants: Variants = { - open: { - opacity: 1, - y: 0, - x: 0, - transition: { type: 'spring', stiffness: 300, damping: 24 }, - }, - closed: { opacity: 0, y: 0, x: shouldReduceMotion ? 0 : 60, transition: { duration: 0.2 } }, - exit: { - opacity: 0, - y: 0, - x: shouldReduceMotion ? 0 : 60, - transition: { duration: 0.2 }, - }, - }; - - // used for testing alternate animations - // const vertical = `${!isMenuOpen ? '-translate-y-full' : 'translate-y-0'}`; - const horizontal = `${!isMenuOpen ? 'translate-x-full' : 'translate-x-0'}`; - return ( - - - {MenuNavigationLinks.map((link: MenuNavigationLinksProps) => ( + + + + Documenso Logo + + + + {MENU_NAVIGATION_LINKS.map(({ href, text }) => ( + + handleMenuItemClick()} + > + {text} + + + ))} + + +
handleMenuItemClick()} - href={link.href} - className="text-4xl font-semibold text-[#8D8D8D] hover:text-[#6D6D6D]" + href="https://twitter.com/documenso" + target="_blank" + className="text-[#8D8D8D] hover:text-[#6D6D6D]" > - {link.text} + - ))} - -
- - - + + + - - - - - - - -
-
- background pattern -
- + + + +
+ + ); }; diff --git a/apps/marketing/src/hooks/use-window-size.ts b/apps/marketing/src/hooks/use-window-size.ts index 816703b66..7dfd97a5c 100644 --- a/apps/marketing/src/hooks/use-window-size.ts +++ b/apps/marketing/src/hooks/use-window-size.ts @@ -1,35 +1,27 @@ import { useEffect, useState } from 'react'; -// This hook is used to get the window size -// It returns an object with the width and height of the window -// Works with window resizing as well, not to be confused with isMobile from is-mobile package - -interface WindowSize { - width: number; - height: number; -} - -export function useWindowSize(): WindowSize { - const [windowSize, setWindowSize] = useState({ +export function useWindowSize() { + const [size, setSize] = useState({ width: 0, height: 0, }); - const handleSize = () => { - setWindowSize({ + const onResize = () => { + setSize({ width: window.innerWidth, height: window.innerHeight, }); }; useEffect(() => { - handleSize(); - window.addEventListener('resize', handleSize); + onResize(); + + window.addEventListener('resize', onResize); return () => { - window.removeEventListener('resize', handleSize); + window.removeEventListener('resize', onResize); }; }, []); - return windowSize; + return size; }