Prevent header jump on mobile.

This commit is contained in:
jahooma 2022-01-18 12:55:24 -06:00
parent 3b4910eb95
commit 624231f223
2 changed files with 7 additions and 4 deletions

View File

@ -2,12 +2,15 @@ import Link from 'next/link'
import Image from 'next/image' import Image from 'next/image'
import clsx from 'clsx' import clsx from 'clsx'
export function ManifoldLogo(props: { darkBackground?: boolean }) { export function ManifoldLogo(props: {
const { darkBackground } = props className?: string
darkBackground?: boolean
}) {
const { darkBackground, className } = props
return ( return (
<Link href="/"> <Link href="/">
<a className="flex flex-row gap-4 flex-shrink-0"> <a className={clsx('flex flex-row gap-4 flex-shrink-0', className)}>
<Image <Image
className="hover:rotate-12 transition-all" className="hover:rotate-12 transition-all"
src={darkBackground ? '/logo-white.svg' : '/logo.svg'} src={darkBackground ? '/logo-white.svg' : '/logo.svg'}

View File

@ -28,7 +28,7 @@ export function NavBar(props: {
wide ? 'max-w-6xl' : 'max-w-4xl' wide ? 'max-w-6xl' : 'max-w-4xl'
)} )}
> >
<ManifoldLogo darkBackground={darkBackground} /> <ManifoldLogo className="my-1" darkBackground={darkBackground} />
<Row className="items-center gap-6 sm:gap-8 ml-6"> <Row className="items-center gap-6 sm:gap-8 ml-6">
{(user || user === null) && ( {(user || user === null) && (