Introduce how to page and introduction video to the system (#35)

Author: umutozdemir

frontend/public/how-to.mp4

@@ -32,7 +32,8 @@ function App() {
                         <div className="main-content">
                             <Routes>
                                 <Route path="/" element={<Dashboard onLogout={handleLogout} />} />
-                                <Route path="/adminView" element={<Dashboard onLogout={handleLogout} view="admin" />} />
+                                <Route path="/admin-panel" element={<Dashboard onLogout={handleLogout} view="admin" />} />
+                                <Route path="/how-to" element={<Dashboard onLogout={handleLogout} view="how-to" />} />
                             </Routes>
                         </div>
                     </>

frontend/src/App.js

@@ -25,6 +25,7 @@ import DefectConfig from '../defectConfig/DefectConfig';
 import Sidebar from "../sidebar/Sidebar";
 import AdminView from '../adminView/AdminView';
 import logo from '../../logo.svg';
+import HowTo from "../howTo/HowTo";
 
 function Copyright(props) {
     return (
@@ -183,7 +184,10 @@ export default function Dashboard({ view, onLogout }) {
                     <Toolbar />
                     <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
                         {view === 'admin' ? (
-                            <AdminView />) : (
+                            <AdminView />
+                        ) : view === 'how-to' ? (
+                            <HowTo />
+                        ) : (
 
                             <><Grid container spacing={3}>
                                 {/* Chart */}

frontend/src/components/dashboard/Dashboard.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export default function HowTo ()  {
+    return (
+        <div>
+            <h2>How To</h2>
+            <video width="100%" controls>
+                <source src="how-to.mp4" type="video/mp4" />
+                Your browser does not support the video tag.
+            </video>
+        </div>
+    );
+};

frontend/src/components/howTo/HowTo.js

@@ -23,7 +23,7 @@ export default function Sidebar ({ isAdmin })  {
                 <ListItemText primary="Admin Panel" />
             </ListItemButton>
         )}
-        <ListItemButton>
+        <ListItemButton component={RouterLink} to={'/how-to'}>
             <ListItemIcon>
                 <SlideshowIcon />
             </ListItemIcon>