feat(website): social buttons in mobile menu

apps/website/src/components/Footer.css

@@ -12,18 +12,18 @@ footer .content-wrapper {
     align-items: center;
 }
 
-footer .social-buttons {
+.social-buttons {
     display: flex;
     gap: 1em;
 }
 
-footer a.social-button {
+.social-buttons a.social-button {
     color: var(--muted-color);
     transition: color 250ms ease-in-out, opacity 250ms ease-in-out;
     opacity: 0.7;
 }
 
-footer a.social-button:hover {
+.social-buttons a.social-button:hover {
     color: var(--brand-1);
     opacity: 1;
 }

apps/website/src/components/Footer.tsx

@@ -15,40 +15,55 @@ export default function Footer() {
                     © 2017-2024 <Link href="https://github.com/zadam" openExternally>zadam</Link>.
                 </div>
 
-                <div className="social-buttons">
+                <SocialButtons />
-                    <SocialButton
-                        name="GitHub"
-                        iconSvg={githubIcon}
-                        url="https://github.com/TriliumNext/Trilium"
-                    />
-
-                    <SocialButton
-                        name="GitHub Discussions"
-                        iconSvg={githubDiscussionsIcon}
-                        url="https://github.com/orgs/TriliumNext/discussions"
-                    />
-
-                    <SocialButton
-                        name="Matrix"
-                        iconSvg={matrixIcon}
-                        url="https://matrix.to/#/#triliumnext:matrix.org"
-                    />
-
-                    <SocialButton
-                        name="Reddit"
-                        iconSvg={redditIcon}
-                        url="https://www.reddit.com/r/Trilium/"
-                    />
-                </div>
             </div>
         </footer>
     )
 }
 
-function SocialButton({ name, iconSvg, url }: { name: string, iconSvg: string, url: string }) {
+export function SocialButtons({ className, withText }: { className?: string, withText?: boolean }) {
     return (
-        <Link className="social-button" href={url} openExternally title={name}>
+        <div className={`social-buttons ${className}`}>
+            <SocialButton
+                name="GitHub"
+                iconSvg={githubIcon}
+                url="https://github.com/TriliumNext/Trilium"
+                withText={withText}
+            />
+
+            <SocialButton
+                name="GitHub Discussions"
+                iconSvg={githubDiscussionsIcon}
+                url="https://github.com/orgs/TriliumNext/discussions"
+                withText={withText}
+            />
+
+            <SocialButton
+                name="Matrix"
+                iconSvg={matrixIcon}
+                url="https://matrix.to/#/#triliumnext:matrix.org"
+                withText={withText}
+            />
+
+            <SocialButton
+                name="Reddit"
+                iconSvg={redditIcon}
+                url="https://www.reddit.com/r/Trilium/"
+                withText={withText}
+            />
+        </div>
+    )
+}
+
+function SocialButton({ name, iconSvg, url, withText }: { name: string, iconSvg: string, url: string, withText: boolean }) {
+    return (
+        <Link
+            className="social-button"
+            href={url} openExternally
+            title={!withText ? name : undefined}
+        >
             <Icon svg={iconSvg} />
+            {withText && name}
         </Link>
     )
 }

apps/website/src/components/Header.css

@@ -76,7 +76,7 @@ header nav a.active {
         flex-direction: column;
         max-height: 0;
         overflow: hidden;
-        transition: max-height 200ms ease-in-out;        
+        transition: max-height 200ms ease-in;        
     }
 
     header nav.mobile-shown {
@@ -91,8 +91,17 @@ header nav a.active {
         border-bottom: 1px solid rgba(0, 0, 0, 0.2);
     }
 
-    header nav a:last-of-type {
+    header .social-buttons {
+        justify-content: space-between;
+        padding-top: 1em;
+    }
+
+    header .social-buttons a {
         border-bottom: unset;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        font-size: 1em;
     }
 
 }

apps/website/src/components/Header.tsx

@@ -6,6 +6,7 @@ import Icon from "./Icon";
 import logoPath from "../assets/icon-color.svg";
 import menuIcon from "../assets/boxicons/bx-menu.svg?raw";
 import { useState } from "preact/hooks";
+import { SocialButtons } from "./Footer";
 
 interface HeaderLink {
     url: string;
@@ -51,6 +52,8 @@ export function Header() {
                             target={link.external && "_blank"}
                         >{link.text}</a>
                     ))}
+
+                    <SocialButtons className="mobile-only" withText />
                 </nav>
 
                 <DownloadButton />