Admin Home Page

frontend/src/components/AdminHome/AdminHome.css

+/* General layout */
+.admin-page {
+  display: flex;
+  flex-direction: column;
+  height: 100vh; /* Full height of the viewport */
+}
+
+/* Navbar styles */
+.navbar {
+  width: 100%;
+  background: linear-gradient(to right, red, orange);
+  height: 60px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* Navbar links styles */
+.navbar-links a {
+  margin: 0 80px; /* Increase margin to space out links more */
+  color: white;
+  text-decoration: none;
+  font-size: 20px;
+  position: relative;
+  transition: color 0.3s;
+}
+
+
+/* Hover effect */
+.navbar-links a:hover {
+  color: rgb(13, 28, 84); /* Changes text color on hover */
+}
+
+/* Optional: Add underline on hover */
+.navbar-links a::after {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 2px;
+  left: 0;
+  bottom: -5px;
+  background-color: rgb(0, 47, 255); /* Underline color */
+  transition: width 0.3s;
+}
+
+.navbar-links a:hover::after {
+  width: 100%; /* Expands underline on hover */
+}
+
+
+/* Main content wrapper */
+.main-content {
+  display: flex;
+  flex-grow: 1; /* Take up the remaining height below the navbar */
+  height: calc(100% - 60px); /* Full height minus navbar */
+}
+
+/* Sidebar styles */
+.sidebar {
+  background-color: rgb(68, 68, 72);
+  color: white;
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  transition: width 0.3s;
+}
+
+.sidebar.open {
+  width: 200px;
+}
+
+.sidebar.closed {
+  width: 50px;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.sidebar-toggle {
+  background-color: transparent;
+  border: none;
+  color: white;
+  font-size: 18px;
+  cursor: pointer;
+  margin-bottom: 20px;
+}
+
+/* Sidebar menu styles */
+.sidebar-menu {
+  list-style: none;
+  padding: 0;
+  
+  
+}
+
+.sidebar-menu li {
+  margin: 15px 0;
+  
+  
+  
+}
+
+.sidebar-menu a {
+  text-decoration: none;
+  color: white; /* Default text color */
+  font-size: 18px;
+  display: block;
+  padding: 10px;
+  transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effects */
+
+}
+
+/* Hover effect for sidebar links */
+.sidebar-menu a:hover {
+  color: rgb(13, 23, 59); /* Changes text color on hover */
+  background-color: #b1a4a4; /* Darker background on hover (optional) */
+}
+
+/* adjust side bar */
+.sidebar-menu li a {
+  color: white;
+  text-decoration: none;
+  font-size: 20px;
+}
+
+/* Content area */
+.content {
+  flex-grow: 1;
+  padding: 20px;
+  background-color: #f4f4f4;
+}
+
+.content h1 {
+  font-size: 28px;
+  margin-bottom: 20px;
+}
+
+/* Dashboard layout */
+.dashboard {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20px;
+}
+
+.dashboard-item {
+  background-color: white;
+  border: 2px solid #ddd;
+  padding: 20px;
+  font-size: 20px;
+  text-align: center;
+  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  transition: background-color 0.3s, box-shadow 0.3s;
+}
+
+.dashboard-item:hover {
+  background-color: #f0f0f0;
+  box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+input[type="file"] {
+  display: block;
+  margin: 10px auto;
+  cursor: pointer;
+
+}

frontend/src/components/AdminHome/AdminHome.js

+import React, { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import "./AdminHome.css";
+
+function Homer() {
+  const [isSidebarOpen, setSidebarOpen] = useState(true);
+
+  const toggleSidebar = () => {
+    setSidebarOpen(!isSidebarOpen);
+  };
+
+  return (
+    <div className="admin-page">
+      {/* Navbar */}
+      <nav className="navbar">
+        <div className="navbar-links">
+          <a href="#">Home</a>
+          <a href="#">Browse</a>
+          <a href="#">Search</a>
+          <a href="#">Messages</a>
+        </div>
+      </nav>
+
+      {/* Main content wrapper */}
+      <div className="main-content">
+        {/* Sidebar */}
+        <div className={`sidebar ${isSidebarOpen ? "open" : "closed"}`}>
+          <button className="sidebar-toggle" onClick={toggleSidebar}>
+            {isSidebarOpen ? "←" : "→"}
+          </button>
+          {isSidebarOpen && (
+            <ul className="sidebar-menu">
+              <li><a href="#">Account Settings</a></li>
+              <li><a href="#">Privacy Policy</a></li>
+              <li><a href="#">More...</a></li>
+            </ul>
+          )}
+        </div>
+
+        {/* Dashboard area */}
+        <div className="content">
+          <h1>Welcome to Admin Page</h1>
+          <div className="dashboard">
+            <div className="dashboard-item" onClick={() => console.log("Viewing Users")}>
+              <span>View Users</span>
+            </div>
+            <div className="dashboard-item" onClick={() => console.log("Editing Users")}>
+              <span>Edit Users</span>
+            </div>
+            <div className="dashboard-item" onClick={() => console.log("Deleting Users")}>
+              <span>Delete Users</span>
+            </div>
+            <div className="dashboard-item">
+              <input type="file" onChange={() => console.log("CSV Uploaded")} />
+              <span>Upload CSV</span>
+            </div>
+            <div className="dashboard-item" onClick={() => console.log("Tracking Page Visits")}>
+              <span>Track Application Activity</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Homer;