Give a new look to sidebar

src/components/Post/CommentDialogBox.jsx

@@ -80,7 +80,7 @@ const CommentDialogBox = ({
                       <img
                         src={userComment.content.avatar}
                         alt="profile picture"
-                        className="profile-picture"
+                        className="post-profile-picture"
                       />
                     ) : (
                       <AccountCircleIcon className="icon" />

src/components/Post/index.css

@@ -274,7 +274,7 @@
   align-items: center;
 }
 
-.profile-picture {
+.post-profile-picture {
   height: 30px;
   width: 30px;
   border-radius: 100%;

src/components/SideBar/index.css

@@ -22,6 +22,33 @@
   display: none;
 }
 
+.sidebar_design {
+  padding: 0;
+  display: flex;
+  width: fit-content;
+}
+
+.sidebar_design > span {
+  width: 10px;
+  height: 10px;
+  display: inline-block;
+  border-radius: 50%;
+  margin-left: 5px;
+}
+
+.sidebar_menu_icon {
+  position: absolute;
+  top: -10px;
+  right: -10px;
+  border-radius: 50%;
+  padding: 5px;
+  color: var(--text-secondary);
+}
+
+.sidebar_menu_icon:hover {
+  background: var(--sidebar-link-hover);
+}
+
 .sidebar-links {
   display: flex;
   flex-direction: column;
@@ -47,7 +74,6 @@
 }
 
 .sidebar-links li:hover {
-  /* background: rgba(0, 0, 0, 0.05); */
   background-color: #5f85db;
 }
 
@@ -59,6 +85,33 @@
   text-decoration: none;
 }
 
+#sidebar_profile_link:hover {
+  background: transparent;
+}
+
+.sidebar_profile {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  position: relative;
+}
+
+.profile-picture {
+  width: 80px;
+  height: 80px;
+  transition: 0.2s ease-in-out;
+  border-radius: 50%;
+  border: 1px solid #eee;
+  box-shadow: 1px 1px 3px #bcbbbb, -1px -1px 3px #bcbbbb;
+}
+
+.sidebar_user_name {
+  opacity: 0.9;
+  color: var(--text-grey);
+  margin-top: 5px;
+}
+
 .sidebar .icon {
   font-size: 30px;
   transition: all 0.2s ease;
@@ -72,21 +125,14 @@
   margin-left: 15px;
 }
 
-.sidebar .profile-picture {
-  height: 30px;
-  width: 30px;
-  border-radius: 100%;
-  border: 1px solid #eee;
-}
-
 .sidebar_user_dropdown {
   display: flex;
 }
 
 .sidebar_user_dropdown_container {
   position: absolute;
-  top: 250px;
-  left: 100px;
+  top: 41px;
+  left: 200px;
   padding: 0;
   border-radius: 10px;
   width: 170px;
@@ -194,9 +240,22 @@ footer {
     display: none;
   }
 
+  .sidebar_user_name {
+    display: none;
+  }
+
+  .profile-picture {
+    width: 30px;
+    height: 30px;
+  }
+
   .sidebar_user_dropdown_container {
     width: 150px;
-    left: 40px;
+    left: 50px;
+  }
+
+  #sidebar_profile_link:hover {
+    background-color: #5f85db;
   }
 
   .sidebar_user_dropdown_sub_container > li {
@@ -217,20 +276,23 @@ footer {
     padding-block: 5px;
     bottom: 0;
     margin: 0;
-    z-index: 999;
   }
 
   .sidebar hr {
     display: none;
   }
 
+  .sidebar_design {
+    display: none;
+  }
+
   #sidebar-home-link {
     margin-top: auto;
   }
 
   .sidebar-links {
     justify-content: space-around;
-    flex-direction: row;
+    flex-direction: row-reverse;
     height: 60px;
   }
 
