Give a new look to sidebar

src/components/SideBar/index.css

@@ -22,6 +22,34 @@
   display: none;
 }
 
+.sidebar_design {
+  margin-top: 4.6em;
+  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;
@@ -42,12 +70,7 @@
   position: relative;
 }
 
-#sidebar-home-link {
-  margin-top: 6.2em;
-}
-
 .sidebar-links li:hover {
-  /* background: rgba(0, 0, 0, 0.05); */
   background-color: #5f85db;
 }
 
@@ -59,6 +82,29 @@
   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;
+}
+
+.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 +118,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: 333px;
-  left: 100px;
+  top: 175px;
+  left: 192px;
   padding: 0;
   border-radius: 10px;
   width: 170px;
@@ -193,10 +232,23 @@ footer {
     display: none;
   }
 
+  .sidebar_user_name {
+    display: none;
+  }
+
+  .profile-picture {
+    width: 30px;
+    height: 30px;
+  }
+
   .sidebar_user_dropdown_container {
     width: 150px;
     left: 40px;
   }
+
+  #sidebar_profile_link:hover {
+    background-color: #5f85db;
+  }
 
   .sidebar_user_dropdown_sub_container > li {
     padding-right: 0;
@@ -223,13 +275,17 @@ footer {
     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;
   }
 
@@ -247,3 +303,9 @@ footer {
     display: none;
   }
 }
+
+@media only screen and (min-height: 900px) and (min-width: 840px) {
+  .sidebar-links {
+    gap: 60px;
+  }
+}

src/components/SideBar/index.jsx

@@ -6,6 +6,8 @@ import { auth, db } from "../../lib/firebase";
 import { doc, getDoc } from "firebase/firestore";
 import { getModalStyle, useStyles } from "../../App";
 import { useLocation, useNavigate } from "react-router-dom";
+import blankImg from "../../assets/blank-profile.webp"
+import MoreVertIcon from '@mui/icons-material/MoreVert';
 
 import AccountCircleIcon from "@mui/icons-material/AccountCircle";
 import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
@@ -34,11 +36,26 @@ function SideBar({ anonymous }) {
   const [logout, setLogout] = useState(false);
   const [openMenu, setOpenMenu] = useState(false);
   const [openNewUpload, setOpenNewUpload] = useState(false);
+  const [windowWidth, setWindowWidth] = useState(700);
   const [userData, setUserData] = useState({
     name: "",
     username: "",
   });
 
+  function getWindowDimensions() {
+    const { innerWidth: width } = window;
+    return width;
+  }
+
+  useEffect(() => {
+    function handleResize() {
+      setWindowWidth(getWindowDimensions());
+    }
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
   useEffect(() => {
     async function getUsername() {
       try {
@@ -87,13 +104,43 @@ function SideBar({ anonymous }) {
   return (
     <div className="sidebar">
       <div className="sidebar-container">
+        <div className="sidebar_design">
+          <span style={{ backgroundColor: "red" }}></span>
+          <span style={{ backgroundColor: "orange" }}></span>
+          <span style={{ backgroundColor: "rgb(30, 222, 30)" }}></span>
+        </div>
         <ul className="sidebar-links">
+          <li
+            className={
+              location.pathname.includes("/dummygram/user") ? "activeTab" : ""
+            }
+            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)}
+                />)}
+              <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")}
             className={
               location.pathname === "/dummygram/" ||
-              location.pathname === "/dummygram"
+                location.pathname === "/dummygram"
                 ? "activeTab"
                 : ""
             }
@@ -125,30 +172,6 @@ function SideBar({ anonymous }) {
               <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 && 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 />
@@ -202,8 +225,7 @@ function SideBar({ anonymous }) {
               <li
                 onClick={() =>
                   navigate(
-                    `/dummygram/${
-                      anonymous ? "signup" : `user/${userData.username}`
+                    `/dummygram/${anonymous ? "signup" : `user/${userData.username}`
                     }`,
                   )
                 }