Implement settings

src/App.tsx

@@ -62,16 +62,16 @@ export default function App() {
           <NavbarButton>About</NavbarButton>
           {userIDStorageHandler.userIDValue ? (
             <>
+              <NavbarButton>BlogEditor</NavbarButton>
+              <NavbarButton>Settings</NavbarButton>
+              <NavbarButton>Logout</NavbarButton>
               <NavbarUserInfo
                 userID={userIDStorageHandler.userIDValue}
               ></NavbarUserInfo>
-              <NavbarButton>Logout</NavbarButton>
             </>
           ) : (
             <NavbarButton>Login</NavbarButton>
           )}
-          <NavbarButton>Settings</NavbarButton>
-          <NavbarButton>BlogEditor</NavbarButton>
         </Navbar>
         <div id="page">
           <Routes>

src/components/SettingButton.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+interface Props {
+  settingName: string;
+  currentSettingHook: object;
+}
+
+export default function SettingButton({
+  settingName,
+  currentSettingHook,
+}: Props) {
+  function onSettingButtonClicked() {
+    currentSettingHook.setCurrentSetting(settingName);
+  }
+
+  return (
+    <>
+      <button onClick={onSettingButtonClicked}>{settingName}</button>
+    </>
+  );
+}

src/components/TilingItem.tsx

@@ -10,11 +10,11 @@ export default function Navbar({ children, titlebarName }: Props) {
     <>
       <div className="standardTilingBox">
         {titlebarName ? (
-          <div className="standardTilingTitlebar">
+          <div className="standardTilingBoxTitlebar">
             <p>{titlebarName}</p>
           </div>
         ) : null}
-        {children}
+        <div className="standardTilingBoxContents">{children}</div>
       </div>
     </>
   );

src/index.css

@@ -18,7 +18,9 @@ body,
   --blog-card-height: 20rem;
   --border-radii: 5px;
   --blog-card-image-radius: 1px;
+  --tiling-box-titlebar-height: 20px;
   --tiling-gap: 10px;
+  --tiling-box-padding: 10px;
 }
 
 h1 {
@@ -59,8 +61,8 @@ a {
 
 .standardHorizontalTilingGrid {
   display: grid;
-  width: 100%;
+  width: calc(100% - var(--tiling-gap) * 2);
-  height: 100%;
+  height: calc(100% - var(--tiling-gap) * 2);
   max-width: calc(100% - var(--tiling-gap) * 2);
   max-height: calc(100% - var(--tiling-gap) * 2);
   gap: var(--tiling-gap);
@@ -70,8 +72,8 @@ a {
 
 .standardVerticalTilingGrid {
   display: grid;
-  width: 100%;
+  width: calc(100% - var(--tiling-gap) * 2);
-  height: 100%;
+  height: calc(100% - var(--tiling-gap) * 2);
   max-width: calc(100% - var(--tiling-gap) * 2);
   max-height: calc(100% - var(--tiling-gap) * 2);
   gap: var(--tiling-gap);
@@ -85,12 +87,33 @@ a {
   max-width: 100%;
   max-height: 100%;
   overflow-x: hidden;
-  overflow-y: scroll;
+  /* overflow-y: scroll; */
   border-radius: var(--border-radii);
   background: white;
 }
 
-.standardTilingTitlebar {
+.standardTilingBoxContents {
+  width: calc(100% - var(--tiling-box-padding) * 2);
+  height: calc(100% - var(--tiling-box-padding) * 2);
+  max-width: calc(100% - var(--tiling-box-padding) * 2);
+  max-height: calc(100% - var(--tiling-box-padding) * 2);
+  padding: var(--tiling-box-padding);
+}
+
+.standardTilingBoxContents p {
+  margin: 0px;
+  padding: 0px;
+}
+
+.standardTilingBoxContents hr {
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-bottom: 0px;
+  margin-top: 0px;
+  padding: 0px;
+}
+
+.standardTilingBoxTitlebar {
   height: 20px;
   width: 100%;
   max-height: 20px;
@@ -99,12 +122,43 @@ a {
   background: black;
 }
 
-.standardTilingTitlebar > p {
+.standardTilingBoxTitlebar > p {
   margin: 0px;
   padding: 0px;
   color: white;
 }
 
+.userSettings {
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  display: flex;
+  flex-direction: row;
+}
+
+.userSettingsList {
+  display: flex;
+  overflow-y: scroll;
+  flex-direction: column;
+  padding-right: var(--tiling-box-padding);
+}
+
+.userSettingsList ul {
+  display: flex;
+  flex-direction: column;
+  padding: 0px;
+  margin: 0px;
+}
+
+.userSettingsList button {
+  text-align: left;
+}
+
+.currentSetting {
+  padding-left: var(--tiling-box-padding);
+}
+
 .blogEntryGrid {
   display: grid;
   gap: 20px;

src/pages/BlogEditor.tsx

@@ -15,7 +15,9 @@ export default function Home() {
     <>
       <div className="standardHorizontalTilingGrid">
         <TilingItem titlebarName="testing"></TilingItem>
-        <TilingItem></TilingItem>
+        <TilingItem>
+          <p>Testing</p>
+        </TilingItem>
       </div>
     </>
   );

src/pages/Settings.tsx

@@ -3,8 +3,31 @@ import { Navigate } from "react-router-dom";
 import { authTokenStorageHandlerInit } from "../components/storageHandler.ts";
 
 import TilingItem from "../components/TilingItem.tsx";
+import SettingButton from "../components/SettingButton.tsx";
+import AccountSetting from "./settings/Account.tsx";
+import SecuritySetting from "./settings/Security.tsx";
+import NotFoundSetting from "./settings/NotFound.tsx";
+
+function renderCurrentSetting(setting: string) {
+  switch (setting) {
+    case "Account":
+      return <AccountSetting></AccountSetting>;
+    case "Security":
+      return <SecuritySetting></SecuritySetting>;
+    default:
+      return <NotFoundSetting></NotFoundSetting>;
+  }
+}
 
 export default function Home() {
+  const settings = ["Account", "Security"];
+  const [currentSetting, setCurrentSetting] = React.useState(settings[0]);
+  /* Make object to pass by reference */
+  const currentSettingHook = {
+    currentSetting,
+    setCurrentSetting,
+  };
+
   const authTokenStorageHandler = authTokenStorageHandlerInit();
 
   if (!authTokenStorageHandler.authTokenValue) {
@@ -14,7 +37,26 @@ export default function Home() {
   return (
     <>
       <div className="standardHorizontalTilingGrid">
-        <TilingItem></TilingItem>
+        <TilingItem>
+          <div className="userSettings">
+            <div className="userSettingsList">
+              <p>USER SETTINGS</p>
+              <ul>
+                {settings.map((value, index) => (
+                  <SettingButton
+                    settingName={value}
+                    currentSettingHook={currentSettingHook}
+                    key={index}
+                  ></SettingButton>
+                ))}
+              </ul>
+            </div>
+            <hr></hr>
+            <div className="currentSetting">
+              {renderCurrentSetting(currentSetting)}
+            </div>
+          </div>
+        </TilingItem>
       </div>
     </>
   );

src/pages/settings/Account.tsx

@@ -0,0 +1,11 @@
+import * as React from "react";
+
+export default function AccountSetting() {
+  return (
+    <>
+      <h1>Account</h1>
+      <hr></hr>
+      <p>Now on account!</p>
+    </>
+  );
+}

src/pages/settings/NotFound.tsx

@@ -0,0 +1,11 @@
+import * as React from "react";
+
+export default function NotFoundSetting() {
+  return (
+    <>
+      <h1>Error!</h1>
+      <hr></hr>
+      <p>Settings page requested not found.</p>
+    </>
+  );
+}

src/pages/settings/Security.tsx

@@ -0,0 +1,11 @@
+import * as React from "react";
+
+export default function SecuritySetting() {
+  return (
+    <>
+      <h1>Security</h1>
+      <hr></hr>
+      <p>Now on security!</p>
+    </>
+  );
+}