feat: added navbar to the statistic screen #4

Swackles · Jan 10, 2024 · 9681388 · 9681388
1 parent e228680
commit 9681388
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 63 deletions.
diff --git a/src/common/components/Header.tsx → src/common/components/Header/Header.tsx b/src/common/components/Header.tsx → src/common/components/Header/Header.tsx
@@ -1,11 +1,17 @@
 import * as React from 'react';
 import Sheet from '@mui/joy/Sheet';
-import {Button, FormControl, FormHelperText, Stack, Typography, useTheme} from "@mui/joy";
+import {Button, FormControl, FormHelperText, IconButton, Stack, Typography, useTheme} from "@mui/joy";
 import InfoOutlined from "@mui/icons-material/InfoOutlined";
 import {useGameStatsStore} from "@common/stores/gameStatsStore";
 import {ChangeEvent, useCallback, useState} from "react";
+import MenuIcon from '@mui/icons-material/Menu';
+import { toggleSidebar } from "./helper";
 
-export default function Header() {
+export interface HeaderProps {
+  compact?: boolean
+}
+
+export default function Header({ compact }: HeaderProps) {
   const theme = useTheme()
   const { setJson } = useGameStatsStore()
 
@@ -38,26 +44,34 @@ export default function Header() {
         zIndex: 9995,
         gap: 1,
         width: "100vw",
-        backgroundColor: theme.vars.palette.primary[600]
+        backgroundColor: compact ? "#FFF" : theme.vars.palette.primary[600]
       }}
     >
       <Stack
         direction="row"
-        justifyContent={{ xs: "flex-end", md: "space-between" }}
+        justifyContent={{ xs: compact ? "space-between" : "flex-end", md: "space-between" }}
         alignItems="center"
         spacing={0}
-        sx={{ p: 7,}}
+        sx={{ p: compact ? 3 : 7 }}
       >
-        <Typography level="h1"
-                    sx={{
-                      color: "#FFF",
-                      display: {
-                        xs: "none",
-                        md: "block"
-                      }
-                    }}>
+        {!compact && <Typography level="h1"
+                     sx={{
+                       color: "#FFF",
+                       display: {
+                         xs: "none",
+                         md: "block"
+                       }
+                     }}>
           THE FINALS TRACKER
-        </Typography>
+        </Typography>}
+        {compact && <IconButton
+          onClick={() => toggleSidebar()}
+          variant="outlined"
+          color="neutral"
+          size="sm"
+        >
+          <MenuIcon/>
+        </IconButton>}
         <Stack
           direction="row"
           justifyContent="flex-end"
@@ -78,7 +92,7 @@ export default function Header() {
             {fileError && <FormHelperText><InfoOutlined/> {fileError}</FormHelperText>}
           </FormControl>
           <a href="https://github.com/Swackles/the-finals-tracker" target="_blank">
-            <img style={{ width: 35, height: 35}} src={"/github-mark-white.svg"}/>
+            <img style={{ width: 35, height: 35 }} src={compact ? "/github-mark.svg" : "/github-mark-white.svg"}/>
           </a>
         </Stack>
       </Stack>

diff --git a/src/common/components/Header/helper.ts b/src/common/components/Header/helper.ts
@@ -0,0 +1,26 @@
+export function openSidebar() {
+  if (typeof document !== 'undefined') {
+    document.body.style.overflow = 'hidden';
+    document.documentElement.style.setProperty('--SideNavigation-slideIn', '1');
+  }
+}
+
+export function closeSidebar() {
+  if (typeof document !== 'undefined') {
+    document.documentElement.style.removeProperty('--SideNavigation-slideIn');
+    document.body.style.removeProperty('overflow');
+  }
+}
+
+export function toggleSidebar() {
+  if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+    const slideIn = window
+      .getComputedStyle(document.documentElement)
+      .getPropertyValue('--SideNavigation-slideIn');
+    if (slideIn) {
+      closeSidebar();
+    } else {
+      openSidebar();
+    }
+  }
+}
diff --git a/src/common/components/Header/index.ts b/src/common/components/Header/index.ts
@@ -0,0 +1,3 @@
+import Header from "./Header"
+
+export default Header
diff --git a/src/pages/UserStatsV2/UserStatsV2.tsx b/src/pages/UserStatsV2/UserStatsV2.tsx
@@ -7,40 +7,36 @@ import {Filter} from "@common/components";
 import {useState} from "react";
 import {useGameStatsStore} from "@common/stores/gameStatsStore";
 import {GameMode} from "@common/models";
+import Header from "@common/components/Header";
 
 export const UserStatsV2 = () => {
   const gameStatsStore = useGameStatsStore()
   const [activeTab, setActiveTab] = useState("overview")
 
   return (
     <Box sx={{ display: 'flex', minHeight: '100dvh' }}>
-        <Sidebar activeTab={activeTab} setActiveTab={setActiveTab} />
-        <Box
-            sx={{
-                px: { xs: 2, md: 6 },
-                pt: {
-                    xs: 'calc(12px + var(--Header-height))',
-                    sm: 'calc(12px + var(--Header-height))',
-                    md: 3,
-                },
-                pb: { xs: 2, sm: 2, md: 3 },
-                flex: 1,
-                display: 'flex',
-                flexDirection: 'column',
-                minWidth: 0,
-                gap: 1,
-                marginBottom: 5
-            }}
-        >
-            <Box sx={{ display: 'flex', alignItems: 'flex-start', flexDirection: 'column', gap: 1 }}>
-                {activeTab !== "match-history" && <Filter values={[GameMode.TOTAL, GameMode.CASUAL, GameMode.RANKED]}
-                                                                defaultValue={gameStatsStore.gameMode}
-                                                                onChange={x => gameStatsStore.setGameMode(x as GameMode)}/>}
-                {activeTab === "overview" && <OverviewPanel /> }
-                {activeTab === "weapons" && <WeaponsPanel />}
-                {activeTab === "match-history" && <MatchHistoryPanel />}
-            </Box>
+      <Sidebar activeTab={activeTab} setActiveTab={setActiveTab} />
+      <Header compact />
+      <Box
+        sx={{
+          px: { xs: 2, md: 6 },
+          pt: '100px',
+          pb: { xs: 2, sm: 2, md: 3 },
+          flex: 1,
+          display: 'flex',
+          flexDirection: 'column',
+          minWidth: 0,
+          gap: 1
+      }} >
+        <Box sx={{ display: 'flex', alignItems: 'flex-start', flexDirection: 'column', gap: 1 }}>
+          {activeTab !== "match-history" && <Filter values={[GameMode.TOTAL, GameMode.CASUAL, GameMode.RANKED]}
+                                                    defaultValue={gameStatsStore.gameMode}
+                                                    onChange={x => gameStatsStore.setGameMode(x as GameMode)}/>}
+          {activeTab === "overview" && <OverviewPanel /> }
+          {activeTab === "weapons" && <WeaponsPanel />}
+          {activeTab === "match-history" && <MatchHistoryPanel />}
         </Box>
+      </Box>
     </Box>
   )
 }
diff --git a/src/pages/UserStatsV2/components/sidebar/Sidebar.tsx b/src/pages/UserStatsV2/components/sidebar/Sidebar.tsx
@@ -64,11 +64,11 @@ export const Sidebar = ({ activeTab, setActiveTab }: SidebarProps) => {
             backgroundColor: 'var(--joy-palette-background-backdrop)',
             transition: 'opacity 0.4s',
             transform: {
-              xs: 'translateX(calc(100% * (var(--SideNavigation-slideIn, 0) - 1) + var(--SideNavigation-slideIn, 0) * var(--Sidebar-width, 0px)))',
+              xs: 'translateX(calc(100% * (var(--SideNavigation-slideIn, 0) - 1) + var(--SideNavigation-slideIn, 0) * calc(var(--Sidebar-width, 0px) + 33px)))',
               lg: 'translateX(-100%)',
             },
           }}
-          onClick={() => closeSidebar}
+          onClick={() => closeSidebar()}
         />
         <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
           <Typography level="title-lg">The Finals Tracker</Typography>

diff --git a/src/pages/UserStatsV2/components/sidebar/helpers.ts b/src/pages/UserStatsV2/components/sidebar/helpers.ts
@@ -1,26 +1,6 @@
-export function openSidebar() {
-    if (typeof document !== 'undefined') {
-        document.body.style.overflow = 'hidden';
-        document.documentElement.style.setProperty('--SideNavigation-slideIn', '1');
-    }
-}
-
 export function closeSidebar() {
     if (typeof document !== 'undefined') {
         document.documentElement.style.removeProperty('--SideNavigation-slideIn');
         document.body.style.removeProperty('overflow');
     }
 }
-
-export function toggleSidebar() {
-    if (typeof window !== 'undefined' && typeof document !== 'undefined') {
-        const slideIn = window
-            .getComputedStyle(document.documentElement)
-            .getPropertyValue('--SideNavigation-slideIn');
-        if (slideIn) {
-            closeSidebar();
-        } else {
-            openSidebar();
-        }
-    }
-}