mirror of
https://github.com/supabase/supabase.git
synced 2026-10-12 04:45:08 +03:00
Merge branch 'feat/new_website' of github.com:supabase/supabase into feat/new_website
This commit is contained in:
Joshen Lim committed
commit
8f6aa8ffa2
3 files changed
+110
-57
No files matched your search
@@ -64,11 +64,6 @@ const Hero = () => {
|
||||
src="images/logos/mozilla--grey.png"
|
||||
alt="Mozilla"
|
||||
/>
|
||||
<img
|
||||
className="h-3 sm:h-5 pr-10"
|
||||
src="images/logos/coatue.png"
|
||||
alt="Coatue"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -17,6 +17,10 @@ const Nav = (props: Props) => {
|
||||
const { darkMode } = props
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
const [openProduct, setOpenProduct] = useState(false)
|
||||
const [openDevelopers, setOpenDevelopers] = useState(false)
|
||||
const [openCompany, setOpenCompany] = useState(false)
|
||||
|
||||
React.useEffect(() => {
|
||||
if (open) {
|
||||
console.log('open if')
|
||||
@@ -25,11 +29,25 @@ const Nav = (props: Props) => {
|
||||
} else {
|
||||
document.body.style.overflow = 'auto'
|
||||
}
|
||||
|
||||
// window is accessible here.
|
||||
window.addEventListener('scroll', function (e) {
|
||||
// close Fly Outs window if user scrolls past 96px from top
|
||||
if (window.pageYOffset > 96) {
|
||||
handleCancel()
|
||||
}
|
||||
})
|
||||
}, [open])
|
||||
|
||||
function handleNavClick() {
|
||||
// @ts-ignore
|
||||
ref.current
|
||||
function handleToggle(callback: any) {
|
||||
handleCancel()
|
||||
callback()
|
||||
}
|
||||
|
||||
function handleCancel() {
|
||||
setOpenProduct(false)
|
||||
setOpenDevelopers(false)
|
||||
setOpenCompany(false)
|
||||
}
|
||||
|
||||
const iconSections = Object.values(SolutionsData).map((solution: any, idx: number) => {
|
||||
@@ -135,6 +153,36 @@ const Nav = (props: Props) => {
|
||||
</div>
|
||||
)
|
||||
|
||||
const FlyOutNavButton = (props: any) => (
|
||||
<div
|
||||
className={`
|
||||
inline-flex items-center px-1 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700
|
||||
dark:text-dark-100
|
||||
`}
|
||||
onClick={props.onClick}
|
||||
>
|
||||
<>
|
||||
<span>{props.title}</span>
|
||||
<svg
|
||||
className={
|
||||
'ml-2 h-5 w-5 text-gray-300 group-hover:text-gray-300 transition ease-in-out duration-150' +
|
||||
(props.active && ' transform rotate-180')
|
||||
}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</>
|
||||
</div>
|
||||
)
|
||||
|
||||
return (
|
||||
<nav className="bg-white dark:bg-dark-700 z-50 sticky">
|
||||
<div className="lg:container mx-auto relative flex justify-between h-16 lg:px-10 xl:px-0">
|
||||
@@ -155,13 +203,29 @@ const Nav = (props: Props) => {
|
||||
/>
|
||||
</div>
|
||||
<div className="pl-4 hidden sm:ml-6 lg:flex sm:space-x-8">
|
||||
<FlyOut title={'Product'}>
|
||||
<FlyOutNavButton
|
||||
title={'Product'}
|
||||
onClick={() => handleToggle(() => setOpenProduct(!openProduct))}
|
||||
active={openProduct}
|
||||
/>
|
||||
<FlyOutNavButton
|
||||
title={'Developers'}
|
||||
onClick={() => handleToggle(() => setOpenDevelopers(!openDevelopers))}
|
||||
active={openDevelopers}
|
||||
/>
|
||||
<FlyOutNavButton
|
||||
title={'Company'}
|
||||
onClick={() => handleToggle(() => setOpenCompany(!openCompany))}
|
||||
active={openCompany}
|
||||
/>
|
||||
|
||||
<FlyOut open={openProduct} handleCancel={handleCancel}>
|
||||
<Solutions />
|
||||
</FlyOut>
|
||||
<FlyOut title={'Developers'}>
|
||||
<FlyOut open={openDevelopers} handleCancel={handleCancel}>
|
||||
<Developers />
|
||||
</FlyOut>
|
||||
<FlyOut title={'Company'}>
|
||||
<FlyOut open={openCompany} handleCancel={handleCancel}>
|
||||
<Company />
|
||||
</FlyOut>
|
||||
<a
|
||||
@@ -181,11 +245,9 @@ const Nav = (props: Props) => {
|
||||
href="https://app.supabase.io?auth=signup"
|
||||
className={`
|
||||
inline-flex items-center border-b-2 border-transparent text-sm font-normal transition
|
||||
rounded-md px-3 py-1 mr-5 bg-brand-600 text-white hover:bg-brand-700 hidden lg:block
|
||||
rounded-md px-3 py-1 mr-5 bg-brand-700 text-white hover:bg-brand-800 hidden lg:block
|
||||
`}
|
||||
>
|
||||
Start your project
|
||||
</a>
|
||||
>Start your project</a>
|
||||
<a
|
||||
href="https://app.supabase.io?auth=signin"
|
||||
className={`
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect, useImperativeHandle } from 'react'
|
||||
import React, { useState, useEffect, useImperativeHandle, forwardRef } from 'react'
|
||||
import Transition from 'lib/Transition'
|
||||
|
||||
type Props = {
|
||||
@@ -6,6 +6,8 @@ type Props = {
|
||||
children?: React.ReactNode
|
||||
className?: string
|
||||
renderTriggerElement?: any
|
||||
open?: boolean
|
||||
handleCancel?: any
|
||||
singleBgColor?: boolean
|
||||
}
|
||||
|
||||
@@ -13,55 +15,48 @@ const FlyOut = (props: Props) => {
|
||||
const { title = '', children, className = '', renderTriggerElement = null, singleBgColor = false } = props
|
||||
const [show, setShow] = useState(false)
|
||||
|
||||
function handleToggle() {
|
||||
setShow(!show)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
// window is accessible here.
|
||||
window.addEventListener('scroll', function (e) {
|
||||
// close Fly Out window if user scrolls past 96px from top
|
||||
if (window.pageYOffset > 96) {
|
||||
setShow(false)
|
||||
}
|
||||
})
|
||||
}, [])
|
||||
// function handleToggle() {
|
||||
// setShow(!show)
|
||||
// props.handleClick()
|
||||
// }
|
||||
|
||||
// useImperativeHandle(
|
||||
// ref,
|
||||
// () => ({
|
||||
// close() {
|
||||
// setShow(false)
|
||||
// }
|
||||
// }),
|
||||
// )
|
||||
|
||||
// useEffect(() => {
|
||||
// // window is accessible here.
|
||||
// window.addEventListener('scroll', function (e) {
|
||||
// // close Fly Out window if user scrolls past 96px from top
|
||||
// if (window.pageYOffset > 96) {
|
||||
// setShow(false)
|
||||
// }
|
||||
// })
|
||||
// }, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={`
|
||||
{renderTriggerElement && (
|
||||
<div
|
||||
className={`
|
||||
inline-flex items-center px-1 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700
|
||||
dark:text-dark-100 ${
|
||||
renderTriggerElement === null ? 'hover:border-gray-300 dark:hover:border-dark-100' : ''
|
||||
}
|
||||
`}
|
||||
onClick={() => handleToggle()}
|
||||
>
|
||||
{renderTriggerElement !== null ? (
|
||||
<>{renderTriggerElement()}</>
|
||||
) : (
|
||||
<>
|
||||
<span>{title}</span>
|
||||
<svg
|
||||
className="ml-2 h-5 w-5 text-gray-300 group-hover:text-gray-300 transition ease-in-out duration-150"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
>
|
||||
{renderTriggerElement()}
|
||||
</div>
|
||||
)}
|
||||
<Transition
|
||||
appear={true}
|
||||
show={show}
|
||||
show={props.open}
|
||||
enter="transition ease-out duration-200"
|
||||
enterFrom="opacity-0 translate-y-1"
|
||||
enterTo="opacity-100 translate-y-0"
|
||||
@@ -95,13 +90,14 @@ const FlyOut = (props: Props) => {
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="fixed inset-0 transition-opacity bg-red"
|
||||
className="fixed inset-0 t-63 transition-opacity bg-red"
|
||||
style={{
|
||||
zIndex: 100,
|
||||
zIndex: 10,
|
||||
top: '63px',
|
||||
marginLeft: 0,
|
||||
pointerEvents: 'visiblePainted',
|
||||
}}
|
||||
onClick={() => handleToggle()}
|
||||
onClick={() => props.handleCancel()}
|
||||
>
|
||||
<div className="absolute inset-0 opacity-0"></div>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user