From b903c3afd40234c86d6c1e29ebe60b49cac4fb66 Mon Sep 17 00:00:00 2001
From: vantage-ola <vantageola4@gmail.com>
Date: Sat, 20 Jul 2024 04:58:38 +0100
Subject: [PATCH 1/9] chore: Replaced Post.tsx with Userprofile in Userlaptimes

---
 .../web/src/components/User/UserLaptimes.tsx  | 29 ++++++++++---------
 .../web/src/components/User/UserProfile.tsx   | 19 ++++++++++--
 2 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/tracknow/web/src/components/User/UserLaptimes.tsx b/tracknow/web/src/components/User/UserLaptimes.tsx
index b347ab9..9adab15 100644
--- a/tracknow/web/src/components/User/UserLaptimes.tsx
+++ b/tracknow/web/src/components/User/UserLaptimes.tsx
@@ -6,15 +6,16 @@ import { NavbarLoggedIn } from "../Navbar/Navbar";
 import { Center, Text, } from "@chakra-ui/react";
 import { useUsers } from "../../hooks/useUsers";
 import { LoadingSpinner } from "../Loading/LoadingSpinner";
+import { UserProfile } from "./UserProfile";
 
 const UserLaptimes = () => {
 
     const { mylaptime, fetchMoreData2, hasMore2, laptime_loading } = useLaptimes();
-    const { username, profilePic, loading } = useUsers();
+    const { username, profilePic, loading, userId } = useUsers();
 
     //const [loading, setLoading] = React.useState(false)
 
-    if (laptime_loading) {
+    /* if (laptime_loading) {
         return (
             <>
                 <NavbarLoggedIn name={username} pp={profilePic} />
@@ -24,17 +25,17 @@ const UserLaptimes = () => {
     };
 
     if (mylaptime.length === 0) {
-        return (
-            <>
-                <NavbarLoggedIn name={username} pp={profilePic} />
-                <Center h="100vh">
-                    <Text color="white" fontSize="lg">
-                        Nothing to see here, Create Post above
-                    </Text>
-                </Center>
-            </>
-        );
-    }
+         return (
+             <>
+                 <NavbarLoggedIn name={username} pp={profilePic} />
+                 <Center h="100vh">
+                     <Text color="white" fontSize="lg">
+                         Nothing to see here, Create Post above
+                     </Text>
+                 </Center>
+             </>
+         );
+     } */
 
     return (
         <>
@@ -42,7 +43,7 @@ const UserLaptimes = () => {
             {loading ? (
                 <LoadingSpinner />
             ) : (
-                <HomePost laptimes={mylaptime} fetchMoreData={fetchMoreData2} hasMore={hasMore2} />
+                <UserProfile id={userId} />
             )}
         </>
     );
diff --git a/tracknow/web/src/components/User/UserProfile.tsx b/tracknow/web/src/components/User/UserProfile.tsx
index abb759e..c870784 100644
--- a/tracknow/web/src/components/User/UserProfile.tsx
+++ b/tracknow/web/src/components/User/UserProfile.tsx
@@ -10,7 +10,7 @@ import {
 } from "@chakra-ui/react";
 import { LoadingSpinner } from "../Loading/LoadingSpinner";
 import { GetUserLaptimesResponse, OneUser } from "../../Types";
-import useMiscFunctions from "../../misc/miscFunctions";
+//import useMiscFunctions from "../../misc/miscFunctions";
 import { useLaptimes } from "../../hooks/useLaptimes";
 import InfiniteScroll from "react-infinite-scroll-component";
 import { BeatLoader } from "react-spinners";
@@ -32,7 +32,7 @@ export const UserProfile = ({ id }: { id: number }) => {
     const textLimit = 100;
 
 
-    const { dummyLaptimes } = useMiscFunctions()
+    //const { dummyLaptimes } = useMiscFunctions()
     const { fetchUsersLaptimes } = useLaptimes()
     const { LazyLoadYoutubeEmbed } = miscFunctions();
 
@@ -81,6 +81,20 @@ export const UserProfile = ({ id }: { id: number }) => {
         );
     };
 
+    // TODO fix bug where it shows this for a bit before loading the info.
+    if (laptimes.length === 0) {
+        return (
+            <>
+                <NavbarLoggedIn name={username} pp={profilePic} />
+                <Center h="100vh">
+                    <Text color="white" fontSize="lg">
+                        Nothing to see here
+                    </Text>
+                </Center>
+            </>
+        );
+    };
+
     return (
 
         <>
@@ -255,4 +269,5 @@ export const UserProfile = ({ id }: { id: number }) => {
 
         </>
     );
+
 };
\ No newline at end of file

From af77e529e855ec71d4ba4576e386cc7e40028ca1 Mon Sep 17 00:00:00 2001
From: vantage-ola <vantageola4@gmail.com>
Date: Sat, 20 Jul 2024 06:10:07 +0100
Subject: [PATCH 2/9] Prepare NavbarLoggedIn for sidebar

---
 tracknow/web/src/Types.ts                              |  1 +
 .../web/src/components/User/UserAccountSettings.tsx    |  5 +++--
 tracknow/web/src/components/User/UserAddLaptimes.tsx   |  8 ++++++--
 tracknow/web/src/components/User/UserLaptimes.tsx      |  6 ++++--
 tracknow/web/src/components/User/UserProfile.tsx       | 10 +++++++---
 5 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/tracknow/web/src/Types.ts b/tracknow/web/src/Types.ts
index 441b28e..c3c9455 100644
--- a/tracknow/web/src/Types.ts
+++ b/tracknow/web/src/Types.ts
@@ -66,6 +66,7 @@ export interface identity {
 export interface identityProfile {
     name: string; // username
     pp: string; // profile_pic
+    onOpen: () => void;
 }
 
 export interface EditUser {
diff --git a/tracknow/web/src/components/User/UserAccountSettings.tsx b/tracknow/web/src/components/User/UserAccountSettings.tsx
index 5cba7d7..67506b5 100644
--- a/tracknow/web/src/components/User/UserAccountSettings.tsx
+++ b/tracknow/web/src/components/User/UserAccountSettings.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Card, CardBody, CardHeader, useToast, Flex, FormControl, Heading, Stack, Avatar, FormErrorMessage, InputRightElement, InputGroup, Center, Input } from "@chakra-ui/react";
+import { Box, Button, Card, CardBody, CardHeader, useToast, Flex, FormControl, Heading, Stack, Avatar, FormErrorMessage, InputRightElement, InputGroup, Center, Input, useDisclosure } from "@chakra-ui/react";
 import * as React from "react";
 import { CountryDropdown } from "../../misc/dropDown";
 import { NavbarLoggedIn } from "../Navbar/Navbar";
@@ -34,6 +34,7 @@ const UserAccountSettings = () => {
     const { editProfilePic, editProfile } = useUsers();
     const fileInputRef = React.useRef<HTMLInputElement>(null);
 
+    const { isOpen, onOpen, onClose } = useDisclosure();
 
 
     /*if (loading) {
@@ -160,7 +161,7 @@ const UserAccountSettings = () => {
     return (
         <>
 
-            <NavbarLoggedIn name={username} pp={profilePic} />
+            <NavbarLoggedIn name={username} pp={profilePic} onOpen={onOpen} />
 
             <Flex mt={10} bg="dark">
                 {/* Left section*/}
diff --git a/tracknow/web/src/components/User/UserAddLaptimes.tsx b/tracknow/web/src/components/User/UserAddLaptimes.tsx
index 5d22c91..8e27706 100644
--- a/tracknow/web/src/components/User/UserAddLaptimes.tsx
+++ b/tracknow/web/src/components/User/UserAddLaptimes.tsx
@@ -4,7 +4,8 @@ import {
     Heading, Stack, Button, FormControl,
     Textarea, FormHelperText, Input, Select,
     HStack, useToast,
-    FormErrorMessage
+    FormErrorMessage,
+    useDisclosure
 } from "@chakra-ui/react";
 import { SimracingTitles } from "../../misc/dropDown";
 import { useLaptimes } from "../../hooks/useLaptimes";
@@ -31,6 +32,9 @@ const UserAddLaptimes = () => {
 
     const [isLoading, setIsLoading] = React.useState(false); // for moments
 
+    const { isOpen, onOpen, onClose } = useDisclosure();
+
+
     const toast = useToast();
 
     /*if (loading) {
@@ -82,7 +86,7 @@ const UserAddLaptimes = () => {
 
     return (
         <>
-            <NavbarLoggedIn name={username} pp={profilePic} />
+            <NavbarLoggedIn name={username} pp={profilePic} onOpen={onOpen} />
             <Flex mt={10} bg="dark">
                 {/* Left section*/}
                 <Box flex="1" borderRight="1px solid #323536" overflowY="auto" display={["none", "none", "block"]}>
diff --git a/tracknow/web/src/components/User/UserLaptimes.tsx b/tracknow/web/src/components/User/UserLaptimes.tsx
index 9adab15..2ff1e26 100644
--- a/tracknow/web/src/components/User/UserLaptimes.tsx
+++ b/tracknow/web/src/components/User/UserLaptimes.tsx
@@ -3,7 +3,7 @@ import { useLaptimes } from "../../hooks/useLaptimes";
 import { NavbarLoggedIn } from "../Navbar/Navbar";
 //import { useNavigate } from "react-router-dom";
 //import { LoadingSpinner } from "../Loading/LoadingSpinner";
-import { Center, Text, } from "@chakra-ui/react";
+import { Center, Text, useDisclosure, } from "@chakra-ui/react";
 import { useUsers } from "../../hooks/useUsers";
 import { LoadingSpinner } from "../Loading/LoadingSpinner";
 import { UserProfile } from "./UserProfile";
@@ -13,6 +13,8 @@ const UserLaptimes = () => {
     const { mylaptime, fetchMoreData2, hasMore2, laptime_loading } = useLaptimes();
     const { username, profilePic, loading, userId } = useUsers();
 
+    const { isOpen, onOpen, onClose } = useDisclosure();
+
     //const [loading, setLoading] = React.useState(false)
 
     /* if (laptime_loading) {
@@ -39,7 +41,7 @@ const UserLaptimes = () => {
 
     return (
         <>
-            <NavbarLoggedIn name={username} pp={profilePic} />
+            <NavbarLoggedIn name={username} pp={profilePic} onOpen={onOpen} />
             {loading ? (
                 <LoadingSpinner />
             ) : (
diff --git a/tracknow/web/src/components/User/UserProfile.tsx b/tracknow/web/src/components/User/UserProfile.tsx
index c870784..480de76 100644
--- a/tracknow/web/src/components/User/UserProfile.tsx
+++ b/tracknow/web/src/components/User/UserProfile.tsx
@@ -6,7 +6,8 @@ import {
     Center, Avatar, Stack, Text,
     CardHeader, Heading,
     Icon,
-    HStack
+    HStack,
+    useDisclosure
 } from "@chakra-ui/react";
 import { LoadingSpinner } from "../Loading/LoadingSpinner";
 import { GetUserLaptimesResponse, OneUser } from "../../Types";
@@ -36,6 +37,9 @@ export const UserProfile = ({ id }: { id: number }) => {
     const { fetchUsersLaptimes } = useLaptimes()
     const { LazyLoadYoutubeEmbed } = miscFunctions();
 
+
+    const { isOpen, onOpen, onClose } = useDisclosure();
+
     const fetchMoreData = () => {
         if (hasMore) {
             setPage((prevPage) => prevPage + 1);
@@ -85,7 +89,7 @@ export const UserProfile = ({ id }: { id: number }) => {
     if (laptimes.length === 0) {
         return (
             <>
-                <NavbarLoggedIn name={username} pp={profilePic} />
+                <NavbarLoggedIn name={username} pp={profilePic} onOpen={onOpen} />
                 <Center h="100vh">
                     <Text color="white" fontSize="lg">
                         Nothing to see here
@@ -98,7 +102,7 @@ export const UserProfile = ({ id }: { id: number }) => {
     return (
 
         <>
-            <NavbarLoggedIn name={username} pp={profilePic} />
+            <NavbarLoggedIn name={username} pp={profilePic} onOpen={onOpen} />
             {laptime_loading ? (
                 <LoadingSpinner />
 

From bb22ef4175067eda67b80c45a5ae493fff888319 Mon Sep 17 00:00:00 2001
From: vantage-ola <vantageola4@gmail.com>
Date: Sat, 20 Jul 2024 08:11:15 +0100
Subject: [PATCH 3/9] drawer theme

---
 .../src/components/SideBar/LeftSideBar.tsx    | 73 +++++++++++++++++++
 tracknow/web/src/tracknowTheme.ts             | 25 ++++++-
 2 files changed, 95 insertions(+), 3 deletions(-)
 create mode 100644 tracknow/web/src/components/SideBar/LeftSideBar.tsx

diff --git a/tracknow/web/src/components/SideBar/LeftSideBar.tsx b/tracknow/web/src/components/SideBar/LeftSideBar.tsx
new file mode 100644
index 0000000..684257d
--- /dev/null
+++ b/tracknow/web/src/components/SideBar/LeftSideBar.tsx
@@ -0,0 +1,73 @@
+import { Box, Center, Divider, Flex, FlexProps, Icon, Stack } from '@chakra-ui/react';
+import {
+    FiHome,
+    FiCompass,
+} from 'react-icons/fi'
+import { IconType } from 'react-icons'
+
+interface LinkItemProps {
+    name: string
+    icon: IconType
+}
+interface SideItemProps extends FlexProps {
+    icon: IconType
+    children: string | number
+}
+
+const LinkItems: Array<LinkItemProps> = [
+    { name: 'Home', icon: FiHome },
+    { name: 'Explore', icon: FiCompass },
+]
+
+const SideBarItem = ({ icon, children, ...rest }: SideItemProps) => {
+
+    return (
+        <Box style={{ textDecoration: 'none' }}
+            _focus={{ boxShadow: 'none' }}
+            {...rest}
+        >
+            <Flex align="center"
+                p="4"
+                mx="4"
+                borderRadius="lg"
+                role="group"
+                cursor="pointer"
+                _hover={{
+                    bg: 'lightdark',
+                    color: 'white',
+                }}>
+                {icon && (
+                    <Icon
+                        mr="4"
+                        fontSize="16"
+                        _groupHover={{
+                            color: 'white',
+                        }}
+                        as={icon}
+                    />
+                )}
+                {children}
+            </Flex>
+        </Box>
+    )
+};
+
+const LeftSideBar = () => {
+
+    return (
+        <>
+            <Box mt={2}>
+                <Stack>
+                    {LinkItems.map((link) => (
+                        <SideBarItem key={link.name} icon={link.icon}>
+                            {link.name}
+                        </SideBarItem>
+                    ))}
+                </Stack>
+            </Box>
+
+        </>
+    )
+
+};
+export default LeftSideBar;
\ No newline at end of file
diff --git a/tracknow/web/src/tracknowTheme.ts b/tracknow/web/src/tracknowTheme.ts
index 611c5a8..c7c2b9a 100644
--- a/tracknow/web/src/tracknowTheme.ts
+++ b/tracknow/web/src/tracknowTheme.ts
@@ -1,10 +1,24 @@
-import { extendTheme } from "@chakra-ui/react";
+import { Drawer, extendTheme } from "@chakra-ui/react";
 import { defineStyle, defineStyleConfig, createMultiStyleConfigHelpers } from '@chakra-ui/react'
 import { menuAnatomy } from '@chakra-ui/anatomy';
+import { drawerAnatomy as parts } from '@chakra-ui/anatomy';
 import '@fontsource-variable/exo-2';
 
 const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(menuAnatomy.keys)
 
+const {
+    definePartsStyle: defineDrawerPartsStyle,
+    defineMultiStyleConfig: defineDrawerMultiStyleConfig
+} = createMultiStyleConfigHelpers(parts.keys);
+
+const drawer = defineDrawerPartsStyle({
+    dialog: {
+        bg: 'dark',
+
+    },
+
+})
+
 const navbarButton = defineStyle({
     _hover: { bg: '#1e2021' },
     color: 'white',
@@ -65,6 +79,9 @@ export const linkTheme = defineStyleConfig({
 const menuTheme = defineMultiStyleConfig({ baseStyle })
 const cardTheme = defineMultiStyleConfig({ baseStyle })
 
+export const drawerTheme = defineDrawerMultiStyleConfig({
+    variants: { drawer },
+})
 export const theme = extendTheme({
     styles: {
         global: {
@@ -76,7 +93,8 @@ export const theme = extendTheme({
     },
     colors: {
         trackred: "#ff3131",
-        dark: "#0d0c0c"
+        dark: "#0d0c0c",
+        lightdark: "#1e2021"
     },
     fonts: {
         heading: `'Exo 2 Variable', sans-serif`,
@@ -86,6 +104,7 @@ export const theme = extendTheme({
         Button: badgeTheme,
         Menu: menuTheme,
         Card: cardTheme,
-        Link: linkTheme
+        Link: linkTheme,
+        Drawer: drawerTheme
     }
 });
\ No newline at end of file

From 35bdf3ee3a3465e43ff605b1c896e5379dd0672d Mon Sep 17 00:00:00 2001
From: vantage-ola <vantageola4@gmail.com>
Date: Sat, 20 Jul 2024 21:42:59 +0100
Subject: [PATCH 4/9] feature: sidebar

---
 tracknow/web/src/components/Home/Home.tsx     |  98 ++++++-
 tracknow/web/src/components/Navbar/Navbar.tsx |  24 +-
 tracknow/web/src/components/Post/Post.tsx     | 270 ++++++++----------
 .../src/components/SideBar/LeftSideBar.tsx    |  25 +-
 .../src/components/SideBar/RightSideBar.tsx   |  13 +
 5 files changed, 256 insertions(+), 174 deletions(-)
 create mode 100644 tracknow/web/src/components/SideBar/RightSideBar.tsx

diff --git a/tracknow/web/src/components/Home/Home.tsx b/tracknow/web/src/components/Home/Home.tsx
index df4654b..f0b9c51 100644
--- a/tracknow/web/src/components/Home/Home.tsx
+++ b/tracknow/web/src/components/Home/Home.tsx
@@ -1,29 +1,101 @@
 import { NavbarLoggedIn } from "../Navbar/Navbar";
 import { HomePost } from "../Post/Post";
-
 import { useLaptimes } from "../../hooks/useLaptimes";
 import { useUsers } from "../../hooks/useUsers";
 import { LoadingSpinner } from "../Loading/LoadingSpinner";
-
+import {
+    Box,
+    Flex,
+    Text,
+    Center,
+    useBreakpointValue,
+    useDisclosure,
+    Drawer,
+    DrawerBody,
+    DrawerCloseButton,
+    DrawerContent,
+    DrawerOverlay,
+} from "@chakra-ui/react";
+import LeftSideBar from "../SideBar/LeftSideBar";
+import RightSideBar from "../SideBar/RightSideBar"; // Assuming you have a RightSideBar component
 
 export const Home = () => {
-
     const { laptime, fetchMoreData, hasMore, laptime_loading } = useLaptimes();
-    const { username, profilePic, loading, } = useUsers();
+    const { username, profilePic, loading } = useUsers();
 
+    const { isOpen, onOpen, onClose } = useDisclosure();
+    const isMobile = useBreakpointValue({ base: true, md: false });
 
     return (
         <>
+            <NavbarLoggedIn name={username} pp={profilePic} onOpen={onOpen} />
 
+            <Flex mt={10} bg="dark" height="calc(100vh - 60px)"> {/* Adjust height to fit the viewport */}
+                {/* Left section */}
+                {isMobile ? (
+                    <Drawer
+                        variant={"drawer"}
+                        isOpen={isOpen}
+                        placement="left"
+                        onClose={onClose}
+                    >
+                        <DrawerOverlay>
+                            <DrawerContent>
+                                <DrawerCloseButton />
+                                <DrawerBody>
+                                    <Center>
+                                        <Text fontSize="xl" as="b">
+                                            tracknow
+                                        </Text>
+                                    </Center>
+                                    <LeftSideBar />
+                                </DrawerBody>
+                            </DrawerContent>
+                        </DrawerOverlay>
+                    </Drawer>
+                ) : (
+                    <Box
+                        flex="1"
+                        borderRight="1px solid #323536"
+                        overflowY="auto"
+                        height="full"
+                    >
+                        <LeftSideBar />
+                    </Box>
+                )}
 
-            <NavbarLoggedIn name={username} pp={profilePic} />
-            {loading && laptime_loading ? (
-                <LoadingSpinner />
-            ) : (
-                <HomePost laptimes={laptime} fetchMoreData={fetchMoreData} hasMore={hasMore} />
-            )}
-
+                {/* Middle section */}
+                <Box
+                    flex="3"
+                    rounded={"sm"}
+                    my={1}
+                    mx={[0, 5]}
+                    overflow={"hidden"}
+                    borderRadius={"1px"}
+                    overflowY="auto"
+                    height="full"
+                >
+                    {loading && laptime_loading ? (
+                        <LoadingSpinner />
+                    ) : (
+                        <HomePost
+                            laptimes={laptime}
+                            fetchMoreData={fetchMoreData}
+                            hasMore={hasMore}
+                        />
+                    )}
+                </Box>
 
+                {/* Right section */}
+                <Box
+                    flex="1"
+                    overflowY="auto"
+                    display={["none", "none", "block"]}
+                    height="full"
+                >
+                    <RightSideBar /> {/* Add your right sidebar content here */}
+                </Box>
+            </Flex>
         </>
-    )
-};
\ No newline at end of file
+    );
+};
diff --git a/tracknow/web/src/components/Navbar/Navbar.tsx b/tracknow/web/src/components/Navbar/Navbar.tsx
index e0db543..5d9b438 100644
--- a/tracknow/web/src/components/Navbar/Navbar.tsx
+++ b/tracknow/web/src/components/Navbar/Navbar.tsx
@@ -13,9 +13,11 @@ import {
     MenuButton,
     MenuDivider,
     MenuItem,
-    MenuList
+    MenuList,
+    IconButton
 } from "@chakra-ui/react";
