Merge pull request #35 from SlimusMinus/add-support

added support button and text

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({
                   </div>
               );
             })}
+            <div className="f-sb-item" onClick={() => setSupportOpen(true)}>
+              <NavIcons.help /> {t('nav.support')}
+            </div>
             <div className="f-sb-divider" />
             <div className="f-sb-item f-sb-theme-toggle" onClick={toggleTheme}>
               {theme === "dark" ? (
@@ -117,6 +123,7 @@ export default function Sidebar({
             </div>
           </div>
         </div>
+        {supportOpen && <SupportModal onClose={() => setSupportOpen(false)} />}
       </>
   );
 }

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 (
+    <div className="f-modal-bg" onClick={e => e.target === e.currentTarget && onClose()}>
+      <div className="f-modal" style={{ width: 420 }}>
+        <div className="f-modal-head">
+          <span className="f-modal-title">{t('support.title')}</span>
+          <button className="f-close-btn" onClick={onClose}>
+            <CloseIcon />
+          </button>
+        </div>
+        <div className="f-modal-body f-support-body">
+          <p className="f-support-text">{t('support.text')}</p>
+          <p className="f-support-email">
+            <a href="mailto:1989krylov@gmail.com">1989krylov@gmail.com</a>
+          </p>
+          <p className="f-support-footer">{t('support.footer')}</p>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/icons/NavIcons.jsx

@@ -50,4 +50,11 @@ export const NavIcons = {
         <line x1="8" y1="9" x2="10" y2="9" />
       </svg>
   ),
+  help: () => (
+      <svg width={20} height={20} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+        <circle cx="12" cy="12" r="10" />
+        <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
+        <line x1="12" y1="17" x2="12.01" y2="17" />
+      </svg>
+  ),
 };

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;