feat #559 : Build An Profile Page

index.html

@@ -10,6 +10,15 @@
       href="https://fonts.googleapis.com/css2?family=ABeeZee&family=Livvic&family=Roboto&family=Source+Code+Pro&display=swap"
       rel="stylesheet"
     />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
+    />
+
+    <link
+      href="https://unpkg.com/[email protected]/css/boxicons.min.css"
+      rel="stylesheet"
+    />
     <link rel="stylesheet" href="./preloading.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Counsellor Portal</title>

src/Pages/Profile/Profile.css

@@ -0,0 +1,259 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap");
+
+:root {
+  --light: #f6f6f9;
+  --primary: #1976d2;
+  --light-primary: #cfe8ff;
+  --grey: #eee;
+  --dark-grey: #aaaaaa;
+  --dark: #363949;
+  --danger: #d32f2f;
+  --light-danger: #fecdd3;
+  --warning: #fbc02d;
+  --light-warning: #fff2c6;
+  --success: #388e3c;
+  --light-success: #bbf7d0;
+}
+.profile-body {
+  overflow-x: hidden;
+}
+.profile-body * {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Poppins", sans-serif;
+}
+
+.profile-body .bx {
+  font-size: 1.7rem;
+}
+
+.profile-body a {
+  text-decoration: none;
+}
+.profile-body html {
+  overflow-x: hidden;
+}
+
+.profile-body body {
+  background: var(--grey);
+  overflow-x: hidden;
+}
+
+.profile-body .sidebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: var(--light);
+  width: 230px;
+  height: 100%;
+  z-index: 2000;
+  overflow-x: hidden;
+  scrollbar-width: none;
+  transition: all 0.3s ease;
+}
+
+.profile-body .sidebar::-webkit-scrollbar {
+  display: none;
+}
+
+.profile-body .sidebar.close {
+  width: 60px;
+}
+
+.profile-body .sidebar .logo {
+  font-size: 24px;
+  font-weight: 700;
+  height: 56px;
+  display: flex;
+  align-items: center;
+  color: var(--primary);
+  z-index: 500;
+  padding-bottom: 20px;
+  box-sizing: content-box;
+}
+.profile-body .logo .logo-img {
+  width: 60px;
+}
+
+.profile-body .sidebar .logo .logo-name span {
+  color: var(--dark);
+}
+
+.profile-body .sidebar .logo .bx {
+  min-width: 60px;
+  display: flex;
+  justify-content: center;
+  font-size: 2.2rem;
+}
+
+.profile-body .sidebar .side-menu {
+  width: 100%;
+}
+
+.profile-body .sidebar .side-menu li {
+  height: 48px;
+  background: transparent;
+  margin-left: 6px;
+  border-radius: 48px 0 0 48px;
+  padding: 4px;
+}
+/* 
+.sidebar .side-menu li.active {
+  background: var(--grey);
+  position: relative;
+}
+
+.sidebar .side-menu li.active::before {
+  content: "";
+  position: absolute;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  top: -40px;
+  right: 0;
+  box-shadow: 20px 20px 0 var(--grey);
+  z-index: -1;
+} */
+
+/* .sidebar .side-menu li.active::after {
+  content: "";
+  position: absolute;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  bottom: -40px;
+  right: 0;
+  box-shadow: 20px -20px 0 var(--grey);
+  z-index: -1;
+} */
+
+.profile-body .sidebar .side-menu li a {
+  width: 100%;
+  height: 100%;
+  background: var(--light);
+  display: flex;
+  align-items: center;
+  border-radius: 48px;
+  font-size: 16px;
+  color: var(--dark);
+  white-space: nowrap;
+  overflow-x: hidden;
+  transition: all 0.3s ease;
+}
+
+.profile-body .sidebar .side-menu li.active a {
+  color: var(--success);
+}
+
+.profile-body .sidebar.close .side-menu li a {
+  width: calc(48px - (4px * 2));
+  transition: all 0.3s ease;
+}
+
+.profile-body .sidebar .side-menu li a .bx {
+  min-width: calc(60px - ((4px + 6px) * 2));
+  display: flex;
+  font-size: 1.6rem;
+  justify-content: center;
+}
+
+.profile-body .sidebar .side-menu li a.logout {
+  color: var(--danger);
+}
+
+.profile-body .content {
+  position: relative;
+  background: var(--grey);
+  width: calc(100% - 230px);
+  left: 230px;
+  transition: all 0.3s ease;
+}
+
+.profile-body .sidebar.close ~ .content {
+  width: calc(100% - 60px);
+  left: 60px;
+}
+
+.profile-body .content nav {
+  height: 56px;
+  background: var(--light);
+  padding: 0 24px 0 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  grid-gap: 24px;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  width: 100%;
+}
+
+.profile-body .content nav a {
+  color: var(--dark);
+}
+
+.profile-body .content nav .bx.bx-menu {
+  cursor: pointer;
+  color: var(--dark);
+  font-size: 25px;
+  margin: 0 5px;
+}
+.profile-body .content nav .logoName {
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--primary);
+  z-index: 500;
+}
+
+.profile-body .content nav .logoName span {
+  color: var(--dark);
+}
+
+.profile-body .content nav .notif {
+  font-size: 20px;
+  position: relative;
+  margin: 0 9px;
+}
+
+.profile-body .content nav .notif .count {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  width: 20px;
+  height: 20px;
+  background: var(--danger);
+  border-radius: 50%;
+  color: var(--light);
+  border: 2px solid var(--light);
+  font-weight: 700;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.profile-body .content nav .profile .img {
+  font-size: 30px;
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+@media screen and (max-width: 768px) {
+  .profile-body .sidebar {
+    width: 200px;
+  }
+
+  .profile-body .content {
+    width: calc(100% - 60px);
+    left: 200px;
+  }
+
+  .profile-body .content nav .logoName {
+    font-size: 17px;
+  }
+
+  .profile-body .content nav .profile .img {
+    font-size: 20px;
+  }
+}

src/Pages/Profile/ProfileHeader.jsx

@@ -0,0 +1,113 @@
+import React, { useEffect, useState } from "react";
+import "./Profile.css";
+import { Link, useNavigate } from "react-router-dom";
+import { signOut } from "firebase/auth";
+import { auth } from "../../firebase/auth";
+export default function ProfileHeader({ children }) {
+  const navigate = useNavigate();
+  const [sidebarClosed, setSidebarClosed] = useState(window.innerWidth < 768);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setSidebarClosed(window.innerWidth < 768);
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  useEffect(() => {
+    const sideLinks = document.querySelectorAll(
+      ".sidebar .side-menu li a:not(.logout)"
+    );
+    const handleLinkClick = (item) => {
+      sideLinks.forEach((i) => i.parentElement.classList.remove("active"));
+      item.parentElement.classList.add("active");
+    };
+
+    sideLinks.forEach((item) => {
+      item.addEventListener("click", () => handleLinkClick(item));
+    });
+
+    return () => {
+      sideLinks.forEach((item) => {
+        item.removeEventListener("click", () => handleLinkClick(item));
+      });
+    };
+  }, []);
+
+  const toggleSidebar = () => {
+    setSidebarClosed(!sidebarClosed);
+  };
+
+  const handleSignOut = () => {
+    signOut(auth)
+      .then(() => {
+        navigate("/");
+      })
+      .catch((err) => {
+        alert(err.message);
+      });
+  };
+
+  return (
+    <>
+      <div className={`sidebar ${sidebarClosed ? "close" : ""}`}>
+        <Link to="/" className="logo">
+          {/* <img src={Logo} alt="logo" className="logo-img" /> */}
+          <i class="bx bxs-comment-dots"></i>
+          <div className="logo-name">
+            <span>Coun</span>Sellor
+          </div>
+        </Link>
+        <ul className="side-menu">
+          <li>
+            <Link to="#" className="active">
+              <i className="bx bxs-dashboard"></i>Dashboard
+            </Link>
+          </li>
+
+          <li>
+            <Link to="#">
+              <i className="bx bx-cog"></i>Settings
+            </Link>
+          </li>
+        </ul>
+        <ul className="side-menu">
+          <li onClick={handleSignOut}>
+            <Link to="#" className="logout">
+              <i className="bx bx-log-out-circle"></i>
+              Logout
+            </Link>
+          </li>
+        </ul>
+      </div>
+      <div className="content">
+        <nav>
+          <div>
+            <i className="bx bx-menu" onClick={toggleSidebar}></i>
+          </div>
+          <Link to="/">
+            <div className="logoName">
+              <span>Coun</span>Sellor
+            </div>
+          </Link>
+          <div>
+            <Link to="#" className="notif">
+              <i className="bx bx-bell"></i>
+              <span className="count">12</span>
+            </Link>
+            <Link to="#" className="profile">
+              <i class="bx bxs-user-circle img"></i>
+            </Link>
+          </div>
+        </nav>
+
+        <main>{children}</main>
+      </div>
+    </>
+  );
+}