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/Home/Home.tsx b/tracknow/web/src/components/Home/Home.tsx index df4654b..6fa2749 100644 --- a/tracknow/web/src/components/Home/Home.tsx +++ b/tracknow/web/src/components/Home/Home.tsx @@ -1,29 +1,79 @@ 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, + useBreakpointValue, + useDisclosure, +} from "@chakra-ui/react"; +import MobileDrawer from "../../misc/MobileDrawer"; +import LeftSideBar from "../SideBar/LeftSideBar"; +import RightSideBar from "../SideBar/RightSideBar"; 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 ( <> + + {/* Adjust height to fit the viewport */} + {/* Left section */} + {isMobile ? ( + + + + ) : ( + + + + )} - - {loading && laptime_loading ? ( - - ) : ( - - )} - + {/* Middle section */} + + {loading && laptime_loading ? ( + + ) : ( + + )} + + {/* Right section */} + + {/* right sidebar content*/} + + - ) -}; \ 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..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, @@ -13,9 +12,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 +68,7 @@ export const Navbar = () => ( ); -export const NavbarLoggedIn = ({ name, pp }: identityProfile) => { +export const NavbarLoggedIn = ({ name, pp, onOpen }: identityProfile) => { const { handleLogout } = useMiscFunctions(); return ( { borderColor={useColorModeValue("#323536", "white")} > - - + } + aria-label="Open Menu" + variant="ghost" + onClick={onOpen} + display={{ base: "flex", md: "none" }} + /> + + tracknow - + + @@ -99,7 +108,7 @@ export const NavbarLoggedIn = ({ name, pp }: identityProfile) => { as={ReactRouterLink} to={`/user/${name}/create-moments`} leftIcon={}> - Create + Create = ({ laptimes, fetchMoreData, hasMore return ( - - {/* Left section*/} - - {/* left section content */} - - - {/* Middle section */} - - } - > - {laptimes.map((laptime) => ( - - - - {laptime.title} - - @{laptime.by} - - {laptime.youtube_link && ( - - )} - - - - - {laptime.car && ( - - - - - - {laptime.car} - - - - - )} - {laptime.track && ( - - - - - - - - - {laptime.track} - - - - - - )} - {laptime.platform && ( - - - - - - - {laptime.platform} - - - - - )} - {laptime.time && ( - - - - - - - {laptime.time} - - - - - )} - - - - {showFullText ? laptime.comment : laptime.comment.substring(0, textLimit)} - {laptime.comment.length > textLimit && ( - setShowFullText(!showFullText)} + + + + + } + > + {laptimes.map((laptime) => ( + + + + {laptime.title} + + @{laptime.by} + + {laptime.youtube_link && ( + + )} + + + + + {laptime.car && ( + + + + + + {laptime.car} + + + + + )} + {laptime.track && ( + + + - {showFullText ? "Read less" : "... Read more"} - - )} - + + + + + + {laptime.track} + + + + + + )} + {laptime.platform && ( + + + + + + + {laptime.platform} + + + + + )} + {laptime.time && ( + + + + + + + {laptime.time} + + + + + )} + + + + {showFullText ? laptime.comment : laptime.comment.substring(0, textLimit)} + {laptime.comment.length > textLimit && ( + setShowFullText(!showFullText)} + > + {showFullText ? "Read less" : "... Read more"} + + )} + - + - {/*like, comments + {/*like, comments @@ -197,16 +186,11 @@ export const HomePost: React.FC = ({ laptimes, fetchMoreData, hasMore */} - - ))} - - - - {/* Right section*/} - - {/*right content section */} - - + + ))} + + + ); }; diff --git a/tracknow/web/src/components/SideBar/LeftSideBar.tsx b/tracknow/web/src/components/SideBar/LeftSideBar.tsx new file mode 100644 index 0000000..fedcf05 --- /dev/null +++ b/tracknow/web/src/components/SideBar/LeftSideBar.tsx @@ -0,0 +1,135 @@ +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; + icon: IconType; + disabled?: boolean; + +} +interface SideItemProps extends FlexProps { + icon: IconType; + children: string | number; + disabled?: boolean; +} + +const LinkItems: Array = [ + { 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: 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 +}; + + +const SideBarItem = ({ icon, children, disabled, ...rest }: SideItemProps) => { + const link = linkMap[String(children)] || "/"; + + return disabled ? ( +
+ + {icon && ( + + )} + {children} + +
+ ) : ( + + + {icon && ( + + )} + {children} + + + ); +}; + + +const LeftSideBar = () => { + + return ( + <> + + + {LinkItems.map((link) => ( + + {link.name} + + ))} + +
+ + tracknow, © 2024, All rights reserved + +
+ + + + + + ) + +}; +export default LeftSideBar; \ No newline at end of file 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 diff --git a/tracknow/web/src/components/User/UserAccountSettings.tsx b/tracknow/web/src/components/User/UserAccountSettings.tsx index 5cba7d7..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 } 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(""); @@ -34,8 +39,12 @@ const UserAccountSettings = () => { const { editProfilePic, editProfile } = useUsers(); const fileInputRef = React.useRef(null); + const { isOpen, onOpen, onClose } = useDisclosure(); + const isMobile = useBreakpointValue({ base: true, md: false }); + // sidebar + /*if (loading) { return ; }; */ @@ -160,13 +169,24 @@ const UserAccountSettings = () => { return ( <> - - - - {/* Left section*/} - - {/* left section content */} - + + + + {/* Left section */} + {isMobile ? ( + + + + ) : ( + + + + )} {/* Main Section */} { my={1} mx={[0, 5]} overflow={'hidden'} - borderRadius={"1px"}> + borderRadius={"1px"} + overflowY="auto" + height="full" + > diff --git a/tracknow/web/src/components/User/UserAddLaptimes.tsx b/tracknow/web/src/components/User/UserAddLaptimes.tsx index 5d22c91..12fc484 100644 --- a/tracknow/web/src/components/User/UserAddLaptimes.tsx +++ b/tracknow/web/src/components/User/UserAddLaptimes.tsx @@ -4,7 +4,9 @@ import { Heading, Stack, Button, FormControl, Textarea, FormHelperText, Input, Select, HStack, useToast, - FormErrorMessage + FormErrorMessage, + useDisclosure, + useBreakpointValue } from "@chakra-ui/react"; import { SimracingTitles } from "../../misc/dropDown"; import { useLaptimes } from "../../hooks/useLaptimes"; @@ -14,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(); @@ -31,6 +37,9 @@ 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(); /*if (loading) { @@ -82,12 +91,23 @@ const UserAddLaptimes = () => { return ( <> - - + + {/* Left section*/} - - {/* left section content */} - + {isMobile ? ( + + + + ) : ( + + + + )} {/* Main Section */} { my={1} mx={[0, 5]} overflow={'hidden'} - borderRadius={"1px"}> + borderRadius={"1px"} + overflowY="auto" + height="full" + > diff --git a/tracknow/web/src/components/User/UserLaptimes.tsx b/tracknow/web/src/components/User/UserLaptimes.tsx index b347ab9..2ff1e26 100644 --- a/tracknow/web/src/components/User/UserLaptimes.tsx +++ b/tracknow/web/src/components/User/UserLaptimes.tsx @@ -3,18 +3,21 @@ 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"; const UserLaptimes = () => { const { mylaptime, fetchMoreData2, hasMore2, laptime_loading } = useLaptimes(); - const { username, profilePic, loading } = useUsers(); + const { username, profilePic, loading, userId } = useUsers(); + + const { isOpen, onOpen, onClose } = useDisclosure(); //const [loading, setLoading] = React.useState(false) - if (laptime_loading) { + /* if (laptime_loading) { return ( <> @@ -24,25 +27,25 @@ const UserLaptimes = () => { }; if (mylaptime.length === 0) { - return ( - <> - -
- - Nothing to see here, Create Post above - -
- - ); - } + return ( + <> + +
+ + Nothing to see here, Create Post above + +
+ + ); + } */ return ( <> - + {loading ? ( ) : ( - + )} ); diff --git a/tracknow/web/src/components/User/UserProfile.tsx b/tracknow/web/src/components/User/UserProfile.tsx index abb759e..1fd20ce 100644 --- a/tracknow/web/src/components/User/UserProfile.tsx +++ b/tracknow/web/src/components/User/UserProfile.tsx @@ -6,11 +6,13 @@ import { Center, Avatar, Stack, Text, CardHeader, Heading, Icon, - HStack + HStack, + useDisclosure, + useBreakpointValue } 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"; @@ -18,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(); @@ -32,10 +38,14 @@ export const UserProfile = ({ id }: { id: number }) => { const textLimit = 100; - const { dummyLaptimes } = useMiscFunctions() + //const { dummyLaptimes } = useMiscFunctions() const { fetchUsersLaptimes } = useLaptimes() const { LazyLoadYoutubeEmbed } = miscFunctions(); + + const { isOpen, onOpen, onClose } = useDisclosure(); + const isMobile = useBreakpointValue({ base: true, md: false }); + const fetchMoreData = () => { if (hasMore) { setPage((prevPage) => prevPage + 1); @@ -81,19 +91,44 @@ export const UserProfile = ({ id }: { id: number }) => { ); }; + if (!laptime_loading && laptimes.length === 0) { + return ( + <> + +
+ + Nothing to see here + +
+ + ); + } + + return ( <> - + {laptime_loading ? ( ) : ( - + {/* Left section*/} - - {/* left section content */} - + {isMobile ? ( + + + + ) : ( + + + + )} {/* Main Section */} { my={1} mx={[0, 5]} overflow={'hidden'} - borderRadius={"1px"}> + borderRadius={"1px"} + overflowY="auto" + height="full" + > @@ -255,4 +293,5 @@ export const UserProfile = ({ id }: { id: number }) => { ); + }; \ No newline at end of file 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 ( + + + + + +
+ + tracknow + +
+ {children} + + + + + ); +}; + +export default MobileDrawer; 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