diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 82567c4cf..3b308060d 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -8,7 +8,7 @@ import { usePathname } from 'next/navigation'; import { ReactNode, Suspense, useEffect, useState } from 'react'; import { Footer } from '../components/Footer'; import { Loader } from '../components/Loader'; -import Navbar from '../components/Navbar'; +import Navbar, { NAVBAR_HEIGHT } from '../components/Navbar'; import { Party3 } from '../components/Party3'; import isDev from '../core/blitzkit/isDev'; import { isLocalhost } from '../core/blitzkit/isLocalhost'; @@ -31,7 +31,6 @@ export default function RootLayout({ children }: RootLayoutProps) { const pathname = usePathname(); const isEmbed = pathname.split('/')[1] === 'embeds'; const isRoot = pathname === '/'; - const darkMode = useApp((state) => state.darkMode); const [showDevBuildAlert, setShowDevBuildAlert] = useState(false); useEffect(() => { @@ -68,7 +67,7 @@ export default function RootLayout({ children }: RootLayoutProps) { }} > {!isEmbed && } + Experimental version! diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx index fad5b380c..75b2a9832 100644 --- a/src/app/settings/page.tsx +++ b/src/app/settings/page.tsx @@ -6,25 +6,10 @@ import { useApp } from '../../stores/app'; export default function Page() { const developerMode = useApp((state) => state.developerMode); - const darkMode = useApp((state) => state.darkMode); return ( - - Appearance - - - Dark mode (experimental) - - useApp.setState({ darkMode: checked }) - } - /> - - - Advanced diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx index a5904c878..d0de05bf7 100644 --- a/src/components/Navbar/index.tsx +++ b/src/components/Navbar/index.tsx @@ -1,10 +1,12 @@ import { + Cross1Icon, DiscordLogoIcon, GearIcon, HamburgerMenuIcon, PersonIcon, } from '@radix-ui/react-icons'; import { + Box, Button, Dialog, Flex, @@ -12,10 +14,13 @@ import { IconButton, Link as LinkRadix, Popover, + ScrollArea, Spinner, + Text, } from '@radix-ui/themes'; import Link from 'next/link'; -import { Suspense, useEffect } from 'react'; +import { Suspense, useEffect, useState } from 'react'; +import * as styles from '../../app/page.css'; import { REGIONS, UNLOCALIZED_REGION_NAMES } from '../../constants/regions'; import { TOOLS } from '../../constants/tools'; import { authURL } from '../../core/blitz/authURL'; @@ -28,9 +33,12 @@ import { theme } from '../../stitches.config'; import { useApp } from '../../stores/app'; import { LoggedIn } from './components/LoggedIn'; +export const NAVBAR_HEIGHT = 64; + export default function Navbar() { const wideFormat = useWideFormat(480); const login = useApp((state) => state.login); + const [showHamburgerMenu, setShowHamburgerMenu] = useState(true); useEffect(() => { if (!login) return; @@ -76,155 +84,164 @@ export default function Navbar() { ); return ( -
- + - - - - - - - - - - - {!wideFormat && {plugs}} - - - Tools - - - {TOOLS.map((tool, index) => { - if (tool.href || tool.disabled) return null; - - return ( - event.preventDefault()} - > - - {tool.title} - - - ); - })} - - - - - - - + - - + setShowHamburgerMenu((state) => !state)} + > + {showHamburgerMenu ? : } + -
+ + + - {wideFormat && plugs} +
- - - - - - - + {wideFormat && plugs} - {login && ( - - + + - + - + + - - - }> - - - - - - )} + {login && ( + + + + + + - {/* TODO: re-enable in the future */} - {!login && false && ( - - - - - - - - Choose your region - - - {REGIONS.map((region) => ( - - {UNLOCALIZED_REGION_NAMES[region]} - - ))} + + + }> + + - - - - )} + + + )} + + {/* TODO: re-enable in the future */} + {!login && false && ( + + + + + + + + Choose your region + + + {REGIONS.map((region) => ( + + {UNLOCALIZED_REGION_NAMES[region]} + + ))} + + + + + )} + + + + + {TOOLS.filter((tool) => !tool.href).map((tool) => ( + { + if (tool.disabled) event.preventDefault(); + }} + > + + {tool.title} + + + ))} + + - -
+ + ); } diff --git a/src/constants/tools.ts b/src/constants/tools.ts index d6ea5187d..e9ddbe0e4 100644 --- a/src/constants/tools.ts +++ b/src/constants/tools.ts @@ -25,18 +25,11 @@ export const TOOLS: Tool[] = [ }, { id: 'rating', - title: 'Rating leaderboard', + title: 'Rating', description: 'Full rating gamemode leaderboard', pageDescription: 'Live and archived full rating leaderboard for World of Tanks Blitz', }, - { - id: 'session', - title: 'Session tracker', - description: 'Live session performance tracker', - pageDescription: - 'Track your stats in real time as you play World of Tanks Blitz', - }, { id: 'compare', title: 'Compare', @@ -44,6 +37,13 @@ export const TOOLS: Tool[] = [ pageDescription: 'Compare tanks statistics and loadouts in World of Tanks Blitz', }, + { + id: 'session', + title: 'Session tracker', + description: 'Live session performance tracker', + pageDescription: + 'Track your stats in real time as you play World of Tanks Blitz', + }, { id: 'discord', title: 'Discord bot', diff --git a/src/icons/Blitzkit.tsx b/src/icons/Blitzkit.tsx new file mode 100644 index 000000000..c8425ef4e --- /dev/null +++ b/src/icons/Blitzkit.tsx @@ -0,0 +1,180 @@ +import { ComponentProps } from 'react'; + +export function Blitzkit(props: ComponentProps<'svg'>) { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/src/stores/app.ts b/src/stores/app.ts index 38fbdff15..cb036b2db 100644 --- a/src/stores/app.ts +++ b/src/stores/app.ts @@ -12,7 +12,6 @@ interface Login { export interface App { devBuildAgreementTime: number; developerMode: boolean; - darkMode: boolean; login?: Login; } @@ -21,7 +20,6 @@ export const useApp = create()( (set) => ({ devBuildAgreementTime: 0, developerMode: false, - darkMode: true, }), { name: 'app', merge: (a, b) => merge(b, a) }, ),