Add files via upload

src/componants/shared/mobillenav/authsidebarbuttons/AuthSideBarButtons.jsx

@@ -0,0 +1,37 @@
+import { useTranslation } from "react-i18next";
+import { useSelector } from "react-redux";
+import { Link } from "react-router-dom";
+import useSignOut from "src/Hooks/App/useSignOut";
+import SvgIcon from "../../MiniComponents/SvgIcon";
+import s from "./AuthSideBarButtons.module.scss";
+
+const AuthSideBarButtons = () => {
+  const { loginInfo } = useSelector((state) => state.user);
+  const { isSignIn } = loginInfo;
+  const handleSignOut = useSignOut();
+  const { t } = useTranslation();
+
+  return (
+    <>
+      {isSignIn && (
+        <button
+          className={s.signOutButton}
+          type="button"
+          onClick={handleSignOut}
+        >
+          <SvgIcon name="boxArrowRight" />
+          <span>{t("mobileNav.signOut")}</span>
+        </button>
+      )}
+
+      {!isSignIn && (
+        <Link to="/signup" className={s.signOutButton}>
+          <SvgIcon name="boxArrowRight" />
+          <span>{t("mobileNav.signIn")}</span>
+        </Link>
+      )}
+    </>
+  );
+};
+
+export default AuthSideBarButtons;

src/componants/shared/mobillenav/authsidebarbuttons/AuthSideBarButtons.module.scss

@@ -0,0 +1,36 @@
+.signOutButton {
+  all: unset;
+  -webkit-tap-highlight-color: transparent;
+  color: var(--medium-light-gray);
+  padding: 10px;
+  min-width: 126px;
+  display: flex;
+  align-items: center;
+  border-radius: 10px;
+  cursor: pointer;
+  outline: solid 2px transparent;
+  transition: background-color .2s, outline-color .2s;
+
+  &[class=active],
+  &:hover {
+    background-color: rgba(87, 87, 87, .5);
+  }
+
+  &[class=active]:hover {
+    background-color: rgba(87, 87, 87, .8);
+  }
+
+  &:focus-visible {
+    outline-color: var(--white);
+  }
+}
+
+.signOutButton span {
+  padding-inline-start: 16px;
+}
+
+.signOutButton svg {
+  fill: var(--white);
+  width: 20px;
+  height: 20px;
+}