From 3dc674485c9473ce58e6db609f8b833ec99c9f60 Mon Sep 17 00:00:00 2001
From: Andreas Schaafsma <and.schaafsma@gmail.com>
Date: Fri, 28 Jan 2022 10:31:34 +0000
Subject: [PATCH] various changes

---
 app/src/App.css                       | 58 ++++++++++++++++++++++++---
 app/src/Root.hx                       | 40 ++++++++++--------
 app/src/components/Header.css         |  9 ++++-
 app/src/components/Header.hx          |  2 +-
 app/src/components/HomeContent.hx     | 11 +++--
 app/src/components/sidebar/SBHome.hx  | 23 +++++++++++
 app/src/components/sidebar/Sidebar.hx | 40 ++++++++++++++++++
 app/webpack.config.js                 |  2 +-
 8 files changed, 157 insertions(+), 28 deletions(-)
 create mode 100644 app/src/components/sidebar/SBHome.hx
 create mode 100644 app/src/components/sidebar/Sidebar.hx

diff --git a/app/src/App.css b/app/src/App.css
index 34e8286..6c95381 100644
--- a/app/src/App.css
+++ b/app/src/App.css
@@ -1,15 +1,61 @@
-body {
-    font-family: Arial;
-	margin: 0;
+*{
+	/* margin: 0; */
+	/* padding: 0; */
 }
 
+html, body, #pagewrapper, #root{
+	height: 100vh;
+	margin: 0 0 0 0;
+	padding: 0 0 0 0;
+	overflow: auto;
+}
+
+
+.flex-column{
+	display: flex;
+	flex-direction: column;
+}
+.flex-row{
+	display: flex;
+	flex-direction: row;
+}
+
+#flex{
+	display: flex;
+	height:100%;
+}
+
+
+body {
+    font-family: 'Terminus', sans-serif;
+	background-color: #000;
+}
+
+
 h1 {
 	/* margin: 10px; */
 }
 
 main{
-	margin: 20px;
-	background-color: #eee;
-	min-height: 300px;
+	display: block;
+	/* margin-left: 100px; */
+	/* margin-right:100px; */
+	background-color: #333;
+	color: lime;
+	box-sizing: border-box;
 	padding: 10px;
+	width: 100%;
+	height:100%;
+}
+
+#sidebar{
+	display: block;
+	padding: 10px;
+	//padding-left:10px;
+	width: 150px;
+	background-color: #888;
+	height:100%
+}
+ul{
+	align-self: left;
 }
\ No newline at end of file
diff --git a/app/src/Root.hx b/app/src/Root.hx
index 55d652b..ec165c7 100644
--- a/app/src/Root.hx
+++ b/app/src/Root.hx
@@ -2,12 +2,14 @@ import com.Foo;
 import com.Foo2;
 import components.Header;
 import components.HomeContent;
+import components.sidebar.Sidebar;
 import react.ReactMacro.jsx;
 import react.ReactComponent;
 import react.React.CreateElementType;
 import react.router.ReactRouter;
 import react.router.Route.RouteRenderProps;
 import react.router.Route;
