From 30c8d01c9e54e3123fd55a5bc2e90fcd99fe84e6 Mon Sep 17 00:00:00 2001
From: KingRainbow44 <kobedo11@gmail.com>
Date: Tue, 4 Apr 2023 21:42:24 -0400
Subject: [PATCH] Implement handbook sidebar

only works on desktops atm, mobile support is non-existant
---
 src/handbook/src/css/views/SideBar.scss       | 22 ++++++++++
 .../src/css/widgets/SideBarButton.scss        | 26 ++++++++++++
 src/handbook/src/ui/views/SideBar.tsx         | 13 +++++-
 src/handbook/src/ui/widgets/SideBarButton.tsx | 42 +++++++++++++++++++
 4 files changed, 102 insertions(+), 1 deletion(-)
 create mode 100644 src/handbook/src/css/widgets/SideBarButton.scss
 create mode 100644 src/handbook/src/ui/widgets/SideBarButton.tsx

diff --git a/src/handbook/src/css/views/SideBar.scss b/src/handbook/src/css/views/SideBar.scss
index 6143c2117..de285dd38 100644
--- a/src/handbook/src/css/views/SideBar.scss
+++ b/src/handbook/src/css/views/SideBar.scss
@@ -1,9 +1,31 @@
 .SideBar {
     display: flex;
+    flex-direction: column;
 
     height: 100%;
     width: 100%;
     max-width: 300px;
 
     background-color: var(--secondary-color);
+
+    gap: 40px;
+}
+
+.SideBar_Title {
+    margin-top: 42px;
+    line-height: 41px;
+    font-size: 34px;
+
+    max-width: 256px;
+    max-height: 128px;
+    text-align: center;
+    align-self: center;
+}
+
+.SideBar_Buttons {
+    display: flex;
+    flex-direction: column;
+
+    padding-left: 27px;
+    gap: 15px;
 }
diff --git a/src/handbook/src/css/widgets/SideBarButton.scss b/src/handbook/src/css/widgets/SideBarButton.scss
new file mode 100644
index 000000000..805ad7513
--- /dev/null
+++ b/src/handbook/src/css/widgets/SideBarButton.scss
@@ -0,0 +1,26 @@
+.SideBarButton {
+    display: flex;
+    flex-direction: row;
+
+    gap: 15px;
+
+    width: 100%;
+    height: 64px;
+    max-width: 300px;
+    max-height: 64px;
+
+    align-items: center;
+}
+
+.SideBarButton_Icon {
+    max-width: 64px;
+    max-height: 64px;
+}
+
+.SideBarButton_Label {
+    font-size: 22px;
+    line-height: 29px;
+    font-style: normal;
+
+    max-width: 220px;
+}
diff --git a/src/handbook/src/ui/views/SideBar.tsx b/src/handbook/src/ui/views/SideBar.tsx
index ae3ef5f3d..4c532a38b 100644
--- a/src/handbook/src/ui/views/SideBar.tsx
+++ b/src/handbook/src/ui/views/SideBar.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 
 import "@css/views/SideBar.scss";
+import SideBarButton from "@app/ui/widgets/SideBarButton";
 
 class SideBar extends React.Component<any, any> {
     constructor(props: any) {
@@ -10,7 +11,17 @@ class SideBar extends React.Component<any, any> {
     render() {
         return (
             <div className={"SideBar"}>
-                <p>hi!</p>
+                <h1 className={"SideBar_Title"}>The Ultimate Anime Game Handbook</h1>
+
+                <div className={"SideBar_Buttons"}>
+                    <SideBarButton name={"Commands"} anchor={"commands"} />
+                    <SideBarButton name={"Characters"} anchor={"avatars"} />
+                    <SideBarButton name={"Items"} anchor={"items"} />
+                    <SideBarButton name={"Entities"} anchor={"monsters"} />
+                    <SideBarButton name={"Scenes"} anchor={"scenes"} />
+                    <SideBarButton name={"Quests"} anchor={"quests"} />
+                    <SideBarButton name={"Achievements"} anchor={"achievements"} />
+                </div>
             </div>
         );
     }
diff --git a/src/handbook/src/ui/widgets/SideBarButton.tsx b/src/handbook/src/ui/widgets/SideBarButton.tsx
new file mode 100644
index 000000000..623d61d27
--- /dev/null
+++ b/src/handbook/src/ui/widgets/SideBarButton.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+
+import "@css/widgets/SideBarButton.scss";
+
+interface IProps {
+    name: string;
+    anchor: string;
+}
+
+class SideBarButton 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={"SideBarButton"}
+                onClick={() => this.redirect()}
+            >
+                <img
+                    className={"SideBarButton_Icon"}
+                    src={"https://dummyimage.com/128x128"}
+                    alt={this.props.name}
+                />
+
+                <p className={"SideBarButton_Label"}>{this.props.name}</p>
+            </div>
+        );
+    }
+}
+
+export default SideBarButton;