From 4b88a52fcfded022028a4b3875ba3b2f68ce57cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com> Date: Sat, 17 Aug 2024 14:47:47 -0500 Subject: [PATCH] feat: start of new navbar --- src/app/layout.tsx | 4 +- .../Navbar/components/EverythingSearch.tsx | 42 --- src/components/Navbar/index.css.ts | 53 +-- src/components/Navbar/index.tsx | 346 ++++-------------- src/constants/tools.tsx | 2 - 5 files changed, 87 insertions(+), 360 deletions(-) delete mode 100644 src/components/Navbar/components/EverythingSearch.tsx diff --git a/src/app/layout.tsx b/src/app/layout.tsx index bb5b82e8a..3dc18c167 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -7,7 +7,7 @@ import { Roboto_Flex } from 'next/font/google'; import { usePathname } from 'next/navigation'; import { ReactNode, Suspense } from 'react'; import { Footer } from '../components/Footer'; -import Navbar, { NAVBAR_HEIGHT } from '../components/Navbar'; +import Navbar from '../components/Navbar'; import { Party3 } from '../components/Party3'; import * as App from '../stores/app'; import { Checks } from './components/Checks'; @@ -68,7 +68,7 @@ export default function RootLayout({ children }: RootLayoutProps) { direction="column" style={{ minHeight: '100vh', - paddingTop: isEmbed ? undefined : NAVBAR_HEIGHT, + // paddingTop: isEmbed ? undefined : NAVBAR_HEIGHT, }} > {!isEmbed && } diff --git a/src/components/Navbar/components/EverythingSearch.tsx b/src/components/Navbar/components/EverythingSearch.tsx deleted file mode 100644 index 8640bc2df..000000000 --- a/src/components/Navbar/components/EverythingSearch.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { MagnifyingGlassIcon } from '@radix-ui/react-icons'; -import { Card, TextField } from '@radix-ui/themes'; -import { ComponentProps, useState } from 'react'; - -export function EverythingSearch({ - style, - ...props -}: ComponentProps) { - const [search, setSearch] = useState(''); - - return ( - <> - { - setSearch(event.target.value.trim()); - }} - {...props} - > - - - - - {search.length > 0 && ( - - - - )} - - - ); -} diff --git a/src/components/Navbar/index.css.ts b/src/components/Navbar/index.css.ts index 20a1d37e6..c3f7b51d1 100644 --- a/src/components/Navbar/index.css.ts +++ b/src/components/Navbar/index.css.ts @@ -1,56 +1,23 @@ -import { style, styleVariants } from '@vanilla-extract/css'; +import { style } from '@vanilla-extract/css'; -const MIN_EXPANDED_TOOLS = 752; +const MIN_WIDTH = 640 + 64; + +export const hamburger = style({ + display: 'inline-flex', -export const hamburgerButton = style({ '@media': { - [`screen and (min-width: ${MIN_EXPANDED_TOOLS}px)`]: { + [`screen and (min-width: ${MIN_WIDTH}px)`]: { display: 'none', }, }, }); -const navbarBase = style({ - position: 'fixed', - top: 0, - left: 0, - width: '100%', - zIndex: 2, - padding: '1rem', - backgroundColor: 'var(--color-panel-translucent)', - backdropFilter: 'blur(4rem)', - WebkitBackdropFilter: 'blur(4rem)', - boxSizing: 'border-box', - transition: 'max-height 0.2s ease-in-out', - overflow: 'hidden', -}); -export const navbar = styleVariants({ - expanded: [ - navbarBase, - { - maxHeight: '100%', - }, - ], - collapsed: [ - navbarBase, - { - maxHeight: 65, - }, - ], -}); +export const tools = style({ + display: 'none', -export const toolCard = style({ - boxShadow: `inset 0 -200px 128px -128px var(--color-overlay)`, - - ':hover': { - boxShadow: `inset 0 -160px 128px -128px #ffffff00`, - }, -}); - -export const toolTexts = style({ '@media': { - [`screen and (max-width: ${MIN_EXPANDED_TOOLS}px)`]: { - display: 'none', + [`screen and (min-width: ${MIN_WIDTH}px)`]: { + display: 'flex', }, }, }); diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx index 9d3f6913f..82a913ea9 100644 --- a/src/components/Navbar/index.tsx +++ b/src/components/Navbar/index.tsx @@ -1,311 +1,115 @@ 'use client'; import { - Cross1Icon, DiscordLogoIcon, GearIcon, HamburgerMenuIcon, PersonIcon, } from '@radix-ui/react-icons'; -import { - Box, - Button, - Dialog, - Flex, - IconButton, - Inset, - Popover, - Separator, - Text, -} from '@radix-ui/themes'; +import { Box, Flex, IconButton, Separator } from '@radix-ui/themes'; import { usePathname } from 'next/navigation'; import { useState } from 'react'; -import { REGIONS } from '../../constants/regions'; import { TOOLS } from '../../constants/tools'; -import { WARGAMING_APPLICATION_ID } from '../../constants/wargamingApplicationID'; -import { imgur, ImgurSize } from '../../core/blitzkit/imgur'; -import { patreonLoginUrl } from '../../core/blitzkit/patreonLoginUrl'; import { PatreonIcon } from '../../icons/Patreon'; -import { WargamingIcon } from '../../icons/Wargaming'; -import strings from '../../lang/en-US.json'; -import { theme } from '../../stitches.config'; import * as App from '../../stores/app'; import { Link } from '../Link'; import * as styles from './index.css'; -export const NAVBAR_HEIGHT = 64; - export default function Navbar() { const [showHamburgerMenu, setShowHamburgerMenu] = useState(false); const pathname = usePathname(); const logins = App.use((state) => state.logins); - const filteredTools = TOOLS.filter((tool) => !tool.href); const mutateApp = App.useMutation(); return ( - - - - - setShowHamburgerMenu((state) => !state)} - > - {showHamburgerMenu ? : } - + + + + + - setShowHamburgerMenu(false)} - href="/" - style={{ - color: 'inherit', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - }} - weight="bold" - > - BlitzKit - - + + BlitzKit + + - - {filteredTools.map((tool) => { - const selected = pathname.startsWith(`/tools/${tool.id}`); + - return ( + + {TOOLS.map((tool, index) => { + const selected = pathname.startsWith(`/tools/${tool.id}`); + + return ( + <> + {index > 0 && } {tool.title} - ); - })} - - - - setShowHamburgerMenu(false)} - href="https://discord.gg/nDt7AjGJQH" - target="_blank" - style={{ - color: 'inherit', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - }} - > - - - - setShowHamburgerMenu(false)} - href="https://www.patreon.com/tresabhi" - target="_blank" - style={{ - color: 'inherit', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - }} - > - - - - setShowHamburgerMenu(false)} - color="gray" - highContrast - > - - - - - - - - - - - event.preventDefault()} - > - {(logins.patreon || logins.wargaming) && ( - - - Logged in accounts - - - {logins.patreon && ( - - - Patreon - - - )} - - {logins.wargaming && ( - - - Wargaming - - - )} - - )} - - {!logins.patreon !== !logins.wargaming && ( - - - - )} - - {(!logins.patreon || !logins.wargaming) && ( - - - Log in with... - - - {!logins.patreon && ( - - - - )} - - {!logins.wargaming && ( - - - - - - - - Choose your region - - - {REGIONS.map((region) => ( - - - - - - ))} - - - - - )} - - )} - - - + + ); + })} - - {filteredTools.map((tool) => ( - setShowHamburgerMenu(false)} - > - - {tool.title} - - - ))} + + + + + + + + + + + + + + + - + ); } diff --git a/src/constants/tools.tsx b/src/constants/tools.tsx index bbfb3cbe5..666eb3c1d 100644 --- a/src/constants/tools.tsx +++ b/src/constants/tools.tsx @@ -126,6 +126,4 @@ export const TOOLS: Tool[] = [ playerStatsTool, sessionTool, ratingTool, - discordTool, - moreTool, ];