feat: add sidebar and routes

package.json

@@ -15,6 +15,7 @@
     "archiver": "^5.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.10.0",
     "react-scripts": "5.0.1",
     "typescript": "^4.4.2",
     "web-vitals": "^2.1.0"

src/App.tsx

@@ -1,12 +1,24 @@
 import React from 'react';
 import { NewPrez } from './components/NewPrez';
 import './assets/css/App.css';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { SideBar } from './components/SideBar';
+import { Home } from './components/Home';
+import { Presentation } from './components/Presentation';
 
 function App() {
   return (
-    <div
-      style={{ backgroundColor: '#3A3939', width: '100%', height: '100%' }}
-    ></div>
+    <div style={{ backgroundColor: '#3A3939', width: '100%', height: '100%' }}>
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" Component={SideBar}>
+            <Route path="/" Component={Home}></Route>
+            <Route path="/add" Component={NewPrez}></Route>
+            <Route path="/prez" Component={Presentation}></Route>
+          </Route>
+        </Routes>
+      </BrowserRouter>
+    </div>
   );
 }
 

src/components/ButtonAddFile.css → src/assets/css/ButtonAddFile.css

@@ -15,7 +15,7 @@
     text-align: center;
     width: 40px;
     height: 40px;
-    padding-top: 5px;
+    padding-left: 8px;
     border:none;
     background-color: var(--light-grey);
     border-radius: 10px;

src/assets/css/Home.css

@@ -0,0 +1,30 @@
+.home {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+    width: 100%;
+}
+
+.buttons > button {
+    width:300px;
+    justify-content: center;
+}
+
+.buttons>.go-to-add-button{
+    margin-top:1em;
+    color:var(--white);
+    border-color: var(--white);
+}
+
+.buttons>.go-to-prez-button{
+    color:var(--black-grey);
+    border-color: var(--black-grey);
+    background-color: var(--pink);
+}
+
+.buttons>.go-to-prez-button:hover{
+    background-color: var(--black-grey);
+    color: var(--pink);
+    border-color: var(--pink);
+}

src/components/NewPrez.css → src/assets/css/NewPrez.css