-import { AddIcon } from '@chakra-ui/icons'
+import { AddIcon } from '@chakra-ui/icons';
+import { FiMenu } from "react-icons/fi";
 import { Link as ReactRouterLink } from 'react-router-dom';
 import { identityProfile } from "../../Types";
 import useMiscFunctions from "../../misc/miscFunctions";
@@ -67,7 +69,7 @@ export const Navbar = () => (
 );
 
 
-export const NavbarLoggedIn = ({ name, pp }: identityProfile) => {
+export const NavbarLoggedIn = ({ name, pp, onOpen }: identityProfile) => {
     const { handleLogout } = useMiscFunctions();
     return (
         <Box
@@ -83,13 +85,21 @@ export const NavbarLoggedIn = ({ name, pp }: identityProfile) => {
             borderColor={useColorModeValue("#323536", "white")}
         >
             <Flex h={10} alignItems={"center"} justifyContent={'space-between'}>
-                <Box>
-                    <Link as={ReactRouterLink} to="/home" variant={'navbarLink'}>
+                <IconButton
+                    icon={<FiMenu />}
+                    aria-label="Open Menu"
+                    variant="ghost"
+                    onClick={onOpen}
+                    display={{ base: "flex", md: "none" }}
+                />
+                <Flex alignItems={"center"} justifyContent={{ base: "center", md: "flex-start" }} marginLeft={{ base: 8, md: 0 }}>
+                    <Link as={ReactRouterLink} to="/home" variant={"navbarLink"}>
                         <Text fontSize="xl" as="b">
                             tracknow
                         </Text>
                     </Link>
-                </Box>
+                </Flex>
+
 
                 <Flex alignItems={"center"}>
                     <Stack direction={"row"} spacing={1}>
@@ -99,7 +109,7 @@ export const NavbarLoggedIn = ({ name, pp }: identityProfile) => {
                             as={ReactRouterLink}
                             to={`/user/${name}/create-moments`}
                             leftIcon={<AddIcon />}>
-                            Create
+                            <Text display={{ base: "none", md: "inline" }}>Create</Text>
                         </Button>
                         <Menu>
                             <MenuButton
diff --git a/tracknow/web/src/components/Post/Post.tsx b/tracknow/web/src/components/Post/Post.tsx
index f8ef50a..c474ec0 100644
--- a/tracknow/web/src/components/Post/Post.tsx
+++ b/tracknow/web/src/components/Post/Post.tsx
@@ -36,142 +36,131 @@ export const HomePost: React.FC<PostProps> = ({ laptimes, fetchMoreData, hasMore
 
     return (
 
-        <Flex mt={10} bg="dark">
-            {/* Left section*/}
-            <Box flex="1" borderRight="1px solid #323536" overflowY="auto" display={["none", "none", "block"]}>
-                {/* left section content */}
-            </Box>
-
-            {/* Middle section */}
-            <Box flex="3"
-                rounded={'sm'}
-                my={1}
-                mx={[0, 5]}
-                overflow={'hidden'}
-                borderRadius={"1px"}
-                overflowY="auto"
-            >
-                <InfiniteScroll
-                    dataLength={laptimes.length}
-                    next={fetchMoreData}
-                    hasMore={hasMore}
-                    loader={<Center><BeatLoader size={8} color='red' /></Center>}
-                >
-                    {laptimes.map((laptime) => (
-                        <Box key={laptime.id.toString()} p={1} borderBottom="1px solid #323536">
-
-                            <Flex justifyContent={"space-between"} p={2}>
-                                <Text as="b" fontSize={{ base: 'sm', md: 'lg' }}>{laptime.title}</Text>
-
-                                <Link as={ReactRouterLink} to={`/user/${laptime.user_id}/${laptime.by}/`} fontSize="sm" color={"GrayText"}>@{laptime.by}</Link>
-                            </Flex>
-                            {laptime.youtube_link && (
-                                <LazyLoadYoutubeEmbed youtubeLink={laptime.youtube_link} />
-                            )}
-                            <Box p={4} >
-                                <Flex alignItems={"center"} justifyContent={"space-between"} overflowX="auto"
-                                >
-                                    <Stack direction={"row"} spacing={2} align="flex-start" flexShrink="0">
-
-                                        {laptime.car && (
-                                            <Box
-                                                bg="black"
-                                                display={"inline-block"}
-                                                px={2}
-                                                py={1}
-                                                color="white"
-                                                mb={2}
-                                            >
-                                                <Flex justifyContent={"space-between"}>
-                                                    <HStack>
-                                                        <Icon color="red" as={FaCar} />
-                                                        <Text color={"GrayText"} fontSize={"xs"} fontWeight="medium">
-                                                            {laptime.car}
-                                                        </Text>
-                                                    </HStack>
-                                                </Flex>
-                                            </Box>
-                                        )}
-                                        {laptime.track && (
-
-                                            <Flex>
-                                                <Box
-                                                    bg="black"
-                                                    display={"inline-block"}
-                                                    px={2}
-                                                    py={1}
-                                                    color="white"
-                                                    mb={2}
-                                                >
-                                                    <Flex justifyContent={"space-between"}>
-                                                        <HStack>
-                                                            <Icon color="red" as={RiMapPinLine} />
-
-                                                            <Text color={"GrayText"} fontSize={"xs"} fontWeight="medium">
-                                                                {laptime.track}
-                                                            </Text>
-                                                        </HStack>
-                                                    </Flex>
-                                                </Box>
-                                            </Flex>
-                                        )}
-                                        {laptime.platform && (
-
-                                            <Box
-                                                bg="black"
-                                                display={"inline-block"}
-                                                px={2}
-                                                py={1}
-                                                color="white"
-                                                mb={2}
-                                            >
-                                                <Flex justifyContent={"space-between"}>
-                                                    <HStack>
-                                                        <Icon color="red" as={RiComputerLine} />
-                                                        <Text color={"GrayText"} fontSize={"xs"} fontWeight="medium">
-                                                            {laptime.platform}
-                                                        </Text>
-                                                    </HStack>
-                                                </Flex>
-                                            </Box>
-                                        )}
-                                        {laptime.time && (
-
-                                            <Box
-                                                bg="black"
-                                                display={"inline-block"}
-                                                px={2}
-                                                py={1}
-                                                color="white"
-                                                mb={2}
-                                            >
-                                                <Flex justifyContent={"space-between"}>
-                                                    <HStack>
-                                                        <Icon color="red" as={RiTimerFlashLine} />
-                                                        <Text color={"GrayText"} fontSize={"xs"} fontWeight="medium">
-                                                            {laptime.time}
-                                                        </Text>
-                                                    </HStack>
-                                                </Flex>
-                                            </Box>
-                                        )}
-                                    </Stack>
-                                </Flex>
-                                <Text fontSize={"smaller"} color={"white"} mt={3}>
-                                    {showFullText ? laptime.comment : laptime.comment.substring(0, textLimit)}
-                                    {laptime.comment.length > textLimit && (
-                                        <span
-                                            style={{ color: "red", fontWeight: "bold", cursor: "pointer" }}
-                                            onClick={() => setShowFullText(!showFullText)}
+
+
+
+
+        <InfiniteScroll
+            dataLength={laptimes.length}
+            next={fetchMoreData}
+            hasMore={hasMore}
+            loader={<Center><BeatLoader size={8} color='red' /></Center>}
+        >
+            {laptimes.map((laptime) => (
+                <Box key={laptime.id.toString()} p={1} borderBottom="1px solid #323536">
+
+                    <Flex justifyContent={"space-between"} p={2}>
+                        <Text as="b" fontSize={{ base: 'sm', md: 'lg' }}>{laptime.title}</Text>
+
+                        <Link as={ReactRouterLink} to={`/user/${laptime.user_id}/${laptime.by}/`} fontSize="sm" color={"GrayText"}>@{laptime.by}</Link>
+                    </Flex>
+                    {laptime.youtube_link && (
+                        <LazyLoadYoutubeEmbed youtubeLink={laptime.youtube_link} />
+                    )}
+                    <Box p={4} >
+                        <Flex alignItems={"center"} justifyContent={"space-between"} overflowX="auto"
+                        >
+                            <Stack direction={"row"} spacing={2} align="flex-start" flexShrink="0">
+
+                                {laptime.car && (
+                                    <Box
+                                        bg="black"
+                                        display={"inline-block"}
+                                        px={2}
+                                        py={1}
+                                        color="white"
+                                        mb={2}
+                                    >
+                                        <Flex justifyContent={"space-between"}>
+                                            <HStack>
+                                                <Icon color="red" as={FaCar} />
+                                                <Text color={"GrayText"} fontSize={"xs"} fontWeight="medium">
+                                                    {laptime.car}
+                                                </Text>
+                                            </HStack>
+                                        </Flex>
+                                    </Box>
+                                )}
+                                {laptime.track && (
+
+                                    <Flex>
+                                        <Box
+                                            bg="black"
+                                            display={"inline-block"}
+                                            px={2}
+                                            py={1}
+                                            color="white"
+                                            mb={2}
                                         >
-                                            {showFullText ? "Read less" : "... Read more"}
-                                        </span>
-                                    )}
-                                </Text>
+                                            <Flex justifyContent={"space-between"}>
+                                                <HStack>
+                                                    <Icon color="red" as={RiMapPinLine} />
+
+                                                    <Text color={"GrayText"} fontSize={"xs"} fontWeight="medium">
+                                                        {laptime.track}
+                                                    </Text>
+                                                </HStack>
+                                            </Flex>
+                                        </Box>
+                                    </Flex>
+                                )}
+                                {laptime.platform && (
+
+                                    <Box
+                                        bg="black"
+                                        display={"inline-block"}
+                                        px={2}
+                                        py={1}
+                                        color="white"
+                                        mb={2}
+                                    >
+                                        <Flex justifyContent={"space-between"}>
+                                            <HStack>
+                                                <Icon color="red" as={RiComputerLine} />
+                                                <Text color={"GrayText"} fontSize={"xs"} fontWeight="medium">
+                                                    {laptime.platform}
+                                                </Text>
+                                            </HStack>
+                                        </Flex>
+                                    </Box>
+                                )}
+                                {laptime.time && (
+
+                                    <Box
+                                        bg="black"
+                                        display={"inline-block"}
+                                        px={2}
+                                        py={1}
+                                        color="white"
+                                        mb={2}
+                                    >
+                                        <Flex justifyContent={"space-between"}>
+                                            <HStack>
+                                                <Icon color="red" as={RiTimerFlashLine} />
+                                                <Text color={"GrayText"} fontSize={"xs"} fontWeight="medium">
+                                                    {laptime.time}
+                                                </Text>
+                                            </HStack>
+                                        </Flex>
+                                    </Box>
+                                )}
+                            </Stack>
+                        </Flex>
+                        <Text fontSize={"smaller"} color={"white"} mt={3}>
+                            {showFullText ? laptime.comment : laptime.comment.substring(0, textLimit)}
+                            {laptime.comment.length > textLimit && (
+                                <span
+                                    style={{ color: "red", fontWeight: "bold", cursor: "pointer" }}
+                                    onClick={() => setShowFullText(!showFullText)}
+                                >
+                                    {showFullText ? "Read less" : "... Read more"}
+                                </span>
+                            )}
+                        </Text>
 
-                            </Box>
+                    </Box>
 
-                            {/*like, comments
+                    {/*like, comments
                         <Flex alignItems={"center"} justifyContent={"right"} p={2}>
                             <Stack direction={"row"} spacing={2}>
                                 <Flex >
@@ -197,16 +186,11 @@ export const HomePost: React.FC<PostProps> = ({ laptimes, fetchMoreData, hasMore
                             </Stack>
                         </Flex>
                         */}
-                        </Box>
-                    ))}
-                </InfiniteScroll>
-            </Box>
-
-            {/* Right section*/}
-            <Box flex="1" borderLeft="1px solid #323536" overflowY="auto" display={["none", "none", "block"]}>
-                {/*right content section */}
-            </Box>
-        </Flex>
+                </Box>
+            ))}
+        </InfiniteScroll>
+
+
     );
 };
 
diff --git a/tracknow/web/src/components/SideBar/LeftSideBar.tsx b/tracknow/web/src/components/SideBar/LeftSideBar.tsx
index 684257d..3909acd 100644
--- a/tracknow/web/src/components/SideBar/LeftSideBar.tsx
+++ b/tracknow/web/src/components/SideBar/LeftSideBar.tsx
@@ -1,9 +1,7 @@
-import { Box, Center, Divider, Flex, FlexProps, Icon, Stack } from '@chakra-ui/react';
-import {
-    FiHome,
-    FiCompass,
-} from 'react-icons/fi'
+import { Box, Center, Divider, Flex, FlexProps, Icon, Link, Stack } from '@chakra-ui/react';
+import { FiHome, FiCompass } from 'react-icons/fi'
 import { IconType } from 'react-icons'
+import { Link as ReactRouterLink, useNavigate } from 'react-router-dom';
 
 interface LinkItemProps {
     name: string
@@ -21,13 +19,18 @@ const LinkItems: Array<LinkItemProps> = [
 
 const SideBarItem = ({ icon, children, ...rest }: SideItemProps) => {
 
+    let link = "/";
+    if (children === "Home") {
+        link = "/home";
+    }
+    if (children === "Explore") {
+        link = "/explore";
+    }
+
     return (
-        <Box style={{ textDecoration: 'none' }}
-            _focus={{ boxShadow: 'none' }}
-            {...rest}
-        >
+        <Link as={ReactRouterLink} to={link} style={{ textDecoration: 'none' }}>
             <Flex align="center"
-                p="4"
+                p="2"
                 mx="4"
                 borderRadius="lg"
                 role="group"
@@ -48,7 +51,7 @@ const SideBarItem = ({ icon, children, ...rest }: SideItemProps) => {
                 )}
                 {children}
             </Flex>
-        </Box>
+        </Link>
     )
 };
 
diff --git a/tracknow/web/src/components/SideBar/RightSideBar.tsx b/tracknow/web/src/components/SideBar/RightSideBar.tsx
new file mode 100644
index 0000000..9c2f3a6
--- /dev/null
+++ b/tracknow/web/src/components/SideBar/RightSideBar.tsx
@@ -0,0 +1,13 @@
+
+
+const RightSideBar = () => {
+
+    return (
+        <>
+
+        </>
+
+    )
+
+};
+export default RightSideBar;
\ No newline at end of file

From fc8343d5ddda7ee53cc14230b699639553ffc01c Mon Sep 17 00:00:00 2001
From: vantage-ola <vantageola4@gmail.com>
Date: Sun, 21 Jul 2024 18:46:38 +0100
Subject: [PATCH 5/9] added more items to the left side bar

---
 .../src/components/SideBar/LeftSideBar.tsx    | 74 ++++++++++++++-----
 1 file changed, 57 insertions(+), 17 deletions(-)

diff --git a/tracknow/web/src/components/SideBar/LeftSideBar.tsx b/tracknow/web/src/components/SideBar/LeftSideBar.tsx
index 3909acd..2462e83 100644
--- a/tracknow/web/src/components/SideBar/LeftSideBar.tsx
+++ b/tracknow/web/src/components/SideBar/LeftSideBar.tsx
@@ -1,7 +1,9 @@
-import { Box, Center, Divider, Flex, FlexProps, Icon, Link, Stack } from '@chakra-ui/react';
-import { FiHome, FiCompass } from 'react-icons/fi'
-import { IconType } from 'react-icons'
-import { Link as ReactRouterLink, useNavigate } from 'react-router-dom';
+import { Box, Center, Divider, Flex, FlexProps, Icon, Link, Stack, Text } from '@chakra-ui/react';
+import { FiHome, FiAward, FiGlobe, FiInfo, FiSettings, FiDollarSign, FiCalendar } from 'react-icons/fi';
+import { IconType } from 'react-icons';
+import { Link as ReactRouterLink } from 'react-router-dom';
+import { BiGhost } from "react-icons/bi";
+import { FaGithub } from "react-icons/fa";
 
 interface LinkItemProps {
     name: string
@@ -14,23 +16,29 @@ interface SideItemProps extends FlexProps {
 
 const LinkItems: Array<LinkItemProps> = [
     { name: 'Home', icon: FiHome },
-    { name: 'Explore', icon: FiCompass },
-]
+    { name: 'Discover', icon: FiGlobe },
+    { name: 'Events', icon: FiCalendar },
+    { name: 'Leaderboard', icon: FiAward },
+    { name: 'Setups', icon: FiSettings },
+    { name: 'Ghosts', icon: BiGhost },
+    { name: 'About tracknow', icon: FiInfo },
+    { name: 'Contribute', icon: FaGithub },
+    { name: 'Donate', icon: FiDollarSign },
+];
 
-const SideBarItem = ({ icon, children, ...rest }: SideItemProps) => {
+const linkMap: { [key: string]: string } = {
+    Home: "/home",
+    // Add more links here
+};
 
-    let link = "/";
-    if (children === "Home") {
-        link = "/home";
-    }
-    if (children === "Explore") {
-        link = "/explore";
-    }
 
-    return (
+const SideBarItem = ({ icon, children, ...rest }: SideItemProps) => {
+    const link = linkMap[String(children)] || "/";
+
+    return linkMap[String(children)] ? (
         <Link as={ReactRouterLink} to={link} style={{ textDecoration: 'none' }}>
             <Flex align="center"
-                p="2"
+                p="4"
                 mx="4"
                 borderRadius="lg"
                 role="group"
@@ -52,7 +60,32 @@ const SideBarItem = ({ icon, children, ...rest }: SideItemProps) => {
                 {children}
             </Flex>
         </Link>
-    )
+    ) : (
+        <div>
+            <Flex align="center"
+                p="4"
+                mx="4"
+                borderRadius="lg"
+                role="group"
+                cursor="not-allowed"
+                _hover={{
+                    bg: 'lightdark',
+                    color: 'white',
+                }}>
+                {icon && (
+                    <Icon
+                        mr="4"
+                        fontSize="16"
+                        _groupHover={{
+                            color: 'white',
+                        }}
+                        as={icon}
+                    />
+                )}
+                {children}
+            </Flex>
+        </div>
+    );
 };
 
 const LeftSideBar = () => {
@@ -67,8 +100,15 @@ const LeftSideBar = () => {
                         </SideBarItem>
                     ))}
                 </Stack>
+                <Center>
+                    <Box mt={2} fontSize="10px" color="GrayText">
+                        tracknow, © 2024, All rights reserved
+                    </Box>
+                </Center >
             </Box>
 
+
+
         </>
     )
 

From 9b35ccf5aa5b21fe731dea7ec46aaecb6d5d2cad Mon Sep 17 00:00:00 2001
From: vantage-ola <vantageola4@gmail.com>
Date: Mon, 22 Jul 2024 16:46:35 +0100
Subject: [PATCH 6/9] feature: mobile drawer component to reduce repetition
 across /web

---
 tracknow/web/src/misc/MobileDrawer.tsx | 38 ++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 tracknow/web/src/misc/MobileDrawer.tsx

diff --git a/tracknow/web/src/misc/MobileDrawer.tsx b/tracknow/web/src/misc/MobileDrawer.tsx
new file mode 100644
index 0000000..98a728e
--- /dev/null
+++ b/tracknow/web/src/misc/MobileDrawer.tsx
@@ -0,0 +1,38 @@
+import * as React from "react";
+import {
+    Drawer,
+    DrawerOverlay,
+    DrawerContent,
+    DrawerCloseButton,
+    DrawerBody,
+    Center,
+    Text,
+} from '@chakra-ui/react';
+
+interface MobileDrawerProps {
+    isOpen: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+}
+
+const MobileDrawer = ({ isOpen, onClose, children }: MobileDrawerProps) => {
+    return (
+        <Drawer variant="drawer" isOpen={isOpen} placement="left" onClose={onClose}>
+            <DrawerOverlay>
+                <DrawerContent>
+                    <DrawerCloseButton />
+                    <DrawerBody>
+                        <Center>
+                            <Text fontSize="xl" as="b">
+                                tracknow
+                            </Text>
+                        </Center>
+                        {children}
+                    </DrawerBody>
+                </DrawerContent>
+            </DrawerOverlay>
+        </Drawer>
+    );
+};
+
+export default MobileDrawer;

From 009d42beb329be0ce0ca028dd35f52625b347de7 Mon Sep 17 00:00:00 2001
From: vantage-ola <vantageola4@gmail.com>
Date: Mon, 22 Jul 2024 17:18:43 +0100
Subject: [PATCH 7/9] add left side bar across tracknow web

---
 tracknow/web/src/components/Home/Home.tsx     | 38 ++++---------------
 tracknow/web/src/components/Navbar/Navbar.tsx |  1 -
 .../components/User/UserAccountSettings.tsx   | 36 ++++++++++++++----
 .../src/components/User/UserAddLaptimes.tsx   | 33 ++++++++++++----
 .../web/src/components/User/UserProfile.tsx   | 38 ++++++++++++++-----
 5 files changed, 92 insertions(+), 54 deletions(-)

diff --git a/tracknow/web/src/components/Home/Home.tsx b/tracknow/web/src/components/Home/Home.tsx
index f0b9c51..6fa2749 100644
--- a/tracknow/web/src/components/Home/Home.tsx
+++ b/tracknow/web/src/components/Home/Home.tsx
@@ -6,18 +6,13 @@ import { LoadingSpinner } from "../Loading/LoadingSpinner";
 import {
     Box,
     Flex,
-    Text,
-    Center,
     useBreakpointValue,
     useDisclosure,
-    Drawer,
-    DrawerBody,
-    DrawerCloseButton,
-    DrawerContent,
-    DrawerOverlay,
 } from "@chakra-ui/react";
+
+import MobileDrawer from "../../misc/MobileDrawer";
 import LeftSideBar from "../SideBar/LeftSideBar";
-import RightSideBar from "../SideBar/RightSideBar"; // Assuming you have a RightSideBar component
+import RightSideBar from "../SideBar/RightSideBar";
 
 export const Home = () => {
     const { laptime, fetchMoreData, hasMore, laptime_loading } = useLaptimes();
@@ -30,29 +25,12 @@ export const Home = () => {
         <>
             <NavbarLoggedIn name={username} pp={profilePic} onOpen={onOpen} />
 
-            <Flex mt={10} bg="dark" height="calc(100vh - 60px)"> {/* Adjust height to fit the viewport */}
+            <Flex mt={10} bg="dark" height="calc(100vh - 45px)"> {/* Adjust height to fit the viewport */}
                 {/* Left section */}
                 {isMobile ? (
-                    <Drawer
-                        variant={"drawer"}
-                        isOpen={isOpen}
-                        placement="left"
-                        onClose={onClose}
-                    >
-                        <DrawerOverlay>
-                            <DrawerContent>
-                                <DrawerCloseButton />
-                                <DrawerBody>
-                                    <Center>
-                                        <Text fontSize="xl" as="b">
-                                            tracknow
-                                        </Text>
-                                    </Center>
-                                    <LeftSideBar />
-                                </DrawerBody>
-                            </DrawerContent>
-                        </DrawerOverlay>
-                    </Drawer>
+                    <MobileDrawer isOpen={isOpen} onClose={onClose}>
+                        <LeftSideBar />
+                    </MobileDrawer>
                 ) : (
                     <Box
                         flex="1"
@@ -93,7 +71,7 @@ export const Home = () => {
                     display={["none", "none", "block"]}
                     height="full"
                 >
-                    <RightSideBar /> {/* Add your right sidebar content here */}
+                    <RightSideBar /> {/*  right sidebar content*/}
                 </Box>
             </Flex>
         </>
diff --git a/tracknow/web/src/components/Navbar/Navbar.tsx b/tracknow/web/src/components/Navbar/Navbar.tsx
index 5d9b438..45e3c2a 100644
--- a/tracknow/web/src/components/Navbar/Navbar.tsx
+++ b/tracknow/web/src/components/Navbar/Navbar.tsx
@@ -1,4 +1,3 @@
-import * as React from "react";
 import {
     Box,
     Flex,
diff --git a/tracknow/web/src/components/User/UserAccountSettings.tsx b/tracknow/web/src/components/User/UserAccountSettings.tsx
index 67506b5..be65df5 100644
--- a/tracknow/web/src/components/User/UserAccountSettings.tsx
+++ b/tracknow/web/src/components/User/UserAccountSettings.tsx
@@ -1,5 +1,6 @@
-import { Box, Button, Card, CardBody, CardHeader, useToast, Flex, FormControl, Heading, Stack, Avatar, FormErrorMessage, InputRightElement, InputGroup, Center, Input, useDisclosure } from "@chakra-ui/react";
 import * as React from "react";
+
+import { Box, Button, Card, CardBody, CardHeader, useToast, Flex, FormControl, Heading, Stack, Avatar, FormErrorMessage, InputRightElement, InputGroup, Center, Input, useDisclosure, useBreakpointValue } from "@chakra-ui/react";
 import { CountryDropdown } from "../../misc/dropDown";
 import { NavbarLoggedIn } from "../Navbar/Navbar";
 import { useNavigate, Link as ReactRouterLink } from "react-router-dom";
@@ -10,6 +11,10 @@ import { BeatLoader } from "react-spinners";
 import { ViewIcon, ViewOffIcon } from "@chakra-ui/icons";
 import useMiscFunctions from "../../misc/miscFunctions";
 
+import MobileDrawer from "../../misc/MobileDrawer";
+import LeftSideBar from "../SideBar/LeftSideBar";
+import RightSideBar from "../SideBar/RightSideBar";
+
 const UserAccountSettings = () => {
 
     const [newusername, setNewUsername] = React.useState("");
@@ -35,7 +40,10 @@ const UserAccountSettings = () => {
     const fileInputRef = React.useRef<HTMLInputElement>(null);
 
     const { isOpen, onOpen, onClose } = useDisclosure();
+    const isMobile = useBreakpointValue({ base: true, md: false });
+
 
+    // sidebar
 
     /*if (loading) {
         return <LoadingSpinner />;
@@ -163,11 +171,22 @@ const UserAccountSettings = () => {
 
             <NavbarLoggedIn name={username} pp={profilePic} onOpen={onOpen} />
 
-            <Flex mt={10} bg="dark">
-                {/* Left section*/}
-                <Box flex="1" borderRight="1px solid #323536" overflowY="auto" display={["none", "none", "block"]}>
-                    {/* left section content */}
-                </Box>
+            <Flex mt={10} bg="dark" height="calc(100vh - 45px)">
+                {/* Left section */}
+                {isMobile ? (
+                    <MobileDrawer isOpen={isOpen} onClose={onClose}>
+                        <LeftSideBar />
+                    </MobileDrawer>
+                ) : (
+                    <Box
+                        flex="1"
+                        borderRight="1px solid #323536"
+                        overflowY="auto"
+                        height="full"
+                    >
+                        <LeftSideBar />
+                    </Box>
+                )}
 
                 {/* Main Section */}
                 <Box flex="4"
@@ -175,7 +194,10 @@ const UserAccountSettings = () => {
                     my={1}
                     mx={[0, 5]}
                     overflow={'hidden'}
-                    borderRadius={"1px"}>
+                    borderRadius={"1px"}
+                    overflowY="auto"
+                    height="full"
+                >
 
                     <Card size={'lg'} maxW='600px' >
                         <CardHeader>
diff --git a/tracknow/web/src/components/User/UserAddLaptimes.tsx b/tracknow/web/src/components/User/UserAddLaptimes.tsx
index 8e27706..12fc484 100644
--- a/tracknow/web/src/components/User/UserAddLaptimes.tsx
+++ b/tracknow/web/src/components/User/UserAddLaptimes.tsx
@@ -5,7 +5,8 @@ import {
     Textarea, FormHelperText, Input, Select,
     HStack, useToast,
     FormErrorMessage,
-    useDisclosure
+    useDisclosure,
+    useBreakpointValue
 } from "@chakra-ui/react";
 import { SimracingTitles } from "../../misc/dropDown";
 import { useLaptimes } from "../../hooks/useLaptimes";
@@ -15,6 +16,10 @@ import { NavbarLoggedIn } from "../Navbar/Navbar";
 //import { LoadingSpinner } from "../Loading/LoadingSpinner";
 import { useUsers } from "../../hooks/useUsers";
 
+import MobileDrawer from "../../misc/MobileDrawer";
+import LeftSideBar from "../SideBar/LeftSideBar";
+import RightSideBar from "../SideBar/RightSideBar";
+
 const UserAddLaptimes = () => {
 
     const { addLaptime } = useLaptimes();
@@ -33,7 +38,7 @@ const UserAddLaptimes = () => {
     const [isLoading, setIsLoading] = React.useState(false); // for moments
 
     const { isOpen, onOpen, onClose } = useDisclosure();
-
+    const isMobile = useBreakpointValue({ base: true, md: false });
 
     const toast = useToast();
 
@@ -87,11 +92,22 @@ const UserAddLaptimes = () => {
     return (
         <>
             <NavbarLoggedIn name={username} pp={profilePic} onOpen={onOpen} />
-            <Flex mt={10} bg="dark">
+            <Flex mt={10} bg="dark" height="calc(100vh - 45px)">
                 {/* Left section*/}
-                <Box flex="1" borderRight="1px solid #323536" overflowY="auto" display={["none", "none", "block"]}>
-                    {/* left section content */}
-                </Box>
+                {isMobile ? (
+                    <MobileDrawer isOpen={isOpen} onClose={onClose}>
+                        <LeftSideBar />
+                    </MobileDrawer>
+                ) : (
+                    <Box
+                        flex="1"
+                        borderRight="1px solid #323536"
+                        overflowY="auto"
+                        height="full"
+                    >
+                        <LeftSideBar />
+                    </Box>
+                )}
 
                 {/* Main Section */}
                 <Box flex="4"
@@ -99,7 +115,10 @@ const UserAddLaptimes = () => {
                     my={1}
                     mx={[0, 5]}
                     overflow={'hidden'}
-                    borderRadius={"1px"}>
+                    borderRadius={"1px"}
+                    overflowY="auto"
+                    height="full"
+                >
 
                     <Card size={'lg'} maxW='600px' >
                         <CardHeader>
diff --git a/tracknow/web/src/components/User/UserProfile.tsx b/tracknow/web/src/components/User/UserProfile.tsx
index 480de76..1fd20ce 100644
--- a/tracknow/web/src/components/User/UserProfile.tsx
+++ b/tracknow/web/src/components/User/UserProfile.tsx
@@ -7,7 +7,8 @@ import {
     CardHeader, Heading,
     Icon,
     HStack,
-    useDisclosure
+    useDisclosure,
+    useBreakpointValue
 } from "@chakra-ui/react";
 import { LoadingSpinner } from "../Loading/LoadingSpinner";
 import { GetUserLaptimesResponse, OneUser } from "../../Types";
@@ -19,6 +20,10 @@ import miscFunctions from "../../misc/miscFunctions";
 import { RiComputerLine, RiMapPinLine, RiTimerFlashLine } from "react-icons/ri";
 import { FaCar } from "react-icons/fa";
 
+import MobileDrawer from "../../misc/MobileDrawer";
+import LeftSideBar from "../SideBar/LeftSideBar";
+import RightSideBar from "../SideBar/RightSideBar";
+
 export const UserProfile = ({ id }: { id: number }) => {
 
     const { username, profilePic, loading } = useUsers();
@@ -39,6 +44,7 @@ export const UserProfile = ({ id }: { id: number }) => {
 
 
     const { isOpen, onOpen, onClose } = useDisclosure();
+    const isMobile = useBreakpointValue({ base: true, md: false });
 
     const fetchMoreData = () => {
         if (hasMore) {
@@ -85,8 +91,7 @@ export const UserProfile = ({ id }: { id: number }) => {
         );
     };
 
-    // TODO fix bug where it shows this for a bit before loading the info.
-    if (laptimes.length === 0) {
+    if (!laptime_loading && laptimes.length === 0) {
         return (
             <>
                 <NavbarLoggedIn name={username} pp={profilePic} onOpen={onOpen} />
@@ -97,7 +102,8 @@ export const UserProfile = ({ id }: { id: number }) => {
                 </Center>
             </>
         );
-    };
+    }
+
 
     return (
 
@@ -107,11 +113,22 @@ export const UserProfile = ({ id }: { id: number }) => {
                 <LoadingSpinner />
 
             ) : (
-                <Flex mt={10} bg="dark" >
+                <Flex mt={10} bg="dark" height="calc(100vh - 45px)">
                     {/* Left section*/}
-                    <Box flex="1" borderRight="1px solid #323536" overflowY="auto" display={["none", "none", "block"]}>
-                        {/* left section content */}
-                    </Box>
+                    {isMobile ? (
+                        <MobileDrawer isOpen={isOpen} onClose={onClose}>
+                            <LeftSideBar />
+                        </MobileDrawer>
+                    ) : (
+                        <Box
+                            flex="1"
+                            borderRight="1px solid #323536"
+                            overflowY="auto"
+                            height="full"
+                        >
+                            <LeftSideBar />
+                        </Box>
+                    )}
 
                     {/* Main Section */}
                     <Box
@@ -120,7 +137,10 @@ export const UserProfile = ({ id }: { id: number }) => {
                         my={1}
                         mx={[0, 5]}
                         overflow={'hidden'}
-                        borderRadius={"1px"}>
+                        borderRadius={"1px"}
+                        overflowY="auto"
+                        height="full"
+                    >
                         <Card size={'lg'} maxW='600px'>
 
                             <CardHeader>

From f264193b820ad5f13e0509d645cacc5b759159e0 Mon Sep 17 00:00:00 2001
From: vantage-ola <vantageola4@gmail.com>
Date: Mon, 22 Jul 2024 17:33:20 +0100
Subject: [PATCH 8/9] proper *disabled* feature for side bar items

---
 .../src/components/SideBar/LeftSideBar.tsx    | 72 ++++++++++---------
 1 file changed, 40 insertions(+), 32 deletions(-)

diff --git a/tracknow/web/src/components/SideBar/LeftSideBar.tsx b/tracknow/web/src/components/SideBar/LeftSideBar.tsx
index 2462e83..ee81a4d 100644
--- a/tracknow/web/src/components/SideBar/LeftSideBar.tsx
+++ b/tracknow/web/src/components/SideBar/LeftSideBar.tsx
@@ -6,24 +6,27 @@ import { BiGhost } from "react-icons/bi";
 import { FaGithub } from "react-icons/fa";
 
 interface LinkItemProps {
-    name: string
-    icon: IconType
+    name: string;
+    icon: IconType;
+    disabled?: boolean;
+
 }
 interface SideItemProps extends FlexProps {
-    icon: IconType
-    children: string | number
+    icon: IconType;
+    children: string | number;
+    disabled?: boolean;
 }
 
 const LinkItems: Array<LinkItemProps> = [
-    { name: 'Home', icon: FiHome },
-    { name: 'Discover', icon: FiGlobe },
-    { name: 'Events', icon: FiCalendar },
-    { name: 'Leaderboard', icon: FiAward },
-    { name: 'Setups', icon: FiSettings },
-    { name: 'Ghosts', icon: BiGhost },
-    { name: 'About tracknow', icon: FiInfo },
-    { name: 'Contribute', icon: FaGithub },
-    { name: 'Donate', icon: FiDollarSign },
+    { name: 'Home', icon: FiHome, disabled: false },
+    { name: 'Discover', icon: FiGlobe, disabled: true },
+    { name: 'Events', icon: FiCalendar, disabled: true },
+    { name: 'Leaderboard', icon: FiAward, disabled: true },
+    { name: 'Setups', icon: FiSettings, disabled: true },
+    { name: 'Ghosts', icon: BiGhost, disabled: true },
+    { name: 'About tracknow', icon: FiInfo, disabled: true },
+    { name: 'Contribute', icon: FaGithub, disabled: true },
+    { name: 'Donate', icon: FiDollarSign, disabled: true },
 ];
 
 const linkMap: { [key: string]: string } = {
@@ -32,59 +35,64 @@ const linkMap: { [key: string]: string } = {
 };
 
 
-const SideBarItem = ({ icon, children, ...rest }: SideItemProps) => {
+const SideBarItem = ({ icon, children, disabled, ...rest }: SideItemProps) => {
     const link = linkMap[String(children)] || "/";
 
-    return linkMap[String(children)] ? (
-        <Link as={ReactRouterLink} to={link} style={{ textDecoration: 'none' }}>
-            <Flex align="center"
+    return disabled ? (
+        <div>
+            <Flex
+                align="center"
                 p="4"
                 mx="4"
                 borderRadius="lg"
                 role="group"
-                cursor="pointer"
+                cursor="not-allowed"
+                opacity={0.5}
                 _hover={{
-                    bg: 'lightdark',
-                    color: 'white',
-                }}>
+                    bg: "lightdark",
+                    color: "white",
+                }}
+            >
                 {icon && (
                     <Icon
                         mr="4"
                         fontSize="16"
                         _groupHover={{
-                            color: 'white',
+                            color: "white",
                         }}
                         as={icon}
                     />
                 )}
                 {children}
             </Flex>
-        </Link>
+        </div>
     ) : (
-        <div>
-            <Flex align="center"
+        <Link as={ReactRouterLink} to={link} style={{ textDecoration: "none" }}>
+            <Flex
+                align="center"
                 p="4"
                 mx="4"
                 borderRadius="lg"
                 role="group"
-                cursor="not-allowed"
+                cursor="pointer"
                 _hover={{
-                    bg: 'lightdark',
-                    color: 'white',
-                }}>
+                    bg: "lightdark",
+                    color: "white",
+                }}
+            >
                 {icon && (
                     <Icon
                         mr="4"
                         fontSize="16"
                         _groupHover={{
-                            color: 'white',
+                            color: "white",
                         }}
                         as={icon}
                     />
                 )}
                 {children}
             </Flex>
-        </div>
+        </Link>
     );
 };
 
@@ -95,7 +103,7 @@ const LeftSideBar = () => {
             <Box mt={2}>
                 <Stack>
                     {LinkItems.map((link) => (
-                        <SideBarItem key={link.name} icon={link.icon}>
+                        <SideBarItem key={link.name} icon={link.icon} disabled={link.disabled}>
                             {link.name}
                         </SideBarItem>
                     ))}

From 0f3cf201bdfeab71b8ba3e5462399fef656d1f2b Mon Sep 17 00:00:00 2001
From: vantage-ola <vantageola4@gmail.com>
Date: Mon, 22 Jul 2024 18:22:10 +0100
Subject: [PATCH 9/9] + contribute,  donate link. allow links to open in a new
 tab.

---
 .../web/src/components/SideBar/LeftSideBar.tsx  | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/tracknow/web/src/components/SideBar/LeftSideBar.tsx b/tracknow/web/src/components/SideBar/LeftSideBar.tsx
index ee81a4d..fedcf05 100644
--- a/tracknow/web/src/components/SideBar/LeftSideBar.tsx
+++ b/tracknow/web/src/components/SideBar/LeftSideBar.tsx
@@ -25,12 +25,17 @@ const LinkItems: Array<LinkItemProps> = [
     { name: 'Setups', icon: FiSettings, disabled: true },
     { name: 'Ghosts', icon: BiGhost, disabled: true },
     { name: 'About tracknow', icon: FiInfo, disabled: true },
-    { name: 'Contribute', icon: FaGithub, disabled: true },
-    { name: 'Donate', icon: FiDollarSign, disabled: true },
+    { name: 'Contribute', icon: FaGithub, disabled: false },
+    { name: 'Donate', icon: FiDollarSign, disabled: false },
 ];
 
 const linkMap: { [key: string]: string } = {
     Home: "/home",
+
+    // TODO make this items open in a new page.
+    Donate: 'https://www.buymeacoffee.com/vantageola',
+    Contribute: 'https://github.com/vantage-ola',
+
     // Add more links here
 };
 
@@ -67,7 +72,12 @@ const SideBarItem = ({ icon, children, disabled, ...rest }: SideItemProps) => {
             </Flex>
         </div>
     ) : (
-        <Link as={ReactRouterLink} to={link} style={{ textDecoration: "none" }}>
+        <Link
+            as={ReactRouterLink}
+            to={link}
+            style={{ textDecoration: "none" }}
+            target={link.startsWith("http") ? "_blank" : undefined} // open in a new tab if  item url starts wiht http.
+        >
             <Flex
                 align="center"
                 p="4"
@@ -96,6 +106,7 @@ const SideBarItem = ({ icon, children, disabled, ...rest }: SideItemProps) => {
     );
 };
 
+
 const LeftSideBar = () => {
 
     return (