diff --git a/ui/index.html b/ui/index.html index 8a7863a..e272873 100644 --- a/ui/index.html +++ b/ui/index.html @@ -11,7 +11,10 @@ href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700&display=swap" rel="stylesheet" /> - + { if (ensName && address) setEnsNameStore(ensName, address); return ( - - - - + {enableSidebar ? : } ); diff --git a/ui/src/components/layout/nav-bar/navigation.tsx b/ui/src/components/layout/nav-bar/navigation.tsx new file mode 100644 index 0000000..90ffe34 --- /dev/null +++ b/ui/src/components/layout/nav-bar/navigation.tsx @@ -0,0 +1,35 @@ +import { Link, useLocation } from 'react-router-dom'; + +import { forwardStyledRef } from '@/theme'; + +import { NavBarStyles as S } from './nav-bar.styles'; + +const Paths = [ + { path: '/explore', name: 'Explore', activeRegex: /\/$|\/explore/ }, + { path: '/mint', name: 'Create', activeRegex: /\/mint/ }, + { path: '/', name: 'Learn', activeRegex: /\/learn/ }, +]; + +export const Navigation = forwardStyledRef< + HTMLDivElement, + React.ComponentPropsWithRef +>((props, ref) => { + const location = useLocation(); + + return ( + + {Paths.map(({ path, name, activeRegex }) => ( + + {name} + + ))} + + ); +}); diff --git a/ui/src/components/layout/nav-bar/sidebar.tsx b/ui/src/components/layout/nav-bar/sidebar.tsx new file mode 100644 index 0000000..085740b --- /dev/null +++ b/ui/src/components/layout/nav-bar/sidebar.tsx @@ -0,0 +1,45 @@ +import { useEffect, useRef, useState } from 'react'; + +import { Button, Icon } from '@/components/core'; + +import { NavBarStyles as Styles } from './nav-bar.styles'; +import { Navigation } from './navigation'; + +export const Sidebar: React.FC = () => { + const [isOpen, setIsOpen] = useState(false); + const sidebarRef = useRef(null); + + const handleToggle = (): void => setIsOpen(!isOpen); + + const handleNavigationClick = (): void => setIsOpen(false); + + useEffect(() => { + if (!isOpen) return; + const { current } = sidebarRef; + if (!current) return; + + const handleClickOutside = (event: MouseEvent): void => { + if (current && !current.contains(event.target as Node)) setIsOpen(false); + }; + + document.addEventListener('mousedown', handleClickOutside); + return () => document.removeEventListener('mousedown', handleClickOutside); + }, [isOpen, sidebarRef]); + + return ( + <> + + + + + + + + + ); +}; diff --git a/ui/src/components/logo/index.ts b/ui/src/components/logo/index.ts deleted file mode 100644 index 147e5bd..0000000 --- a/ui/src/components/logo/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './logo'; diff --git a/ui/src/components/logo/logo.styles.ts b/ui/src/components/logo/logo.styles.ts deleted file mode 100644 index 7adcc6d..0000000 --- a/ui/src/components/logo/logo.styles.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { styled } from '@/theme'; - -import { Flex } from '../layout'; - -export abstract class LogoStyles { - static readonly Container = styled(Flex, { - cursor: 'pointer', - flex: 1, - }); - - static readonly Logo = styled('img', { - width: '$6', - height: 'auto', - }); -} diff --git a/ui/src/components/logo/logo.tsx b/ui/src/components/logo/logo.tsx deleted file mode 100644 index dbb0e91..0000000 --- a/ui/src/components/logo/logo.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { useNavigate } from 'react-router-dom'; - -import { Icon } from '../core/icon'; -import { LogoStyles as LS } from './logo.styles'; - -export const Logo: React.FC = () => { - const navigate = useNavigate(); - return ( - navigate('/home')}> - - - - - ); -}; diff --git a/ui/src/hooks/index.ts b/ui/src/hooks/index.ts index c32fad0..4d2b39c 100644 --- a/ui/src/hooks/index.ts +++ b/ui/src/hooks/index.ts @@ -1,3 +1,4 @@ export * from './use-transaction-cost'; export * from './use-window-scroll-end'; export * from './use-debounce'; +export * from './use-media-query'; diff --git a/ui/src/hooks/use-media-query.ts b/ui/src/hooks/use-media-query.ts new file mode 100644 index 0000000..f97d586 --- /dev/null +++ b/ui/src/hooks/use-media-query.ts @@ -0,0 +1,42 @@ +import { useEffect, useState } from 'react'; + +export const useMediaQuery = (query: string): boolean => { + const getMatches = (query: string): boolean => { + // Prevents SSR issues + if (typeof window !== 'undefined') { + return window.matchMedia(query).matches; + } + return false; + }; + + const [matches, setMatches] = useState(getMatches(query)); + + const handleChange = (): void => { + setMatches(getMatches(query)); + }; + + useEffect(() => { + const matchMedia = window.matchMedia(query); + + // Triggered at the first client-side load and if query changes + handleChange(); + + // Listen matchMedia + if (matchMedia.addListener) { + matchMedia.addListener(handleChange); + } else { + matchMedia.addEventListener('change', handleChange); + } + + return () => { + if (matchMedia.removeListener) { + matchMedia.removeListener(handleChange); + } else { + matchMedia.removeEventListener('change', handleChange); + } + }; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [query]); + + return matches; +}; diff --git a/ui/src/theme/alpha-color.ts b/ui/src/theme/alpha-color.ts new file mode 100644 index 0000000..95addd0 --- /dev/null +++ b/ui/src/theme/alpha-color.ts @@ -0,0 +1,9 @@ +import { config, theme } from './themes'; + +config.theme.colors; +export const alphaColor = ( + color: keyof typeof theme.colors, + value: number +): string => + config.theme.colors[color] + + `00${Math.round(0xff * value).toString(16)}`.slice(-2); diff --git a/ui/src/theme/foundations/colors.ts b/ui/src/theme/foundations/colors.ts index 587394f..6f3d305 100644 --- a/ui/src/theme/foundations/colors.ts +++ b/ui/src/theme/foundations/colors.ts @@ -23,6 +23,7 @@ export const colors = { ...amber, }; export const darkColors = { + black: '#000000', ...grayDark, ...slateDark, ...blueDark, diff --git a/ui/src/theme/index.ts b/ui/src/theme/index.ts index 5c1c2bf..4d72f1b 100644 --- a/ui/src/theme/index.ts +++ b/ui/src/theme/index.ts @@ -2,3 +2,4 @@ export * from './themes'; export * from './foundations'; export * from './key-frames'; export * from './forward-styled-ref'; +export * from './alpha-color'; diff --git a/ui/src/theme/themes.ts b/ui/src/theme/themes.ts index 6cd2c5d..b6dfd7d 100644 --- a/ui/src/theme/themes.ts +++ b/ui/src/theme/themes.ts @@ -59,7 +59,6 @@ const createDripStitches = < }, theme: { colors: { - black: '#000000', ...darkColors, // TODO: replace with light colors once it's done the light mode ...(theme?.colors || {}), },