Add basis of the content panel

- Home buttons
- Implement sidebar
- Add home title

src/handbook/src/css/App.scss

@@ -0,0 +1,41 @@
+html {
+    --background-color: #346b77;
+    --secondary-color: #418493;
+
+    --text-primary-color: #FFFFFF;
+
+    overflow: hidden;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    height: 100vh;
+    width: 100%;
+    overflow: hidden;
+
+    #root {
+        height: 100%;
+        width: 100%;
+    }
+
+    * {
+        font-family: 'SDK_SC_Web', 'SDK_JP_Web', 'Poppins', sans-serif;
+    }
+
+    svg:focus {
+        outline: none;
+    }
+}
+
+.App {
+    display: flex;
+    flex-direction: row;
+
+    width: 100%;
+    height: 100%;
+
+    div {
+        display: flex;
+    }
+}

src/handbook/src/css/Text.scss

@@ -0,0 +1,28 @@
+p {
+    color: var(--text-primary-color);
+    margin: 0;
+}
+
+h1 {
+    color: var(--text-primary-color);
+    font-style: normal;
+    font-weight: normal;
+    font-size: 48px;
+    margin: 0;
+}
+
+h2 {
+    color: var(--text-primary-color);
+    font-style: normal;
+    font-weight: 600;
+    font-size: 24px;
+    margin: 0;
+}
+
+h3 {
+    color: var(--text-primary-color);
+    font-style: normal;
+    font-weight: 600;
+    font-size: 18px;
+    margin: 0;
+}

src/handbook/src/css/views/Content.scss

@@ -0,0 +1,32 @@
+.Content {
+    display: flex;
+    height: 100%;
+    width: 100%;
+
+    background-color: var(--background-color);
+}
+
+.Content_Top {
+    display: flex;
+    width: 100%;
+
+    flex-direction: column;
+    align-items: center;
+}
+
+.Content_Title {
+    margin-top: 31px;
+    margin-bottom: 39px;
+}
+
+.Content_Buttons {
+    width: 100%;
+    height: 40%;
+
+    max-width: 1376px;
+    max-height: 256px;
+}
+
+.Content_Bottom {
+
+}

src/handbook/src/css/views/SideBar.scss

@@ -0,0 +1,9 @@
+.SideBar {
+    display: flex;
+
+    height: 100%;
+    width: 100%;
+    max-width: 300px;
+
+    background-color: var(--secondary-color);
+}

src/handbook/src/css/widgets/HomeButton.scss

@@ -0,0 +1,27 @@
+.HomeButton {
+    display: flex;
+    flex-direction: column;
+
+    width: 100%;
+    height: 100%;
+    max-width: 256px;
+    max-height: 256px;
+
+    background-color: var(--secondary-color);
+
+    align-items: center;
+    justify-content: center;
+    gap: 20px;
+}
+
+.HomeButton_Icon {
+    max-width: 128px;
+    max-height: 128px;
+}
+
+.HomeButton_Label {
+    font-size: 34px;
+    line-height: 44px;
+    text-align: center;
+    font-style: normal;
+}

src/handbook/src/ui/App.tsx

@@ -1,5 +1,14 @@
 import React from "react";
 
+import SideBar from "@views/SideBar";
+import Content from "@views/Content";
+
+import "@css/App.scss";
+import "@css/Text.scss";
+
+// Based on the design at: https://www.figma.com/file/PDeAVDkTDF5vvUGGdaIZ39/GM-Handbook.
+// Currently designed by: Magix.
+
 class App extends React.Component<any, any> {
     constructor(props: any) {
         super(props);
@@ -7,8 +16,9 @@ class App extends React.Component<any, any> {
 
     render() {
         return (
-            <div>
+            <div className={"App"}>
-                <h1>Hello World!</h1>
+                <SideBar />
+                <Content />
             </div>
         );
     }

src/handbook/src/ui/views/Content.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+import "@css/views/Content.scss";
+import HomeButton from "@app/ui/widgets/HomeButton";
+
+class Content extends React.Component<any, any> {
+    constructor(props: any) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <div className={"Content"}>
+                <div className={"Content_Top"}>
+                    <h1 className={"Content_Title"}>Welcome Back Traveler!</h1>
+
+                    <div className={"Content_Buttons"}>
+                        <HomeButton name={"Commands"} anchor={"commands"} />
+                    </div>
+                </div>
+
+                <div className={"Content_Bottom"}>
+
+                </div>
+            </div>
+        );
+    }
+}
+
+export default Content;

src/handbook/src/ui/views/SideBar.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+import "@css/views/SideBar.scss";
+
+class SideBar extends React.Component<any, any> {
+    constructor(props: any) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <div className={"SideBar"}>
+                <p>hi!</p>
+            </div>
+        );
+    }
+}
+
+export default SideBar;

src/handbook/src/ui/widgets/HomeButton.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+
+import "@css/widgets/HomeButton.scss";
+
+interface IProps {
+    name: string;
+    anchor: string;
+}
+
+class HomeButton extends React.PureComponent<IProps> {
+    constructor(props: IProps) {
+        super(props);
+    }
+
+    /**
+     * Redirects the user to the specified anchor.
+     * @private
+     */
+    private redirect(): void {
+        // TODO: Implement navigator system.
+        window.location.href = `/${this.props.anchor}`;
+    }
+
+    render() {
+        return (
+            <div
+                className={"HomeButton"}
+                onClick={() => this.redirect()}
+            >
+                <img
+                    className={"HomeButton_Icon"}
+                    src={"https://dummyimage.com/128x128"}
+                    alt={this.props.name}
+                />
+
+                <p className={"HomeButton_Label"}>{this.props.name}</p>
+            </div>
+        );
+    }
+}
+
+export default HomeButton;

src/handbook/tsconfig.json

@@ -21,7 +21,9 @@
       "@app/*": ["src/*"],
       "@backend/*": ["src/backend/*"],
       "@css/*": ["src/css/*"],
-      "@components/*": ["src/ui/*"]
+      "@components/*": ["src/ui/*"],
+      "@icons/*": ["src/icons/*"],
+      "@views/*": ["src/ui/views/*"]
     }
   },
   "include": ["src"],