Merge pull request #51 from SELab-2/sidebar-header

Sidebar + header + logo's
SELab-2 · Mar 7, 2024 · 2783ace · 2783ace
2 parents 314d6b2 + 4122074
commit 2783ace
Show file tree

Hide file tree

Showing 17 changed files with 116 additions and 116 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -2,9 +2,8 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Delphi</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -10,8 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "bulma": "^0.9.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.0.1",
     "react-router-dom": "^6.22.2"
   },
   "devDependencies": {

diff --git a/frontend/public/delphi_favicon.png b/frontend/public/delphi_favicon.png
diff --git a/frontend/public/delphi_favicon_circle.png b/frontend/public/delphi_favicon_circle.png
diff --git a/frontend/public/delphi_favicon_nobg.png b/frontend/public/delphi_favicon_nobg.png
diff --git a/frontend/public/delphi_full.png b/frontend/public/delphi_full.png
diff --git a/frontend/public/delphi_full_circle.png b/frontend/public/delphi_full_circle.png
diff --git a/frontend/public/delphi_full_nobg.png b/frontend/public/delphi_full_nobg.png
diff --git a/frontend/public/vite.svg b/frontend/public/vite.svg
diff --git a/frontend/src/App.css b/frontend/src/App.css
diff --git a/frontend/src/assets/styles/mainpage.css b/frontend/src/assets/styles/mainpage.css
@@ -0,0 +1,41 @@
+.main-header {
+    width: 100vw;
+    height: 8vh;
+    background-color: #9c9afd;
+}
+
+.main-nav {
+    height: 100%;
+
+    img {
+        background-color: #5f63c8;
+        height: 100%;
+    }
+}
+
+.main-content {
+    width: 100vw;
+    height: 92vh;
+}
+
+.side-bar {
+    width: 4.15vw;
+    background-color: #6a74ce;
+
+    li {
+        height: 10vh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 5%;
+    }
+}
+
+.icon {
+    height: 50%;
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+}
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
@@ -0,0 +1,17 @@
+import {JSX} from "react";
+import {RiAccountPinBoxLine} from "react-icons/ri";
+
+export function Header(): JSX.Element {
+    return (
+        <nav className={"main-nav is-flex is-flex-direction-row is-justify-content-space-between is-align-items-center"}>
+            <img src={"/delphi_favicon_circle.png"} alt={"image"}/>
+            <p className={"is-align-self-center"}><p>Project</p></p>
+            <button className={"button mx-2 is-transparent"}>
+                <div className={"icon-text"}>
+                    <p>Username</p>
+                    <RiAccountPinBoxLine className={"icon"}/>
+                </div>
+            </button>
+        </nav>
+    )
+}
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
@@ -0,0 +1,16 @@
+import {JSX} from "react";
+import { IoHomeSharp } from "react-icons/io5";
+import { PiProjectorScreen, PiFolder } from "react-icons/pi";
+
+export function Sidebar(): JSX.Element {
+    return (
+        <aside className={"menu"}>
+            <ul className={"menu-list"}>
+                <li><a className={"is-transparent"}><IoHomeSharp size={30}/></a></li>
+                <li><a className={"is-transparent"}><PiProjectorScreen size={30}/></a></li>
+                <li><a className={"is-transparent"}><PiFolder size={30}/></a></li>
+            </ul>
+        </aside>
+    )
+}
+
diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -1,68 +1,5 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
+* {
+  padding: 0;
   margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
+  box-sizing: border-box;
+}
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
@@ -8,6 +8,8 @@ import LoginScreen from "./pages/login/LoginScreen.tsx";
 import HomeAdmin from "./pages/admin/HomeAdmin.tsx";
 import HomeStudent from "./pages/student/HomeStudent.tsx";
 import HomeTeacher from "./pages/teacher/HomeTeacher.tsx";
+import 'bulma/css/bulma.min.css';
+import './assets/styles/mainpage.css'
 
 const router = createBrowserRouter([
     {
@@ -33,7 +35,7 @@ const router = createBrowserRouter([
     }
 ]);
 ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <RouterProvider router={router}/>
-  </React.StrictMode>,
+    <React.StrictMode>
+        <RouterProvider router={router}/>
+    </React.StrictMode>,
 )
diff --git a/frontend/src/pages/student/HomeStudent.tsx b/frontend/src/pages/student/HomeStudent.tsx
@@ -1,7 +1,21 @@
 import {JSX} from "react";
+import {Header} from "../../components/Header.tsx";
+import {Sidebar} from "../../components/Sidebar.tsx";
 
 export default function HomeStudent(): JSX.Element {
     return (
-        <>Homescreen for a student</>
+        <>
+            <div className={"main-header"}>
+                <Header/>
+            </div>
+            <div className={"main-content is-flex is-flex-direction-row"}>
+                <div className={"side-bar"}>
+                    <Sidebar/>
+                </div>
+                <div>
+                    <>Homescreen for a student</>
+                </div>
+            </div>
+        </>
     )
 }