Add Community under About in the main menus

components/CommunityDialog/communitydialog.module.css

@@ -0,0 +1,70 @@
+.backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 100000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  background: rgba(0, 0, 0, 0.55);
+}
+
+.dialog {
+  width: 100%;
+  max-width: 420px;
+  background: var(--secondary-bg-color);
+  color: var(--primary-text-color);
+  border-radius: 12px;
+  padding: 28px 24px 22px;
+  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
+}
+
+.dialog h2 {
+  font-size: 28px;
+  margin-bottom: 12px;
+}
+
+.dialog p {
+  margin: 0 0 20px;
+  color: var(--secondary-text-color);
+  line-height: 1.5;
+}
+
+.links {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.links a {
+  display: block;
+  padding: 12px 14px;
+  border: 1px solid var(--border-color);
+  border-radius: 10px;
+  color: var(--primary-text-color);
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.links a:hover {
+  border-color: var(--accent-color);
+  color: var(--accent-color);
+}
+
+button.close {
+  margin-top: 18px;
+  width: 100%;
+  border-radius: 10px;
+  padding: 10px 16px;
+  border: 1px solid var(--primary-text-color);
+  background: transparent !important;
+  color: var(--primary-text-color);
+  font-weight: 500;
+  cursor: pointer;
+}
+
+button.close:enabled:hover {
+  background: var(--accent-color) !important;
+  border-color: var(--accent-color) !important;
+  color: #fff;
+}

components/CommunityDialog/index.tsx

@@ -0,0 +1,73 @@
+import { useEffect } from 'react'
+import style from './communitydialog.module.css'
+
+interface CommunityDialogProps {
+  open: boolean
+  onClose: () => void
+}
+
+const COMMUNITY_LINKS = [
+  {
+    label: 'Telegram',
+    href: 'https://t.me/paybutton'
+  },
+  {
+    label: 'X',
+    href: 'https://x.com/thepaybutton'
+  },
+  {
+    label: 'GitHub',
+    href: 'https://github.com/paybutton'
+  }
+]
+
+export default function CommunityDialog ({ open, onClose }: CommunityDialogProps): JSX.Element | null {
+  useEffect(() => {
+    if (!open) return undefined
+    const onKeyDown = (event: KeyboardEvent): void => {
+      if (event.key === 'Escape') onClose()
+    }
+    document.addEventListener('keydown', onKeyDown)
+    const previousOverflow = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+    return () => {
+      document.removeEventListener('keydown', onKeyDown)
+      document.body.style.overflow = previousOverflow
+    }
+  }, [open, onClose])
+
+  if (!open) return null
+
+  return (
+    <div className={style.backdrop} onClick={onClose} role="presentation">
+      <div
+        className={style.dialog}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="community-dialog-title"
+        onClick={(event) => event.stopPropagation()}
+      >
+        <h2 id="community-dialog-title">Community</h2>
+        <p>
+          PayButton is a community-driven open-source project. Join the
+          conversation, follow updates, and contribute.
+        </p>
+        <div className={style.links}>
+          {COMMUNITY_LINKS.map((link) => (
+            <a
+              key={link.label}
+              href={link.href}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {link.label}
+            </a>
+          ))}
+        </div>
+        <button type="button" className={style.close} onClick={onClose}>
+          Close
+        </button>
+      </div>
+    </div>
+  )
+}

components/LandingPage/Navbar.tsx

@@ -1,10 +1,11 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import Link from 'next/link'
 import Image from 'next/image'
 import style from 'styles/landing.module.css'
 import logoImageSource from 'assets/logo.png'
 import dynamic from 'next/dynamic'
 import LogoutButton from './LogoutButton'
+import CommunityDialog from 'components/CommunityDialog'
 
 const ThemeToggle = dynamic(
   async () => await import('components/Sidebar/themetoggle'),
@@ -19,6 +20,24 @@ interface IProps {
 
 export default function Navbar ({ userId }: IProps): JSX.Element {
   const [mobileMenu, setMobileMenu] = useState(false)
+  const [aboutOpen, setAboutOpen] = useState(false)
+  const [communityOpen, setCommunityOpen] = useState(false)
+
+  useEffect(() => {
+    if (!aboutOpen) return undefined
+    const closeAbout = (event: MouseEvent): void => {
+      const target = event.target as HTMLElement
+      if (target.closest('[data-about-menu]') === null) setAboutOpen(false)
+    }
+    document.addEventListener('mousedown', closeAbout)
+    return () => document.removeEventListener('mousedown', closeAbout)
+  }, [aboutOpen])
+
+  const openCommunity = (): void => {
+    setAboutOpen(false)
+    setMobileMenu(false)
+    setCommunityOpen(true)
+  }
 
   return (
     <div className={style.navbar_ctn}>
@@ -71,6 +90,24 @@ export default function Navbar ({ userId }: IProps): JSX.Element {
           >
             Docs
           </Link>
+          <div className={style.about_wrap} data-about-menu>
+            <button
+              type="button"
+              className={style.about_btn}
+              aria-expanded={aboutOpen}
+              aria-haspopup="true"
+              onClick={() => setAboutOpen(!aboutOpen)}
+            >
+              About
+            </button>
+            {aboutOpen && (
+              <div className={style.about_dropdown} role="menu">
+                <button type="button" role="menuitem" onClick={openCommunity}>
+                  Community
+                </button>
+              </div>
+            )}
+          </div>
           {userId === undefined
             ? (
             <>
@@ -96,6 +133,7 @@ export default function Navbar ({ userId }: IProps): JSX.Element {
               )}
         </div>
       </div>
+      <CommunityDialog open={communityOpen} onClose={() => setCommunityOpen(false)} />
     </div>
   )
 }

components/Sidebar/index.tsx

@@ -18,6 +18,7 @@ import Docs from 'assets/docs.png'
 import Admin from 'assets/admin-icon.png'
 import Logout from 'assets/logout-icon.png'
 import { UserProfile } from '@prisma/client'
+import CommunityDialog from 'components/CommunityDialog'
 const ThemeToggle = dynamic(async () => await import('./themetoggle'), {
   ssr: false
 })
@@ -74,6 +75,8 @@ interface IProps {
 
 const Sidebar: React.FC = ({ chart, setChart, loggedUser }: IProps) => {
   const [menu, setMenu] = useState(false)
+  const [aboutOpen, setAboutOpen] = useState(false)
+  const [communityOpen, setCommunityOpen] = useState(false)
   const useMediaQuery = (width: number): boolean => {
     const [targetReached, setTargetReached] = useState(false)
     const updateTarget = useCallback((e) => {
@@ -139,6 +142,36 @@ const Sidebar: React.FC = ({ chart, setChart, loggedUser }: IProps) => {
               .map(item =>
                 <MenuItem key={item.name} name={item.name} image={item.image} isRestricted={item.isRestricted}/>
               )}
+            <li className={style.about_group}>
+              <button
+                type="button"
+                className={style.about_btn}
+                aria-expanded={aboutOpen}
+                onClick={(event) => {
+                  event.stopPropagation()
+                  setAboutOpen(!aboutOpen)
+                }}
+              >
+                About
+              </button>
+              {aboutOpen && (
+                <button
+                  type="button"
+                  className={style.community_btn}
+                  onClick={(event) => {
+                    event.stopPropagation()
+                    setAboutOpen(false)
+                    setCommunityOpen(true)
+                    if (isBreakpoint) {
+                      setMenu(false)
+                      setCheckBox()
+                    }
+                  }}
+                >
+                  Community
+                </button>
+              )}
+            </li>
           </ul>
         </nav>
       </div>
@@ -162,6 +195,7 @@ const Sidebar: React.FC = ({ chart, setChart, loggedUser }: IProps) => {
         </a>
       </div>
     </aside>
+    <CommunityDialog open={communityOpen} onClose={() => setCommunityOpen(false)} />
     </>
     }
   </>

components/Sidebar/sidebar.module.css

@@ -17,6 +17,40 @@
   padding: 0;
 }
 
+.about_group {
+  list-style: none;
+}
+
+button.about_btn,
+button.community_btn {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  cursor: pointer;
+  font-weight: 500;
+  font-family: inherit;
+  font-size: inherit;
+  text-align: left;
+  padding: 8px 25px;
+  border: none;
+  border-radius: 10px;
+  background: transparent !important;
+  color: var(--primary-text-color);
+  box-shadow: none;
+}
+
+button.community_btn {
+  padding-left: 40px;
+}
+
+button.about_btn:enabled:hover,
+button.community_btn:enabled:hover {
+  background: var(--primary-text-color) !important;
+  border-color: transparent !important;
+  color: var(--secondary-bg-color);
+  filter: none;
+}
+
 .section {
   padding: 0;
   margin: 0;
@@ -144,6 +178,11 @@ body[data-theme='dark'] .socialctn .moon {
 }
 
 @media (max-width: 960px) {
+  button.about_btn,
+  button.community_btn {
+    border-radius: 0;
+  }
+
   .topmenu {
     background-color: var(--secondary-bg-color);
     height: 50px;