diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
index 6062925..612a5f8 100644
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@@ -1,3 +1,4 @@
+import { useState } from "react";
import LogoIcon from "./icons/LogoIcon";
import {NAV_BOTTOM, NAV_ITEMS} from "../config/feedConstants";
import {NavIcons} from "./icons/NavIcons";
@@ -5,6 +6,7 @@ import { useNavigate } from "react-router-dom";
import { useTheme } from "../context/ThemeContext";
import { useUnread } from "../context/UnreadContext";
import { useTranslation } from 'react-i18next';
+import SupportModal from "./SupportModal";
export default function Sidebar({
open,
@@ -20,6 +22,7 @@ export default function Sidebar({
const { theme, toggle: toggleTheme } = useTheme();
const { totalUnread } = useUnread();
const { t, i18n } = useTranslation();
+ const [supportOpen, setSupportOpen] = useState(false);
const toggleLang = () => {
const next = i18n.language === 'ru' ? 'en' : 'ru';
@@ -94,6 +97,9 @@ export default function Sidebar({
);
})}
+
setSupportOpen(true)}>
+ {t('nav.support')}
+
{theme === "dark" ? (
@@ -117,6 +123,7 @@ export default function Sidebar({
+ {supportOpen && setSupportOpen(false)} />}
>
);
}
diff --git a/src/components/SupportModal.jsx b/src/components/SupportModal.jsx
new file mode 100644
index 0000000..7a17c0d
--- /dev/null
+++ b/src/components/SupportModal.jsx
@@ -0,0 +1,26 @@
+import { useTranslation } from 'react-i18next';
+import CloseIcon from "./icons/CloseIcon";
+
+export default function SupportModal({ onClose }) {
+ const { t } = useTranslation();
+
+ return (
+ e.target === e.currentTarget && onClose()}>
+
+
+ {t('support.title')}
+
+
+
+
+
+ );
+}
diff --git a/src/components/icons/NavIcons.jsx b/src/components/icons/NavIcons.jsx
index edbc0f8..3bbf630 100644
--- a/src/components/icons/NavIcons.jsx
+++ b/src/components/icons/NavIcons.jsx
@@ -50,4 +50,11 @@ export const NavIcons = {
),
+ help: () => (
+
+ ),
};
\ No newline at end of file
diff --git a/src/styles/modal.css b/src/styles/modal.css
index 5026b46..fdda107 100644
--- a/src/styles/modal.css
+++ b/src/styles/modal.css
@@ -240,6 +240,35 @@
border-radius: 50%; animation: spin .7s linear infinite;
}
+/* ── Support Modal ── */
+.f-support-body {
+ padding: 0 4px;
+}
+.f-support-text {
+ margin: 0;
+ font-size: 0.9rem;
+ line-height: 1.7;
+ color: var(--text-primary);
+}
+.f-support-email {
+ margin: 18px 0 0;
+}
+.f-support-email a {
+ color: var(--teal);
+ font-weight: 700;
+ font-size: 1.05rem;
+ text-decoration: none;
+ transition: opacity 0.15s;
+}
+.f-support-email a:hover {
+ opacity: 0.8;
+}
+.f-support-footer {
+ margin: 18px 0 0;
+ font-size: 0.82rem;
+ color: var(--muted);
+}
+
@media (max-width: 600px) {
.f-modal-bg {
align-items: flex-end;