Add files via upload

src/componants/shared/mobillenav/userprofile-sidebar/UserProfileSidebar.jsx

@@ -0,0 +1,36 @@
+import { useTranslation } from "react-i18next";
+import { useSelector } from "react-redux";
+import { Link } from "react-router-dom";
+import { userImg, userPicturePlaceholder } from "src/Assets/Images/Images";
+import s from "./UserProfileSidebar.module.scss";
+
+const UserProfileSidebar = () => {
+  const { loginInfo } = useSelector((state) => state.user);
+  const { username, isSignIn } = loginInfo;
+  const { t } = useTranslation();
+
+  return (
+    <div className={s.userInfo}>
+      <Link to="/profile" title={t("mobileNav.profile")} className={s.img}>
+        <img
+          src={isSignIn ? userImg : userPicturePlaceholder}
+          alt="user's picture"
+          loading="lazy"
+          decoding="async"
+        />
+      </Link>
+
+      <p>
+        {t("mobileNav.hey")} 🖐️
+        <Link
+          to="/profile"
+          title={t("mobileNav.profile")}
+          className={s.userName}
+        >
+          {username}
+        </Link>
+      </p>
+    </div>
+  );
+};
+export default UserProfileSidebar;

src/componants/shared/mobillenav/userprofile-sidebar/UserProfileSidebar.module.scss

@@ -0,0 +1,47 @@
+.userInfo .img {
+  display: block;
+  width: 70px;
+  height: 70px;
+  border-radius: 5px;
+  user-select: none;
+  display: flex;
+  outline: solid 3px #54577a;
+  transition: outline-color .3s;
+
+  & img {
+    border-radius: inherit;
+  }
+
+  &:hover {
+    outline-color: #787db0;
+  }
+
+  &:focus-visible {
+    outline-color: var(--white);
+  }
+}
+
+.userInfo p {
+  color: var(--medium-light-gray);
+  margin: 20px 0 50px;
+}
+
+.userInfo p .userName {
+  display: block;
+  color: var(--white);
+  margin-top: 4px;
+  font-weight: bold;
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  transition: .2s color;
+
+  &:focus-visible {
+    color: var(--orange-degree2);
+    text-decoration: underline;
+  }
+}
+
+.userInfo p::selection {
+  background-color: var(--white) !important;
+}