add sidebar

1 files changed, 27 insertions, 2 deletions

diff --git a/react-frontend/src/components/Layout.tsx b/react-frontend/src/components/Layout.tsx
index 9221687..8b87634 100644
--- a/react-frontend/src/components/Layout.tsx
+++ b/react-frontend/src/components/Layout.tsx
@@ -1,11 +1,36 @@
 import { Outlet } from "react-router-dom";
+import { IconButton, Button, ButtonGroup } from 'rsuite';
+import { Icon } from '@rsuite/icons';
+import { FaUser } from "react-icons/fa6";
+import { FaGamepad } from "react-icons/fa";
+import { GiCowboyHolster } from "react-icons/gi";
+import { GrAdd } from "react-icons/gr";
 
 export default function Layout()
 {
 	return(
 		<>
-			<div>sidebar</div>
-			<Outlet/>
+			<div className="w-screen h-screen flex border-none">
+				<div className="flex flex-col h-screen overflow-y-auto overflow-x-hidden w-72 bg-stone-100">
+					<div className="flex flex-col bg-stone-800">
+					<div className="m-4 mb-0 flex flex-col flex-grow">
+						{/*<IconButton appearance="primary" color="green" icon={<Icon as={FaUser}/>}>Log In</IconButton>*/}
+						<ButtonGroup className="flex">
+							<Button appearance="ghost" style={{width:"100%"}}>Account</Button>
+							<Button appearance="subtle" style={{paddingLeft:"1.4em", paddingRight:"1.4em"}}>Log Out</Button>
+						</ButtonGroup>
+					</div>
+					</div>
+					<div className="border-green-500 p-2 mb-2 text-red-700 bg-stone-800 rounded-b-xl"><Icon as={GiCowboyHolster} style={{width:"100%", height:"100%"}}/></div>
+					<div className="flex flex-col px-4 gap-2">
+						<IconButton appearance="subtle" size="lg" icon={<Icon as={FaGamepad}/>}>Browse Games</IconButton>
+						<IconButton appearance="subtle" size="lg" icon={<Icon as={GrAdd}/>}>Upload Game</IconButton>
+					</div>
+				</div>
+				<div className="w-full">
+					<Outlet/>
+				</div>
+			</div>
 		</>
 	);
 }