work on rendering gamesdev

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 }