adjust style for the left side bar

Author: Combo819

public/images/pilot-logo-data-platform.svg

@@ -6,21 +6,22 @@
 }
 
 .side-bar {
-  display: flex;
-  flex-direction: column;
-  width: 15vw;
+  width: 228px;
   height: 100vh;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 2px 5px rgba(0, 0, 0, 0.2);
+  background-color: #103454;
+  color: #f0f0f0;
+  padding-left: 31px;
+  background-image: url("./side-bar-background.svg");
+  background-repeat: no-repeat;
+  background-position: right bottom;
+  background-size: auto 377px;
 }
 
 .side-bar-header {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
   padding: 10px;
   color: whitesmoke;
-  background-color: #2d383a;
-  border-bottom: 5px solid crimson;
+  margin-top: 50px;
 }
 
 .side-bar-header {
@@ -32,6 +33,11 @@
 
 .side-bar-body {
   padding-left: 10px;
+  margin-top: 91px;
+  .title {
+    font-size: 20px;
+    margin: 0;
+  }
 }
 
 #api-data {
@@ -40,14 +46,23 @@
 }
 
 .api-link {
-  margin-top: 10px;
-  font-size: 12pt;
-  transition: all 0.1s ease;
-  padding-left: 10px;
-}
-
-.api-link:hover {
-  cursor: pointer;
-  border-left: 5px solid crimson;
-  transition: all 0.1s ease;
+  font-size: 14px;
+  margin-top: 12px;
+  padding-left: 20px;
+  position: relative;
+  span {
+    cursor: pointer;
+    transition: font-weight 0.3s ease-in-out;
+    &:hover {
+      font-weight: 600;
+    }
+  }
+  .indicator {
+    width: 12.5px;
+    height: 17px;
+    background-color: white;
+    display: inline-block; 
+    position: absolute;
+    left: 0;
+  }
 }

src/App.scss

@@ -4,8 +4,7 @@ import SwaggerUI from "swagger-ui-react";
 import "swagger-ui-react/swagger-ui.css";
 import { RedocStandalone } from "redoc";
 import "./App.scss";
-import logo from "./pilot_logo.png";
-import auth from "./swagger/auth.json"
+import auth from "./swagger/auth.json";
 import bff from "./swagger/bff";
 import bff_cli from "./swagger/bff_cli.json";
 import dataset from "./swagger/dataset.json";
@@ -23,39 +22,61 @@ const specs = {
   upload: upload,
 };
 
+const options = [
+  {
+    title: "Auth",
+    key: "auth",
+  },
+  {
+    title: "BFF Web",
+    key: "bff",
+  },
+  {
+    title: "BFF CLI",
+    key: "bff_cli",
+  },
+  {
+    title: "Dataset",
+    key: "dataset",
+  },
+  {
+    title: "HPC",
+    key: "hpc",
+  },
+  {
+    title: "Metadata",
+    key: "metadata",
+  },
+  {
+    title: "Upload",
+    key: "upload",
+  },
+];
+
 const App = () => {
   const [key, setKey] = useState("bff");
 
   return (
     <div class="App">
       <div className="side-bar">
         <div className="side-bar-header">
-          <img src={logo} alt="Logo" style={{ width: "100px" }} />
-          <h3>Pilot Data Platform</h3>
+          <img
+            src={"api-docs/images/pilot-logo-data-platform.svg"}
+            alt="Logo"
+            style={{ width: "130px" }}
+          />
         </div>
         <div className="side-bar-body">
-          <h3>API DOCS</h3>
-          <div className="api-link" onClick={() => setKey("auth")}>
-            Auth
-          </div>
-          <div className="api-link" onClick={() => setKey("bff")}>
-            BFF Web
-          </div>
-          <div className="api-link" onClick={() => setKey("bff_cli")}>
-            BFF CLI
-          </div>
-          <div className="api-link" onClick={() => setKey("dataset")}>
-            Dataset
-          </div>
-          <div className="api-link" onClick={() => setKey("hpc")}>
-            HPC
-          </div>
-          <div className="api-link" onClick={() => setKey("metadata")}>
-            Metadata
-          </div>
-          <div className="api-link" onClick={() => setKey("upload")}>
-            Upload
-          </div>
+          <h3 className="title">
+            {" "}
+            <span>API DOCS</span>{" "}
+          </h3>
+          {options.map((option) => (
+            <div className="api-link" key={option.key}>
+              {key === option.key && <div className="indicator"></div>}
+              <span onClick={() => setKey(option.key)}>{option.title}</span>
+            </div>
+          ))}
         </div>
       </div>
       <div id="api-data">