Merge branch 'IT20013950-Lakshani' into 'master'

feat: navigation and routing

See merge request !1

frontend/package.json

@@ -15,6 +15,7 @@
     "@types/react-dom": "^18.0.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.11.2",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.3",
     "web-vitals": "^3.1.0"

frontend/src/App.tsx

-import { Text, Button, Stack } from "@mantine/core";
+import { createStyles } from "@mantine/core";
 import { ThemeProvider } from "./ThemeProvider";
+import { NavbarSimpleColored } from "./Components/NavBar/NavBar";
+import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
+import Knn from "./Components/k-NN/k-NN";
+import SVM from "./Components/SVM/SVM";
+import RandomForest from "./Components/RandomForest/RandomForest";
+import LogisticRegression from "./Components/LogisticRegression/LogisticRegression";
+import Settings from "./Components/Settings/Settings";
+import Home from "./Components/Home/Home";
+
+const useStyles = createStyles((theme) => ({
+  sections: {
+    display: "flex",
+    flexDirection: "row",
+  }
+}))
 
 export default function App() {
+  const { classes } = useStyles()
   return (
     <ThemeProvider>
-      <Stack align="center" mt={50}>
-        <Text size="xl" weight={500}>
-          Welcome to Mantine!
-        </Text>
-        <Button>Click the button</Button>
-      </Stack>
+      <Router>
+        <div className={classes.sections}>
+          <NavbarSimpleColored />
+          <div style={{width: window.innerWidth/5*4}}>
+            <Routes>
+              <Route path='/' element={<Home />} />
+              <Route path='/svm' element={<SVM />} />
+              <Route path='/knn' element={<Knn />} />
+              <Route path='/rf' element={<RandomForest />} />
+              <Route path='/lr' element={<LogisticRegression />} />
+              <Route path='/settings' element={<Settings />} />
+            </Routes>
+          </div>
+        </div>
+      </Router>
     </ThemeProvider>
   );
 }

frontend/src/Components/Home/Home.tsx

+function Home() {
+  return (
+    <div>Home</div>
+  )
+}
+
+export default Home
\ No newline at end of file

frontend/src/Components/LogisticRegression/LogisticRegression.tsx

+function LogisticRegression() {
+  return (
+    <div>LogisticRegression</div>
+  )
+}
+
+export default LogisticRegression
\ No newline at end of file

frontend/src/Components/NavBar/NavBar.tsx