+import react.router.Redirect;
 
 
 private typedef RootState = {
@@ -44,25 +46,31 @@ class Root extends react.ReactComponentOf<RootProps,RootState> {
 
     override function render() {
         return jsx('
-            <div>
+            <div id="pagewrapper" class="flex-column">
                 <Header/>
                 <!--Current path is ${props.location.pathname} and component is ${state.route}-->
                 <!--${renderContent()}-->
-                <main>
-                    <$Route exact="true" path="/">
-                        <HomeContent/>
-                    </$Route>
-                    <$Route path="/projects">
-                        <h1>Projects</h1>
-                    </$Route>
-                    <$Route path="/links">
-                        <h1>Links</h1>
-                    </$Route>
-                    <$Route path="/gameservers">
-                        <h1>Game Servers</h1>
-                        <p></p>
-                    </$Route>
-                </main>
+                <div id="flex" class="flex-row">
+                    <$Sidebar/>
+                    <main>
+                        <$Route exact="true" path="/">
+                            <$Redirect to="/home" />
+                        </$Route>
+                        <$Route exact="true" path="/home">
+                            <HomeContent/>
+                        </$Route>
+                        <$Route path="/projects">
+                            <h1>Projects</h1>
+                        </$Route>
+                        <$Route path="/links">
+                            <h1>Links</h1>
+                        </$Route>
+                        <$Route path="/gameservers">
+                            <h1>Game Servers</h1>
+                            <p></p>
+                        </$Route>
+                    </main>
+                </div>
             </div>
         ');
     }
diff --git a/app/src/components/Header.css b/app/src/components/Header.css
index 7aa6bb5..60ac5d8 100644
--- a/app/src/components/Header.css
+++ b/app/src/components/Header.css
@@ -1,7 +1,13 @@
 header {
-    margin: 10px;
+    box-sizing: border-box;
+    /* width:fit-content; */
+    width:100%;
+    /* margin: 10px; */
     padding: 10px;
     background: #eee;
+    /* color: white; */
+    /* margin-left: auto;
+    margin-right: auto; */
 }
 header nav a{
     margin-right: 10px;
@@ -11,4 +17,5 @@ header nav a{
 }
 .logo{
     font-size: 3vw;
+    width:fit-content;
 }
\ No newline at end of file
diff --git a/app/src/components/Header.hx b/app/src/components/Header.hx
index 1306143..f27910c 100644
--- a/app/src/components/Header.hx
+++ b/app/src/components/Header.hx
@@ -14,7 +14,7 @@ class Header extends ReactComponent{
         return jsx('
             <header>
                 <div className="logo">
-                    subsonics
+                   DRIVEBY!
                 </div>
                 <nav>
                     <$NavLink exact="true" to="/" activeClassName="selected">
diff --git a/app/src/components/HomeContent.hx b/app/src/components/HomeContent.hx
index 9363fc6..5d6e1f0 100644
--- a/app/src/components/HomeContent.hx
+++ b/app/src/components/HomeContent.hx
@@ -14,9 +14,14 @@ class HomeContent extends ReactComponent {
 
     override public function render() {
         return jsx('
-            <p onClick=${yeet}>
-                kak
-            </p>
+            <div>
+                <h2>Welcome to DRIVEBY!</h2>
+                <p>
+                    DRIVEBY! is many things to many people. It is a community, a software distributor, a game studio and a place for my personal projects.<br/>
+                    DRIVEBY! is run and operated by Hion-V. I am comitted to bringing you best-in-class entertainment and software.<br/>
+
+                </p>
+            </div>
         ');
     }
 }
\ No newline at end of file
diff --git a/app/src/components/sidebar/SBHome.hx b/app/src/components/sidebar/SBHome.hx
new file mode 100644
index 0000000..bbcd8df
--- /dev/null
+++ b/app/src/components/sidebar/SBHome.hx
@@ -0,0 +1,23 @@
+package components.sidebar;
+import react.ReactMacro.jsx;
+import react.ReactComponent;
+import js.Browser;
+import Webpack.*;
+
+class SBHome extends ReactComponent {
+
+    //static var STYLES = require('./HomeContent.css');
+
+    public function yeet(){
+        trace(state);
+    }
+
+    override public function render() {
+        return jsx('
+        <ul>
+            <li>About</li>
+            <li>News</li>
+        </ul>
+        ');
+    }
+}
\ No newline at end of file
diff --git a/app/src/components/sidebar/Sidebar.hx b/app/src/components/sidebar/Sidebar.hx
new file mode 100644
index 0000000..b367eab
--- /dev/null
+++ b/app/src/components/sidebar/Sidebar.hx
@@ -0,0 +1,40 @@
+package components.sidebar;
+import react.ReactMacro.jsx;
+import react.ReactComponent;
+import js.Browser;
+import Webpack.*;
+import components.sidebar.SBHome;
+import react.router.ReactRouter;
+import react.router.Route.RouteRenderProps;
+import react.router.Route;
+
+class Sidebar extends ReactComponent {
+
+    //static var STYLES = require('./HomeContent.css');
+
+    public function yeet(){
+        trace(state);
+    }
+
+    override public function render() {
+        return jsx('
+            <div id="sidebar">
+                <$Route path={["/home"]} component={SBHome}>
+                    
+                </$Route>
+                <$Route path="/projects">
+                    
+                </$Route>
+                <$Route path="/links">
+                    
+                </$Route>
+                <$Route path="/gameservers">
+                    Tes3MP<br/>
+                    Minecraft<br/>
+                    CS:GO<br/>
+                    Source Arena<br/>
+                </$Route>
+            </div>
+        ');
+    }
+}
diff --git a/app/webpack.config.js b/app/webpack.config.js
index 092f1b4..55af98a 100644
--- a/app/webpack.config.js
+++ b/app/webpack.config.js
@@ -111,7 +111,7 @@ module.exports = {
 
         // Like generating the HTML page with links the generated JS files
         new HtmlWebpackPlugin({
-            title: 'Webpack + Haxe example'
+            title: 'DRIVEBY!'
         })
         // You may want to also:
         // - finer control of minify/uglify process using UglifyJSPlugin,