diff --git a/nextstep-frontend/assets/NextStep.png b/nextstep-frontend/assets/NextStep.png
new file mode 100644
index 0000000..05e9f9f
Binary files /dev/null and b/nextstep-frontend/assets/NextStep.png differ
diff --git a/nextstep-frontend/assets/NextStepLogo.png b/nextstep-frontend/assets/NextStepLogo.png
new file mode 100644
index 0000000..4e916a6
Binary files /dev/null and b/nextstep-frontend/assets/NextStepLogo.png differ
diff --git a/nextstep-frontend/index.html b/nextstep-frontend/index.html
index 551e409..73c3e7b 100644
--- a/nextstep-frontend/index.html
+++ b/nextstep-frontend/index.html
@@ -2,7 +2,7 @@
-
+
Next Step
diff --git a/nextstep-frontend/public/NextStepLogo.png b/nextstep-frontend/public/NextStepLogo.png
new file mode 100644
index 0000000..4e916a6
Binary files /dev/null and b/nextstep-frontend/public/NextStepLogo.png differ
diff --git a/nextstep-frontend/public/index.html b/nextstep-frontend/public/index.html
new file mode 100644
index 0000000..e69de29
diff --git a/nextstep-frontend/src/App.css b/nextstep-frontend/src/App.css
index 77db3ae..bc1ef16 100644
--- a/nextstep-frontend/src/App.css
+++ b/nextstep-frontend/src/App.css
@@ -17,6 +17,7 @@
width: 100%;
margin: 0 auto;
text-align: center;
+ background-color: #f9f9f9;
}
.logo {
diff --git a/nextstep-frontend/src/App.tsx b/nextstep-frontend/src/App.tsx
index 0aa4d26..90eaef4 100644
--- a/nextstep-frontend/src/App.tsx
+++ b/nextstep-frontend/src/App.tsx
@@ -3,7 +3,7 @@ import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-d
import Login from './pages/Login';
import Register from './pages/Register';
import Profile from './pages/Profile';
-import './App.css'
+import './App.css';
import Feed from './pages/Feed';
import Footer from './components/Footer';
import RequireAuth from './hoc/RequireAuth';
@@ -11,31 +11,35 @@ import NewPost from './pages/NewPost';
import PostDetails from './pages/PostDetails';
import Chat from './pages/Chat';
import Resume from './pages/Resume';
-import TopBar from './components/TopBar';
+import LeftBar from './components/LeftBar';
import Layout from './components/Layout';
import MainDashboard from './pages/MainDashboard';
import Quiz from './pages/Quiz';
+import { Box } from '@mui/material';
const App: React.FC = () => {
return (
<>
+
+
} />
} />
} />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
} />
-
+
+
);
};
diff --git a/nextstep-frontend/src/components/Layout.css b/nextstep-frontend/src/components/Layout.css
index 2e8260b..78872b7 100644
--- a/nextstep-frontend/src/components/Layout.css
+++ b/nextstep-frontend/src/components/Layout.css
@@ -1,9 +1,10 @@
.layout-container {
+ margin-left: 100; /* push content to the right of the sidebar */
+ width: calc(100% - 100);
height: 100%;
- padding-top: 10vh;
+ padding-top: 5vh;
overflow-y: auto;
- max-width: none;
- align-content: flex-start;
+ display: flex;
flex-wrap: wrap;
justify-content: center;
-}
\ No newline at end of file
+ }
\ No newline at end of file
diff --git a/nextstep-frontend/src/components/LeftBar.tsx b/nextstep-frontend/src/components/LeftBar.tsx
new file mode 100644
index 0000000..b5f7f1a
--- /dev/null
+++ b/nextstep-frontend/src/components/LeftBar.tsx
@@ -0,0 +1,119 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Box, Drawer, List, ListItem, ListItemIcon, ListItemText, IconButton } from '@mui/material';
+import { Home, Person, Message, Logout, DocumentScannerTwoTone, Feed, Quiz, Menu, ChevronLeft } from '@mui/icons-material';
+import { getUserAuth, removeUserAuth } from "../handlers/userAuth.ts";
+import api from "../serverApi.ts";
+import logo from '../../assets/NextStep.png';
+
+const LeftBar: React.FC = () => {
+ const userAuthRef = useRef(getUserAuth());
+ const navigate = useNavigate();
+ const [collapsed, setCollapsed] = useState(false);
+
+ useEffect(() => {
+ // Automatically collapse the sidebar if the user is disconnected
+ if (!userAuthRef.current) {
+ setCollapsed(true);
+ }
+ }, [userAuthRef.current]);
+
+ const handleLogout = async () => {
+ if (userAuthRef.current) {
+ await api.post(`/auth/logout`, {
+ refreshToken: userAuthRef.current.refreshToken,
+ });
+ removeUserAuth();
+ }
+ navigate('/logout');
+ };
+
+ const toggleCollapse = () => {
+ setCollapsed(!collapsed);
+ };
+
+ return (
+
+
+ {!collapsed && (
+
+ )}
+
+ {collapsed ? : }
+
+
+
+ navigate('/main-dashboard')} sx={{ cursor: 'pointer' }}>
+
+
+
+ {!collapsed && }
+
+ navigate('/resume')} sx={{ cursor: 'pointer' }}>
+
+
+
+ {!collapsed && }
+
+ navigate('/quiz')} sx={{ cursor: 'pointer' }}>
+
+
+
+ {!collapsed && }
+
+ navigate('/feed')} sx={{ cursor: 'pointer' }}>
+
+
+
+ {!collapsed && }
+
+ navigate('/chat')} sx={{ cursor: 'pointer' }}>
+
+
+
+ {!collapsed && }
+
+ navigate('/profile')} sx={{ cursor: 'pointer' }}>
+
+
+
+ {!collapsed && }
+
+
+
+
+
+ {!collapsed && }
+
+
+
+ );
+};
+
+export default LeftBar;
\ No newline at end of file
diff --git a/nextstep-frontend/src/components/LinkedInIntegration.tsx b/nextstep-frontend/src/components/LinkedinJobs.tsx
similarity index 96%
rename from nextstep-frontend/src/components/LinkedInIntegration.tsx
rename to nextstep-frontend/src/components/LinkedinJobs.tsx
index c13e7d5..5e71a79 100644
--- a/nextstep-frontend/src/components/LinkedInIntegration.tsx
+++ b/nextstep-frontend/src/components/LinkedinJobs.tsx
@@ -12,7 +12,7 @@ interface Job {
salary?: string;
}
-interface LinkedInIntegrationProps {
+interface LinkedinJobsProps {
jobs: Job[];
loadingJobs: boolean;
fetchJobs: (settings: LinkedInSettings) => Promise;
@@ -30,7 +30,7 @@ interface LinkedInSettings {
skills: string[];
}
-const LinkedInIntegration: React.FC = ({
+const LinkedinJobs: React.FC = ({
jobs,
loadingJobs,
fetchJobs,
@@ -164,8 +164,7 @@ const LinkedInIntegration: React.FC = ({
/>
))}
- {
@@ -181,10 +180,10 @@ const LinkedInIntegration: React.FC = ({
input.value = '';
}
}}
- placeholder={settings.skills.length >= 3 ? "Reached max of 3 skills" : "Type a skill and press Enter"}
- disabled={settings.skills.length >= 3} // Disable input if 3 skills are already added
+ placeholder="Type a skill and press Enter"
sx={{ mt: 1 }}
/>
+ }
@@ -312,4 +311,4 @@ const LinkedInIntegration: React.FC = ({
);
};
-export default LinkedInIntegration;
+export default LinkedinJobs;
diff --git a/nextstep-frontend/src/components/TopBar.tsx b/nextstep-frontend/src/components/TopBar.tsx
deleted file mode 100644
index 949e3d3..0000000
--- a/nextstep-frontend/src/components/TopBar.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import React, { useRef } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { AppBar, Toolbar, IconButton, Tooltip, Box } from '@mui/material';
-import { Home, Person, Message, Logout, DocumentScannerTwoTone, Feed, Quiz } from '@mui/icons-material';
-import {getUserAuth, removeUserAuth} from "../handlers/userAuth.ts";
-import api from "../serverApi.ts";
-
-const TopBar: React.FC = () => {
- const userAuthRef = useRef(getUserAuth());
- const navigate = useNavigate();
-
- const handleLogout = async () => {
- if (userAuthRef.current) {
- await api.post(`/auth/logout`, {
- refreshToken: userAuthRef.current.refreshToken,
- });
- removeUserAuth();
- }
- navigate('/logout');
- };
-
- return (
-
-
-
- navigate('/main-dashboard')} sx={{ mx: 1 }}>
-
-
-
-
- navigate('/resume')} sx={{ mx: 1 }}>
-
-
-
-
- navigate('/quiz')} sx={{ mx: 1 }}>
-
-
-
-
- navigate('/feed')} sx={{ mx: 1 }}>
-
-
-
-
- navigate('/chat')} sx={{ mx: 1 }}>
-
-
-
-
- navigate('/profile')} sx={{ mx: 1 }}>
-
-
-
-
-
-
-
-
-
-
-
- );
-};
-
-export default TopBar;
\ No newline at end of file
diff --git a/nextstep-frontend/src/pages/MainDashboard.tsx b/nextstep-frontend/src/pages/MainDashboard.tsx
index 354e3cb..93e390a 100644
--- a/nextstep-frontend/src/pages/MainDashboard.tsx
+++ b/nextstep-frontend/src/pages/MainDashboard.tsx
@@ -25,7 +25,9 @@ import {
Person as PersonIcon,
Work as WorkIcon,
Build as BuildIcon,
- UploadFile as UploadFileIcon
+ DocumentScannerTwoTone,
+ LightbulbSharp,
+ Grading
} from '@mui/icons-material';
import {
connectToGitHub,
@@ -34,7 +36,7 @@ import {
handleGitHubOAuth
} from '../handlers/githubAuth';
import api from '../serverApi';
-import LinkedInIntegration from '../components/LinkedInIntegration';
+import LinkedinJobs from '../components/LinkedinJobs';
const roles = [
'Software Engineer', 'Frontend Developer', 'Backend Developer',
@@ -204,7 +206,7 @@ const MainDashboard: React.FC = () => {
@@ -228,7 +230,7 @@ const MainDashboard: React.FC = () => {
{/* Header */}
-
+
About Me
@@ -249,7 +251,7 @@ const MainDashboard: React.FC = () => {
{/* Desired Role */}
-
+
Desired Role
@@ -268,7 +270,7 @@ const MainDashboard: React.FC = () => {
{/* Skills */}
-
+
Skills
@@ -310,7 +312,7 @@ const MainDashboard: React.FC = () => {
{roleMatch && (
-
+
Suggested Role Match
@@ -323,7 +325,7 @@ const MainDashboard: React.FC = () => {
{resumeExperience.length > 0 && (
-
+
Experience
@@ -362,7 +364,7 @@ const MainDashboard: React.FC = () => {
}
+ startIcon={}
sx={{ my: 1 }}
onClick={handleGitHubConnect}
>
@@ -383,6 +385,7 @@ const MainDashboard: React.FC = () => {
startIcon={}
fullWidth
onClick={() => setShowAuthOptions(true)}
+ sx={{backgroundColor: 'darkslategrey'}}
>
Connect GitHub
@@ -412,7 +415,7 @@ const MainDashboard: React.FC = () => {
{/* Jobs Section */}
- {
label="Job Description"
value={jobDescription}
onChange={(e) => setJobDescription(e.target.value)}
- sx={{ mb: 2 }}
+ sx={{ mb: 2, backgroundColor: 'white' }}
/>