diff options
Diffstat (limited to 'react-frontend/src/components')
| -rw-r--r-- | react-frontend/src/components/GameCard.tsx | 3 | ||||
| -rw-r--r-- | react-frontend/src/components/Layout.tsx | 37 |
2 files changed, 36 insertions, 4 deletions
diff --git a/react-frontend/src/components/GameCard.tsx b/react-frontend/src/components/GameCard.tsx index 4367977..35bae57 100644 --- a/react-frontend/src/components/GameCard.tsx +++ b/react-frontend/src/components/GameCard.tsx @@ -6,6 +6,7 @@ export type Tag = { tag_type: string, name: string, }; +export type BasicUser = { id: number, user_name: string }; export type GameType = { id: number, title: string, @@ -17,11 +18,11 @@ export type GameType = { order: number, created_at: string, updated_at: string, - user_id: number, tags: Tag[], card_img: string, char_img: string, title_img: string, + user: BasicUser, }; export type GameCardProps = { link: string, game: GameType }; diff --git a/react-frontend/src/components/Layout.tsx b/react-frontend/src/components/Layout.tsx index 274e579..08d1315 100644 --- a/react-frontend/src/components/Layout.tsx +++ b/react-frontend/src/components/Layout.tsx @@ -1,4 +1,4 @@ -import { Dispatch } from 'react'; +import { Dispatch, useState } from 'react'; import { Outlet, Link, useNavigate } from "react-router-dom"; import { IconButton, Button, ButtonGroup } from 'rsuite'; import { Icon } from '@rsuite/icons'; @@ -6,6 +6,8 @@ import { FaUser } from "react-icons/fa6"; import { FaGamepad } from "react-icons/fa"; import { GiCowboyHolster } from "react-icons/gi"; import { GrAdd } from "react-icons/gr"; +import { FaChevronRight } from "react-icons/fa"; +import { FaChevronLeft } from "react-icons/fa"; import { UserType } from "../routes/index"; export type userData = { name: string }; @@ -30,12 +32,41 @@ export default function Layout(prop : { userData: userData, setUserData : Dispat const loggedout_element = <IconButton onClick={loginLink} appearance="primary" color="green" icon={<Icon as={FaUser}/>}>Log In</IconButton>; const loggedin_element = <ButtonGroup className="flex"><Button appearance="ghost" color="red" style={{width:"100%"}}>{prop.userData.name}</Button><Button onClick={logoutLink} appearance="subtle" style={{paddingLeft:"1.4em", paddingRight:"1.4em"}}>Log Out</Button></ButtonGroup>; - console.log(prop); + const [sidebarOpen, setSidebarOpen] = useState(false); + const [sidebarClosed, setSidebarClosed] = useState(false); + const [sidebarInit, setSidebarInit] = useState(true); + const handleSidebarOpen = () => { + if(sidebarInit) { + setSidebarOpen(true); + setSidebarInit(false); + } + else { + setSidebarOpen(!sidebarOpen); + setSidebarClosed(!sidebarClosed); + } + }; + const handleSidebarClickaway = () => { + if(!sidebarInit) + { + setSidebarOpen(false); + setSidebarClosed(true); + } + }; return( <> + <div onClick={handleSidebarOpen} className={`${sidebarOpen ? 'sidebarOpen' : ''} ${sidebarClosed ? 'sidebarClosed' : ''} ${sidebarInit ? 'sidebarInit' : ''} sidebar-animation flex items-center justify-center md:hidden fixed shadow-xl ml-[19rem] m-4 h-12 w-12 text-stone-50 bg-red-800 rounded-[5px] z-[5]`}> + <div className={`${sidebarClosed || sidebarInit ? '' : 'hidden'} flex items-center justify-center`}> + <Icon as={FaChevronRight}/> + </div> + <div className={`${sidebarOpen ? '' : 'hidden'} flex items-center justify-center`}> + <Icon as={FaChevronLeft}/> + </div> + </div> <div className="w-screen h-screen flex border-none"> - <div className="flex flex-col h-screen overflow-y-auto overflow-x-hidden w-72 shrink-0 bg-stone-100"> + <div className={`md:block hidden flex flex-col h-full overflow-y-auto overflow-x-hidden w-72 shrink-0 bg-stone-100`}> + </div> + <div className={`${sidebarOpen ? 'sidebarOpen' : ''} ${sidebarClosed ? 'sidebarClosed' : ''} ${sidebarInit ? 'sidebarInit' : ''} z-[5] sidebar-animation flex flex-col h-screen overflow-y-auto overflow-x-hidden w-72 shrink-0 bg-stone-100 fixed`}> <div className="flex flex-col bg-stone-800"> <div className="m-4 mb-0 flex flex-col flex-grow"> { prop.userData.name ? loggedin_element : loggedout_element } |