various changes

app/src/App.css

@@ -1,15 +1,60 @@
-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%;
+}
+ul{
+	align-self: left;
+}
+
+a, a:visited, a:hover {
+    /* text-decoration: none; */
+    color: inherit;
+}
+a.selected, a.selected:visited{
+	color:red;
 }

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

app/src/components/Header.css

@@ -1,14 +1,18 @@
 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;
 }
-.selected{
-    color:red;
-}
 .logo{
     font-size: 3vw;
+    width:fit-content;
 }

app/src/components/Header.hx

@@ -14,20 +14,20 @@ class Header extends ReactComponent{
         return jsx('
             <header>
                 <div className="logo">
-                    subsonics
+                   DRIVEBY!
                 </div>
                 <nav>
-                    <$NavLink exact="true" to="/" activeClassName="selected">
-                        Home
+                    <$NavLink to="/home" activeClassName="selected">
+                        >Home
                     </NavLink>
                     <$NavLink to="/links" activeClassName="selected">
-                        Links
+                        >Links
                     </NavLink>
                     <$NavLink to="/projects" activeClassName="selected">
-                        Projects
+                        >Projects
                     </NavLink>
                     <$NavLink to="/gameservers" activeClassName="selected">
-                        Game Servers
+                        >Game Servers
                     </NavLink>
                 </nav>
             </header>

app/src/components/HomeContent.hx

@@ -3,6 +3,10 @@ import react.ReactMacro.jsx;
 import react.ReactComponent;
 import js.Browser;
 import Webpack.*;
+import react.router.ReactRouter;
+import react.router.Route.RouteRenderProps;
+import react.router.Route;
+import components.blog.Overview;
 
 class HomeContent extends ReactComponent {
 
@@ -14,9 +18,28 @@ class HomeContent extends ReactComponent {
 
     override public function render() {
         return jsx('
-            <p onClick=${yeet}>
-                kak
-            </p>
+            <div>     
+            <$Route exact="true" path={["/home","/home/about"]}>
+                <div>
+                    <h2>Welcome to DRIVEBY!</h2>
+                    <p>
+                        DRIVEBY! is the home of my personal projects. This includes but is not limited to:<br/>
+                        - Gamedev<br/>
+                        - Software<br/>
+                        - Music<br/>
+                        - Art<br/>
+                        DRIVEBY! is run and operated by Hion-V. I am comitted to bringing you best-in-class entertainment and software.<br/>
+
+                    </p>
+                </div>
+            </$Route>
+            <$Route exact="true" path={["/home","/home/news"]}>
+                <div>
+                    <h2>News</h2>
+                    <$Overview/>
+                </div>
+            </$Route>
+            </div>
         ');
     }
 }

app/src/components/blog/Overview.hx

@@ -0,0 +1,36 @@
+package components.blog;
+import react.ReactMacro.jsx;
+import react.ReactComponent;
+import js.Browser;
+import Webpack.*;
+import react.router.NavLink;
+
+class Overview extends ReactComponent {
+
+    //static var STYLES = require('./HomeContent.css');
+
+    public function yeet(){
+        trace(state);
+    }
+
+    public static var items:Array<String> = [
+        'yeetus',
+        'deletus'
+    ];
+    private static function printList(){
+        var result = [];
+        for (item in items){
+            result.push(jsx('<li>$item</li>'));
+        }
+        return result;
+    }
+
+    override public function render() {
+        var _print = printList();
+        return jsx('
+        <ul>
+            ${_print}
+        </ul>
+        ');
+    }
+}

app/src/components/sidebar/SBHome.hx

@@ -0,0 +1,28 @@
+package components.sidebar;
+import react.ReactMacro.jsx;
+import react.ReactComponent;
+import js.Browser;
+import Webpack.*;
+import react.router.NavLink;
+
+class SBHome extends ReactComponent {
+
+    //static var STYLES = require('./HomeContent.css');
+
+    public function yeet(){
+        trace(state);
+    }
+
+    override public function render() {
+        return jsx('
+        <ul>
+            <li>
+                <$NavLink to="/home/about" activeClassName="selected">About</$NavLink>
+            </li>
+            <li>
+                <$NavLink to="/home/news" activeClassName="selected">News</$NavLink>
+            </li>
+        </ul>
+        ');
+    }
+}

app/src/components/sidebar/Sidebar.css

@@ -0,0 +1,13 @@
+#sidebar{
+	display: block;
+	padding: 10px;
+	//padding-left:10px;
+	width: 150px;
+	background-color: #888;
+	height:100%
+}
+#sidebar ul, #sidebar li{
+    padding: 0;
+    margin: 0;
+    list-style-type: none;
+}

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('./Sidebar.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,