@@ -1,9 +1,11 @@
 .new-prez {
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    justify-content: space-around;
+    align-items: center;
     color: white;
-    margin:100px;
+    padding: 3em 1em;
+    padding-bottom: 0;
 }
 
 .principal-infos {

src/assets/css/SideBar.css

@@ -0,0 +1,62 @@
+.page {
+    display:flex;
+    height: 100vh;
+    /* max-height:100vh; */
+}
+.sidebar {
+    min-width:250px;
+    height:100%;
+    background-color:var(--pink);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap:1em;
+}
+
+button{
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width:200px;
+    padding: 10px 10px;
+    background: none;
+    border: solid var(--black-grey) 1px;
+    border-radius: 10px;
+}
+button:hover{
+    color:var(--white);
+    background-color: var(--black-grey);
+}
+
+.logo {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    color: var(--black-grey);
+    font-weight: 900;
+    font-size: x-large;
+}
+
+.divider {
+    /* height: 1px; */
+    border: solid var(--black-grey) 0.5px;
+    width:80%;
+    margin: 1em;
+}
+
+@media screen and (max-width: 992px) {
+    .page{
+        flex-direction: column;
+
+    }
+    .sidebar {
+        min-width:250px;
+        height:auto;
+        background-color:var(--pink);
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap:1em;
+    }
+}

src/components/ButtonAddFile.tsx

@@ -1,5 +1,5 @@
 import { FC, MouseEventHandler } from 'react';
-import './ButtonAddFile.css';
+import '../assets/css/ButtonAddFile.css';
 interface ButtonAddFileProps {
   title: string;
   action: MouseEventHandler;

src/components/Home.tsx

@@ -0,0 +1,16 @@
+import HomeLogo from '../assets/home_design.svg';
+import { NavigationButton } from './NavigationButton';
+import '../assets/css/Home.css';
+
+export const Home = () => {
+  return (
+    <div className="home">
+      <h1>Bienvenue sur CodePrez</h1>
+      <img src={HomeLogo} alt="" />
+      <div className="buttons">
+        <NavigationButton goTo="prez" />
+        <NavigationButton goTo="add" />
+      </div>
+    </div>
+  );
+};

src/components/NavigationButton.tsx

@@ -0,0 +1,40 @@
+import React, { FC } from 'react';
+import { useNavigate } from 'react-router-dom';
+interface NavigationButtonProp {
+  goTo: 'prez' | 'add';
+  withIcon?: boolean;
+}
+
+export const NavigationButton: FC<NavigationButtonProp> = ({
+  goTo,
+  withIcon,
+}) => {
+  const navigate = useNavigate();
+  const createCodePrez = () => {
+    navigate('/add');
+  };
+
+  const launchPresentation = () => {
+    navigate('/prez');
+  };
+  if (goTo === 'prez') {
+    return (
+      <button onClick={launchPresentation} className="go-to-prez-button">
+        Ouvrir une présentation
+        {withIcon && (
+          <span className="material-symbols-outlined">play_arrow</span>
+        )}
+      </button>
+    );
+  } else if (goTo === 'add') {
+    return (
+      <button onClick={createCodePrez} className="go-to-add-button">
+        Nouvelle présentation
+        {withIcon && (
+          <span className="material-symbols-outlined">add_circle</span>
+        )}
+      </button>
+    );
+  }
+  return <></>;
+};

src/components/NewPrez.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import React from 'react';
-import './NewPrez.css';
+import '../assets/css/NewPrez.css';
 import { ButtonAddFile } from './ButtonAddFile';
 
 export const NewPrez = () => {

src/components/Presentation.tsx

@@ -0,0 +1,9 @@
+//TODO: display slides !
+
+export const Presentation = () => {
+  return (
+    <div>
+      <h1>Presentation</h1>
+    </div>
+  );
+};

src/components/SideBar.tsx

@@ -0,0 +1,29 @@
+import { Outlet, useNavigate } from 'react-router-dom';
+import '../assets/css/SideBar.css';
+import CodePrezLogo from '../assets/logo.svg';
+import { NavigationButton } from './NavigationButton';
+export const SideBar = () => {
+  const navigate = useNavigate();
+
+  const home = () => {
+    navigate('/');
+  };
+  return (
+    <div className="page">
+      <div className="sidebar">
+        <link
+          rel="stylesheet"
+          href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
+        />
+        <div className="logo" onClick={home}>
+          <img src={CodePrezLogo} alt="" width="50" />
+          <p>CodePrez</p>
+        </div>
+        <NavigationButton goTo="add" withIcon />
+        <NavigationButton goTo="prez" withIcon />
+        <div className="divider" />
+      </div>
+      <Outlet></Outlet>
+    </div>
+  );
+};

yarn.lock

@@ -1594,6 +1594,11 @@
     schema-utils "^3.0.0"
     source-map "^0.7.3"
 
+"@remix-run/router@1.5.0":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.5.0.tgz#57618e57942a5f0131374a9fdb0167e25a117fdc"
+  integrity sha512-bkUDCp8o1MvFO+qxkODcbhSqRa6P2GXgrGZVpt0dCXNW2HCSCqYI0ZoAqEOSAjRWmmlKcYgFvN4B4S+zo/f8kg==
+
 "@rollup/plugin-babel@^5.2.0":
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283"
@@ -7920,6 +7925,21 @@ react-refresh@^0.11.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
   integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
 
+react-router-dom@^6.10.0:
+  version "6.10.0"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.10.0.tgz#090ddc5c84dc41b583ce08468c4007c84245f61f"
+  integrity sha512-E5dfxRPuXKJqzwSe/qGcqdwa18QiWC6f3H3cWXM24qj4N0/beCIf/CWTipop2xm7mR0RCS99NnaqPNjHtrAzCg==
+  dependencies:
+    "@remix-run/router" "1.5.0"
+    react-router "6.10.0"
+
+react-router@6.10.0:
+  version "6.10.0"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.10.0.tgz#230f824fde9dd0270781b5cb497912de32c0a971"
+  integrity sha512-Nrg0BWpQqrC3ZFFkyewrflCud9dio9ME3ojHCF/WLsprJVzkq3q3UeEhMCAW1dobjeGbWgjNn/PVF6m46ANxXQ==
+  dependencies:
+    "@remix-run/router" "1.5.0"
+
 react-scripts@5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-5.0.1.tgz#6285dbd65a8ba6e49ca8d651ce30645a6d980003"