+import { useState } from 'react';
+import { createStyles, Navbar, Group, Code, getStylesRef, rem } from '@mantine/core';
+import { useNavigate } from "react-router-dom";
+
+import HOME_IMG from '../../assets/home-icon.png';
+import SVM_IMG from '../../assets/svm-icon.png'
+import KNN_IMG from '../../assets/knn-icon.png'
+import LR_IMG from '../../assets/lr-icon.png'
+import RF_IMG from '../../assets/rf-icon.png'
+import SETTING_IMG from '../../assets/setting-icon.png'
+import { LOGO } from '../consts';
+
+const useStyles = createStyles((theme) => ({
+  navbar: {
+    backgroundColor: theme.fn.variant({ variant: 'filled', color: theme.primaryColor }).background,
+  },
+
+  version: {
+    backgroundColor: theme.fn.lighten(
+      theme.fn.variant({ variant: 'filled', color: theme.primaryColor }).background!,
+      0.1
+    ),
+    color: theme.white,
+    fontWeight: 700,
+  },
+
+  header: {
+    paddingBottom: theme.spacing.md,
+    marginBottom: `calc(${theme.spacing.md} * 1.5)`,
+    borderBottom: `${rem(1)} solid ${theme.fn.lighten(
+      theme.fn.variant({ variant: 'filled', color: theme.primaryColor }).background!,
+      0.1
+    )}`,
+  },
+
+  footer: {
+    paddingTop: theme.spacing.md,
+    marginTop: theme.spacing.md,
+    borderTop: `${rem(1)} solid ${theme.fn.lighten(
+      theme.fn.variant({ variant: 'filled', color: theme.primaryColor }).background!,
+      0.1
+    )}`,
+  },
+
+  link: {
+    ...theme.fn.focusStyles(),
+    display: 'flex',
+    alignItems: 'center',
+    textDecoration: 'none',
+    fontSize: theme.fontSizes.sm,
+    color: theme.white,
+    padding: `${theme.spacing.xs} ${theme.spacing.sm}`,
+    borderRadius: theme.radius.sm,
+    fontWeight: 500,
+
+    '&:hover': {
+      backgroundColor: theme.fn.lighten(
+        theme.fn.variant({ variant: 'filled', color: theme.primaryColor }).background!,
+        0.1
+      ),
+    },
+  },
+
+  linkIcon: {
+    ref: getStylesRef('icon'),
+    color: theme.white,
+    // opacity: 0.75,
+    marginRight: theme.spacing.sm,
+    width: "30px",
+    height: "30px"
+  },
+
+  linkActive: {
+    '&, &:hover': {
+      backgroundColor: theme.fn.lighten(
+        theme.fn.variant({ variant: 'filled', color: theme.primaryColor }).background!,
+        0.15
+      ),
+      [`& .${getStylesRef('icon')}`]: {
+        opacity: 0.9,
+      },
+    },
+  },
+}));
+
+const data = [
+  { link: '/', label: 'Home', icon: HOME_IMG },
+  { link: '/svm', label: 'SVM', icon: SVM_IMG },
+  { link: '/knn', label: 'k-NN', icon: KNN_IMG },
+  { link: '/rf', label: 'Random Forest', icon: RF_IMG },
+  { link: '/lr', label: 'Logistic Regression', icon: LR_IMG },
+];
+
+export function NavbarSimpleColored() {
+  const { classes, cx } = useStyles();
+  const [active, setActive] = useState('Billing');
+  const navigate = useNavigate();
+
+  const links = data.map((item) => (
+    <a
+      className={cx(classes.link, { [classes.linkActive]: item.label === active })}
+      href=""
+      key={item.label}
+      onClick={(event) => {
+        event.preventDefault();
+        setActive(item.label);
+        navigate(item.link)
+      }}
+    >
+      {/* <item.icon className={classes.linkIcon} stroke={1.5} /> */}
+      <img src={item.icon} className={classes.linkIcon} />
+      <span>{item.label}</span>
+    </a>
+  ));
+
+  return (
+    <Navbar height={window.innerHeight} width={{ sm: window.innerWidth/5 }} p="md" className={classes.navbar}>
+      <Navbar.Section grow>
+        <Group className={classes.header} position="apart">
+          {/* <MantineLogo size={28} inverted /> */}
+          <img src={LOGO} className={classes.linkIcon} />
+          <Code className={classes.version}>v1.0.0</Code>
+        </Group>
+        {links}
+      </Navbar.Section>
+
+      <Navbar.Section className={classes.footer}>
+        <a href="#" className={classes.link} onClick={(event) => {
+            event.preventDefault()
+            navigate("/settings")
+        }}>
+          {/* <IconSwitchHorizontal className={classes.linkIcon} stroke={1.5} /> */}
+          <img src={SETTING_IMG} className={classes.linkIcon} />
+          <span>Settings</span>
+        </a>
+
+        {/* <a href="#" className={classes.link} onClick={(event) => event.preventDefault()}>
+          <img src={HOME_IMG} className={classes.linkIcon} />
+          <span>Logout</span>
+        </a> */}
+      </Navbar.Section>
+    </Navbar>
+  );
+}
\ No newline at end of file

frontend/src/Components/RandomForest/RandomForest.tsx

+function RandomForest() {
+  return (
+    <div>RandomForest</div>
+  )
+}
+
+export default RandomForest
\ No newline at end of file

frontend/src/Components/SVM/SVM.tsx

+function SVM() {
+  return (
+    <div>SVM</div>
+  )
+}
+
+export default SVM
\ No newline at end of file

frontend/src/Components/Settings/Settings.tsx

+function Settings() {
+  return (
+    <div>Settings</div>
+  )
+}
+
+export default Settings
\ No newline at end of file

frontend/src/Components/consts.ts

+import LOGO_IMG from '../assets/logo.png';
+
+export const LOGO = LOGO_IMG;
\ No newline at end of file

frontend/src/Components/k-NN/k-NN.tsx

+function Knn() {
+  return (
+    <div>k-NN</div>
+  )
+}
+
+export default Knn
\ No newline at end of file