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')} + +
+
+

{t('support.text')}

+

+ 1989krylov@gmail.com +

+

{t('support.footer')}

+
+
+
+ ); +} 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;