Add components, Build routing structure

@@ -15,6 +15,7 @@
         "react-dom": "^18.1.0",
         "react-router-dom": "^6.3.0",
         "react-scripts": "5.0.1",
+        "sass": "^1.51.0",
         "web-vitals": "^2.1.4"
       }
     },
@@ -8341,6 +8342,11 @@
         "url": "https://opencollective.com/immer"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz",
+      "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw=="
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -14002,6 +14008,22 @@
       "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
       "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
     },
+    "node_modules/sass": {
+      "version": "1.51.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.51.0.tgz",
+      "integrity": "sha512-haGdpTgywJTvHC2b91GSq+clTKGbtkkZmVAb82jZQN/wTy6qs8DdFm2lhEQbEwrY0QDRgSQ3xDurqM977C3noA==",
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/sass-loader": {
       "version": "12.6.0",
       "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
@@ -22228,6 +22250,11 @@
       "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.14.tgz",
       "integrity": "sha512-ubBeqQutOSLIFCUBN03jGeOS6a3DoYlSYwYJTa+gSKEZKU5redJIqkIdZ3JVv/4RZpfcXdAWH5zCNLWPRv2WDw=="
     },
+    "immutable": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz",
+      "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw=="
+    },
     "import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -26174,6 +26201,16 @@
       "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
       "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
     },
+    "sass": {
+      "version": "1.51.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.51.0.tgz",
+      "integrity": "sha512-haGdpTgywJTvHC2b91GSq+clTKGbtkkZmVAb82jZQN/wTy6qs8DdFm2lhEQbEwrY0QDRgSQ3xDurqM977C3noA==",
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      }
+    },
     "sass-loader": {
       "version": "12.6.0",
       "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",

@@ -10,6 +10,7 @@
     "react-dom": "^18.1.0",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
+    "sass": "^1.51.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

-.App {
-  text-align: center;
-}

-import { Link, Outlet } from "react-router-dom";
-import "./App.css";
+// components
+import { Outlet, useLocation } from "react-router-dom";
+import Bottombar from "./components/Bottombar";
+import Topbar from "./components/Topbar";
 
 function App() {
+  let location = useLocation();
+
+  const renderByLocation = () => {
+    if (location.pathname != "/") {
+      return <Outlet />;
+    }
+    return (
+      <div>
+        <h1>Notification</h1>
+
+        <p>temporal use when first logged in</p>
+        <p>If user wants to use notifications after moving to another page</p>
+        <p>the notification will be in settings page</p>
+      </div>
+    );
+  };
+
   return (
-    <div className="App">
-      <h1>Welcome to weather-chatbot</h1>
-      <nav
-        style={{
-          borderBottom: "solid 1px",
-          paddingBottom: "1rem",
-        }}
-      >
-        <Link to="/login">login</Link> | <Link to="/signup">signup</Link>
-        <br />
-        <Link to="/chatroom">Chatroom</Link> |{" "}
-        <Link to="/userroom">Userroom</Link>
-        <br />
-        <Link to="/settings">Settings</Link>
-      </nav>
-      <Outlet />
+    <div>
+      <Topbar />
+      {renderByLocation()}
+      <Bottombar />
     </div>
   );
 }

+import { NavLink } from "react-router-dom";
+// sytles
+import "../styles/bar.scss";
+
+function Bottombar() {
+  return (
+    <div className="bottombar">
+      <nav>
+        <NavLink to="/chatroom">Chatroom</NavLink> |{" "}
+        <NavLink to="/userroom">Userroom</NavLink>
+      </nav>
+    </div>
+  );
+}
+
+export default Bottombar;

+import { Link } from "react-router-dom";
+// styles
+import "../styles/bar.scss";
+
+function Topbar() {
+  return (
+    <div className="topbar">
+      <Link to="/chatroom">LOGO</Link>
+      <div>Search Bar</div>
+      <Link to="/settings">Settings</Link>
+    </div>
+  );
+}
+
+export default Topbar;

 import React from "react";
 import ReactDOM from "react-dom/client";
-import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
 import reportWebVitals from "./reportWebVitals";
 import App from "./App";
 // routes

+// styles
+import "../styles/chatroom.scss";
+
 function Chatroom() {
   return (
-    <div>
+    <div className="chatroom">
       <h1>Chatroom page</h1>
     </div>
   );

@@ -2,6 +2,11 @@ function Settings() {
   return (
     <div>
       <h1>Settings page</h1>
+      <div>username</div>
+      <div>email</div>
+      <div>birthday</div>
+      <br />
+      <button>notification</button>
     </div>
   );
 }

+.topbar,
+.bottombar {
+  display: flex;
+  flex-direction: row;
+}

+.chatroom {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+}