Admin navigation update

src/components/AdminNavigation/AdminNavigation.component.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { List } from 'antd';
+import styles from './AdminNavigation.module.css';
+
+const adminNavigationData = [
+  'Manage Mentors',
+  'Manage Mentor Applications',
+  'Mentee Applications',
+  'Ongoing Mentorship Programs',
+  'Platform Settings',
+  'Manage Users',
+  'Emails',
+];
+
+const AdminNavigation: React.FC = () => {
+  return (
+    <div className={styles.antAdminNavigation}>
+      <div className={styles.antAdminNavigationSidebar}>
+        <List
+          className={styles.antAdminNavigationContent}
+          size="small"
+          dataSource={adminNavigationData}
+          renderItem={(item) => (
+            <List.Item className={styles.antAdminNavigationItem}>
+              {item}
+            </List.Item>
+          )}
+        />
+      </div>
+      <div className={styles.verticalLine}></div>
+    </div>
+  );
+};
+
+export default AdminNavigation;

src/components/AdminNavigation/AdminNavigation.module.css

@@ -0,0 +1,38 @@
+.antAdminNavigation {
+  display: flex;
+  margin: 25px 5px 25px 5px;
+  font-family: -apple-system, SanFranciscoText, sans-serif;
+  color: #32325d;
+  font-size: 43px;
+}
+
+.antAdminNavigationSidebar {
+  flex: 1;
+}
+
+.verticalLine {
+  width: 1px;
+  background-color: #d9d9d9;
+  margin: 10px 0;
+}
+
+.antAdminNavigationItem {
+  transition: background-color 0.3s, color 0.3s;
+  color: #1d1d1f;
+  font-weight: 400;
+  line-height: normal;
+  text-transform: capitalize;
+  margin-top: 8px;
+  margin-right: 8px;
+  border-bottom: none !important;
+}
+
+.antAdminNavigationItem:hover {
+  background-color: #e6f4ff;
+  cursor: pointer;
+  color: #1677ff;
+  font-weight: 400;
+  line-height: normal;
+  text-transform: capitalize;
+  border-radius: 7px;
+}

src/components/Layout/MainLayout.tsx

@@ -1,10 +1,11 @@
 import React, { type ReactNode } from 'react';
 
-import { Layout } from 'antd';
+import { Layout, Col, Row } from 'antd';
 
 import FooterComponent from './Footer/Footer';
 import styles from './MainLayout.module.css';
 import Navbar from './Navbar/Navbar';
+import AdminNavigation from '../AdminNavigation/AdminNavigation.component';
 
 const { Header, Footer, Content } = Layout;
 
@@ -17,7 +18,16 @@ const MainLayout: React.FC<LayoutProps> = ({ children }) => (
     <Header className={styles.antLayoutHeader}>
       <Navbar />
     </Header>
-    <Content className={styles.antLayoutContent}>{children}</Content>
+    <Row>
+      <Col span={5} style={{ backgroundColor: 'white' }}>
+        <Content className={styles.antLayoutContent}>
+          <AdminNavigation />
+        </Content>
+      </Col>
+      <Col span={19}>
+        <Content className={styles.antLayoutContent}>{children}</Content>
+      </Col>
+    </Row>
     <Footer className={styles.antLayoutFooter}>
       <FooterComponent />
     </Footer>