@@ -240,7 +302,7 @@ footer {
 
   .sidebar_user_dropdown_container {
     left: initial;
-    top: -120px;
+    top: -140px;
     right: 5px;
   }
 

src/components/SideBar/index.jsx

@@ -17,8 +17,10 @@ import HomeIcon from "@mui/icons-material/Home";
 import ImgUpload from "../ImgUpload";
 import LogoutIcon from "@mui/icons-material/Logout";
 import Modal from "@mui/material/Modal";
+import MoreVertIcon from "@mui/icons-material/MoreVert";
 import NotificationsIcon from "@mui/icons-material/Notifications";
 import SettingsIcon from "@mui/icons-material/Settings";
+import blankImg from "../../assets/blank-profile.webp";
 import { useSnackbar } from "notistack";
 
 const Footer = React.lazy(() => import("./Footer"));
@@ -39,14 +41,16 @@ function SideBar() {
     username: "",
   });
 
+  const windowWidth = window.innerWidth;
+
   useEffect(() => {
     async function getUsername() {
       try {
-        const docRef = db.collection("users", user?.uid);
+        const docRef = db.collection("users").doc(user?.uid);
         const docSnap = await docRef.get();
 
-        if (docSnap.docs[0].exists) {
-          const data = docSnap.docs[0].data();
+        if (docSnap.exists) {
+          const data = docSnap.data();
           setUserData({
             name: data?.displayName || auth.currentUser?.displayName,
             username: data?.username || auth.currentUser?.uid,
@@ -89,6 +93,44 @@ function SideBar() {
     <div className="sidebar">
       <div className="sidebar-container">
         <ul className="sidebar-links">
+          <div className="sidebar_design">
+            <span style={{ backgroundColor: "red" }}></span>
+            <span style={{ backgroundColor: "orange" }}></span>
+            <span style={{ backgroundColor: "rgb(30, 222, 30)" }}></span>
+          </div>
+          <li
+            className={
+              windowWidth < 1200 &&
+              location.pathname.includes("/dummygram/user")
+                ? "activeTab"
+                : ""
+            }
+            style={{
+              cursor: windowWidth > 1200 ? "default" : "pointer",
+            }}
+            id="sidebar_profile_link"
+            onClick={() => {
+              if (windowWidth < 1200) {
+                setOpenMenu((prev) => !prev);
+              }
+            }}
+          >
+            <div className="sidebar_profile">
+              {windowWidth > 1200 && (
+                <MoreVertIcon
+                  className="sidebar_menu_icon"
+                  onClick={() => setOpenMenu((prev) => !prev)}
+                  style={{ cursor: "pointer" }}
+                />
+              )}
+              <img
+                src={user?.photoURL?.length > 0 ? user.photoURL : blankImg}
+                alt="profile picture"
+                className="profile-picture"
+              />
+              <h3 className="sidebar_user_name">{user?.displayName}</h3>
+            </div>
+          </li>
           <li
             id="sidebar-home-link"
             onClick={() => navigate("/dummygram")}
@@ -126,30 +168,6 @@ function SideBar() {
               <NotificationsIcon className="icon" /> <span>Notifications</span>
             </div>
           </li>
-          <li
-            className={
-              location.pathname.includes("/dummygram/user") ? "activeTab" : ""
-            }
-          >
-            <div
-              className="sidebar_align"
-              onClick={() => setOpenMenu((prev) => !prev)}
-            >
-              {user?.photoURL ? (
-                <img
-                  src={user.photoURL}
-                  alt="profile picture"
-                  className="profile-picture"
-                />
-              ) : (
-                <AccountCircleIcon className="icon" />
-              )}{" "}
-              <span className="sidebar_user_dropdown">
-                {user && !anonymous ? user.displayName : userData.name}{" "}
-                <ArrowDropDownIcon />
-              </span>
-            </div>
-          </li>
         </ul>
         <ErrorBoundary>
           <Footer />
@@ -198,7 +216,10 @@ function SideBar() {
 
       {openMenu && (
         <ClickAwayListener onClickAway={() => setOpenMenu(false)}>
-          <div className="sidebar_user_dropdown_container">
+          <div
+            className="sidebar_user_dropdown_container"
+            onClick={() => setOpenMenu(false)}
+          >
             <ul className="sidebar_user_dropdown_sub_container">
               <li
                 onClick={() =>