tailwind and auth tweaks

4 files changed, 68 insertions, 8 deletions

diff --git a/app/javascript/application.js b/app/javascript/application.js
index 85b9adf..d635261 100644
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
@@ -1,5 +1,5 @@
 // Entry point for the build script in your package.json
 import "@hotwired/turbo-rails"
 import "./controllers"
-import * as bootstrap from "bootstrap"
+//import * as bootstrap from "bootstrap"
 import "./components"
diff --git a/app/javascript/components/Home.jsx b/app/javascript/components/Home.jsx
index 563ec88..efe3cd5 100644
--- a/app/javascript/components/Home.jsx
+++ b/app/javascript/components/Home.jsx
@@ -2,7 +2,7 @@ import React from "react";
 import { Link } from "react-router-dom";
 
 export default () => (
-  <div className="vw-100 vh-100 primary-color d-flex align-items-center justify-content-center">
+  <div className="vh-100 primary-color d-flex align-items-center justify-content-center">
     <div className="jumbotron jumbotron-fluid bg-transparent">
       <div className="container secondary-color">
         <h1 className="display-4">Games!</h1>
diff --git a/app/javascript/components/Layout.jsx b/app/javascript/components/Layout.jsx
new file mode 100644
index 0000000..74568cd
--- /dev/null
+++ b/app/javascript/components/Layout.jsx
@@ -0,0 +1,56 @@
+import React from "react";
+import { Outlet, Link } from "react-router-dom";
+
+export default function Layout ({userData}) 
+{
+	//console.log(userData);
+	//const [userData, setUserData] = useState({ login: "" });
+	return (
+	<>
+		<div className="flex flex-row h-screen bg-slate-800 text-slate-100">
+		<nav className="flex flex-row h-full w-64 p-4 gap-4 items-center">
+			<div className="h-full flex flex-col">
+				<div>Logged in as: {userData.login}</div>
+				<div className="text-4xl py-12">Adam Malczewski</div>
+				<div className="flex flex-row justify-center w-full block grow">
+				<div className="block grow">	
+               	 <ul className="navbar-nav">
+						<li className="text-center">
+							<Link
+							to="/"
+							className="hover:text-slate-100/50 underline"
+							role="button"
+							>
+								Home
+							</Link>
+						</li>
+						<li className="text-center">
+							<Link
+							to="/blogs"
+							className="hover:text-slate-100/50 underline"
+							role="button"
+							>
+								Blog
+							</Link>
+						</li>
+						<li className="text-center">
+							<Link
+							to="/games"
+							className="hover:text-slate-100/50 underline"
+							role="button"
+							>
+								Games
+							</Link>
+						</li>
+					</ul>
+				</div>
+			</div>
+			</div>
+			<div className="h-3/4 w-0.5 bg-slate-500 block rounded-full">
+			</div>
+		</nav>
+	<Outlet />
+		</div>
+</>
+	)
+};
diff --git a/app/javascript/routes/index.jsx b/app/javascript/routes/index.jsx
index be928fc..bc5d541 100644
--- a/app/javascript/routes/index.jsx
+++ b/app/javascript/routes/index.jsx
@@ -1,26 +1,30 @@
 import React, { useState, useEffect } from "react";
-import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
 import Home from "../components/Home";
 import Blogs from "../components/Blogs";
+import Layout from "../components/Layout";
 
 export default function index()
 {
 	const [userData, setUserData] = useState({ login: "" });
 	const url = "/api/v1/auth/data";
-	fetch(url).then((response) => {
+	useEffect(() => {
+		fetch(url).then((response) => {
 		if(response.ok) {
 			return response.json();
 		}
 		throw new Error("Network response was not ok.");
-	}).then((response) => setUserData(response));
+	}).then((response) => setUserData(response));}, []);
 		// get user data here
 		// then pass it in as 'props' into the components
 	return (<>
-	    <h1>{userData.login}</h1>
+		{/*<h1>{userData.login}</h1>*/}
 		<Router>
 			<Routes>
-				<Route path="/" element = {<Home />} />
-				<Route path="/blogs" element={<Blogs />} />
+				<Route path="/" element = {<Layout userData={userData}/>}>
+					<Route index element={<Home />} />
+					<Route path="/blogs" element={<Blogs />} />
+				</Route>
 			</Routes>
 		</Router>
 	</>);