Merge pull request #2 from hykilpikonna/navigation

frontend/src/components/NavBar.tsx

@@ -0,0 +1,41 @@
+// NavBar.tsx
+import React, { useState, useEffect } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { NavItem } from '../components/NavItem'; // adjust the path as needed
+
+export default function NavBar() {
+    const navigate = useNavigate();
+    const location = useLocation();
+    const [selected, setSelected] = useState(location.pathname);
+
+    useEffect(() => {
+        navigate(selected);
+    }, [selected]);
+
+    const handleItemClick = (path: any) => {
+        setSelected(path);
+    }
+
+    const navItems = [
+        { icon: "mdi:book", label: "Courses", path: "/courses" },
+        { icon: "mdi:earth", label: "Collab Learning", path: "/collab-learning" },
+        { icon: "mdi:clipboard-text-clock", label: "Review", path: "/review" },
+        { icon: "mdi:microphone-message", label: "Speaking", path: "/speaking" },
+        { icon: "mdi:account", label: "Profile", path: "/profile" },
+    ];
+
+    return (
+        <nav className='navbar' >
+            {navItems.map(item => (
+                <NavItem 
+                    key={item.path}
+                    icon={item.icon} 
+                    label={item.label} 
+                    path={item.path} 
+                    selected={selected} 
+                    handleItemClick={handleItemClick} 
+                />
+            ))}
+        </nav>
+    )
+}

frontend/src/components/NavItem.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Icon } from '@iconify/react';
+
+interface NavItemProps {
+    icon: string;
+    label: string;
+    path: string;
+    selected: string;
+    handleItemClick: (path: string) => void;
+}
+
+export const NavItem: React.FC<NavItemProps> = ({ icon, label, path, selected, handleItemClick }) => (
+    <div className={`navbar-item ${selected === path ? 'active' : ''}`}
+        onClick={() => handleItemClick(path)}>
+        <Icon icon={icon} />
+        <span>{label}</span>
+    </div>
+);

frontend/src/index.sass

@@ -3,7 +3,7 @@
 @tailwind utilities
 
 $c-default-text: #222
-
+$c-default-icon: #888
 $c-blue: rgb(28, 176, 246)
 $c-blue-shadow: rgb(24, 153, 214)
 $c-green: rgb(88, 204, 2)
@@ -104,3 +104,32 @@ h1
 
 .page-pad
   padding: 2em 1em
+
+.navbar
+  position: fixed
+  bottom: 0
+  left: 0
+  width: 100%
+  border-top: solid $c-white-shadow
+  border-width: 2px 0 0
+  display: flex
+  justify-content: space-around
+  padding: 10px
+  color: $c-default-icon
+
+.navbar-item
+  text-decoration: none
+  transition: color 0.3s ease
+  display: flex
+  align-items: center
+  flex-direction: column
+
+  svg
+    width: 24px
+    height: 24px
+
+  span
+    font-size: 12px
+
+  &.active
+    color: $c-green

frontend/src/index.tsx

@@ -7,6 +7,10 @@ import Welcome from "./pages/Welcome";
 import Login from "./pages/Login";
 import Signup from "./pages/Signup";
 import Course from "./pages/Course";
+import Profile from "./pages/Profile";
+import CollabLearning from './pages/CollabLearning';
+import Review from './pages/Review';
+import Speaking from './pages/Speaking';
 
 const router = createBrowserRouter([
   {
@@ -24,7 +28,23 @@ const router = createBrowserRouter([
   {
     path: '/courses',
     element: <Course/>,
-  }
+  },
+  {
+    path: '/collab-learning',
+    element: <CollabLearning/>
+  },
+  {
+    path: '/review',
+    element: <Review/>
+  },
+  {
+    path: '/speaking',
+    element: <Speaking/>
+  },
+  {
+    path: '/profile',
+    element: <Profile/>
+  },
 ])
 
 const root = ReactDOM.createRoot(

frontend/src/pages/CollabLearning.tsx

@@ -0,0 +1,14 @@
+import NavBar from "../components/NavBar"
+
+export default function CollabLearning() {
+
+    return (
+        <div className="flex flex-col h-screen">
+            <div className="flex flex-col flex-1">
+                <h1>Collaborative Learning Page</h1>
+            </div>
+            <NavBar />
+        </div>
+    )
+
+}

frontend/src/pages/Course.tsx

@@ -1,7 +1,14 @@
-export default function Login() {
+import NavBar from "../components/NavBar"
+
+export default function Course() {
 
     return (
-        <h1>Course</h1>
+        <div className="flex flex-col h-screen">
+            <div className="flex flex-col flex-1">
+                <h1>Course Page</h1>
+            </div>
+            <NavBar />
+        </div>
     )
 
 }

frontend/src/pages/Profile.tsx

@@ -0,0 +1,14 @@
+import NavBar from "../components/NavBar"
+
+export default function Profile() {
+
+    return (
+        <div className="flex flex-col h-screen">
+            <div className="flex flex-col flex-1">
+                <h1>Profile Page</h1>
+            </div>
+            <NavBar />
+        </div>
+    )
+
+}

frontend/src/pages/Review.tsx

@@ -0,0 +1,14 @@
+import NavBar from "../components/NavBar"
+
+export default function Review() {
+
+    return (
+        <div className="flex flex-col h-screen">
+            <div className="flex flex-col flex-1">
+                <h1>Review Page</h1>
+            </div>
+            <NavBar />
+        </div>
+    )
+
+}

frontend/src/pages/Speaking.tsx

@@ -0,0 +1,14 @@
+import NavBar from "../components/NavBar"
+
+export default function Speaking() {
+
+    return (
+        <div className="flex flex-col h-screen">
+            <div className="flex flex-col flex-1">
+                <h1>Speaking Page</h1>
+            </div>
+            <NavBar />
+        </div>
+    )
+
+}