various changes

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;
+	display: block;
-	background-color: #eee;
+	/* margin-left: 100px; */
-	min-height: 300px;
+	/* 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;
 }

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,12 +46,17 @@ 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()}-->
+                <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">
@@ -64,6 +71,7 @@ class Root extends react.ReactComponentOf<RootProps,RootState> {
                         </$Route>
                     </main>
                 </div>
+            </div>
         ');
     }
 

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;
 }

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">

app/src/components/HomeContent.hx

@@ -14,9 +14,14 @@ class HomeContent extends ReactComponent {
 
     override public function render() {
         return jsx('
-            <p onClick=${yeet}>
+            <div>
-                kak
+                <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>
         ');
     }
 }

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>
+        ');
+    }
+}

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>
+        ');
+    }
+}

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,