various changes

app/src/App.css

@@ -47,15 +47,14 @@ main{
 	width: 100%;
 	height:100%;
 }
-
-#sidebar{
-	display: block;
-	padding: 10px;
-	//padding-left:10px;
-	width: 150px;
-	background-color: #888;
-	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

@@ -56,7 +56,7 @@ class Root extends react.ReactComponentOf<RootProps,RootState> {
                         <$Route exact="true" path="/">
                             <$Redirect to="/home" />
                         </$Route>
-                        <$Route exact="true" path="/home">
+                        <$Route path="/home">
                             <HomeContent/>
                         </$Route>
                         <$Route path="/projects">

app/src/components/Header.css

@@ -12,9 +12,6 @@ header {
 header nav a{
     margin-right: 10px;
 }
-.selected{
-    color:red;
-}
 .logo{
     font-size: 3vw;
     width:fit-content;

app/src/components/Header.hx

@@ -17,17 +17,17 @@ class Header extends ReactComponent{
                    DRIVEBY!
                 </div>
                 <nav>
-                    <$NavLink exact="true" to="/" activeClassName="selected">
+                    <$NavLink to="/home" activeClassName="selected">
-                        Home
+                        >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 {
 
@@ -15,12 +19,26 @@ class HomeContent extends ReactComponent {
     override public function render() {
         return jsx('
             <div>     
-                <h2>Welcome to DRIVEBY!</h2>
+            <$Route exact="true" path={["/home","/home/about"]}>
-                <p>
+                <div>
-                    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/>
+                    <h2>Welcome to DRIVEBY!</h2>
-                    DRIVEBY! is run and operated by Hion-V. I am comitted to bringing you best-in-class entertainment and software.<br/>
+                    <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>
+                    </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

@@ -3,6 +3,7 @@ import react.ReactMacro.jsx;
 import react.ReactComponent;
 import js.Browser;
 import Webpack.*;
+import react.router.NavLink;
 
 class SBHome extends ReactComponent {
 
@@ -15,8 +16,12 @@ class SBHome extends ReactComponent {
     override public function render() {
         return jsx('
         <ul>
-            <li>About</li>
+            <li>
-            <li>News</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

@@ -10,7 +10,7 @@ import react.router.Route;
 
 class Sidebar extends ReactComponent {
 
-    //static var STYLES = require('./HomeContent.css');
+    static var STYLES = require('./Sidebar.css');
 
     public function yeet(){
         trace(state);