Add spot to input game UID

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

@@ -29,3 +29,39 @@
     padding-left: 27px;
     gap: 15px;
 }
+
+.SideBar_Enter {
+    display: flex;
+
+    width: 100%;
+    height: 100%;
+    max-width: 250px;
+    max-height: 50px;
+    margin-bottom: 24px;
+
+    box-sizing: border-box;
+    align-self: center;
+    align-items: center;
+    border-radius: 10px;
+
+    background-color: var(--background-color);
+}
+
+.SideBar_Input {
+    background-color: transparent;
+    border: none;
+
+    color: var(--text-primary-color);
+    font-size: 20px;
+    width: 100%;
+    padding: 11px;
+
+    &:focus, &:active {
+        outline: none;
+    }
+}
+
+.SideBar_Input::placeholder {
+    color: var(--text-secondary-color);
+    opacity: 1;
+}

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ChangeEvent } from "react";
 
 import SideBarButton from "@app/ui/widgets/SideBarButton";
 
@@ -6,9 +6,31 @@ import { navigate } from "@app/backend/events";
 
 import "@css/views/SideBar.scss";
 
-class SideBar extends React.Component<any, any> {
+interface IState {
-    constructor(props: any) {
+    uid: string | null;
+}
+
+class SideBar extends React.Component<{}, IState> {
+    constructor(props: {}) {
         super(props);
+
+        this.state = {
+            uid: null
+        };
+    }
+
+    /**
+     * Invoked when the UID input changes.
+     *
+     * @param event The event.
+     * @private
+     */
+    private onChange(event: ChangeEvent<HTMLInputElement>): void {
+        const input = event.target.value;
+        const uid = input == "" ? null : input;
+        if (uid && uid.length > 10) return;
+
+        this.setState({ uid });
     }
 
     render() {
@@ -18,14 +40,31 @@ class SideBar extends React.Component<any, any> {
                     The Ultimate Anime Game Handbook
                 </h1>
 
-                <div className={"SideBar_Buttons"}>
+                <div style={{
-                    <SideBarButton name={"Commands"} anchor={"Commands"} />
+                    display: "flex",
-                    <SideBarButton name={"Characters"} anchor={"Avatars"} />
+                    flexDirection: "column",
-                    <SideBarButton name={"Items"} anchor={"Items"} />
+                    justifyContent: "space-between",
-                    <SideBarButton name={"Entities"} anchor={"Home"} />
+                    height: "100%"
-                    <SideBarButton name={"Scenes"} anchor={"Home"} />
+                }}>
-                    <SideBarButton name={"Quests"} anchor={"Home"} />
+                    <div className={"SideBar_Buttons"}>
-                    <SideBarButton name={"Achievements"} anchor={"Home"} />
+                        <SideBarButton name={"Commands"} anchor={"Commands"} />
+                        <SideBarButton name={"Characters"} anchor={"Avatars"} />
+                        <SideBarButton name={"Items"} anchor={"Items"} />
+                        <SideBarButton name={"Entities"} anchor={"Home"} />
+                        <SideBarButton name={"Scenes"} anchor={"Home"} />
+                        <SideBarButton name={"Quests"} anchor={"Home"} />
+                        <SideBarButton name={"Achievements"} anchor={"Home"} />
+                    </div>
+
+                    <div className={"SideBar_Enter"}>
+                        <input
+                            type={"text"}
+                            className={"SideBar_Input"}
+                            placeholder={"Enter UID..."}
+                            value={this.state.uid ?? undefined}
+                            onChange={this.onChange.bind(this)}
+                        />
+                    </div>
                 </div>
             </div>
         );