Adding the support / donate page to the navbar. Fixes #86

src/shared/components/navbar.tsx

@@ -29,6 +29,7 @@ import {
   notifyPrivateMessage,
   isBrowser,
   wsSubscribe,
+  supportLemmyUrl,
 } from '../utils';
 import { i18n } from '../i18next';
 import { PictrsImage } from './pictrs-image';
@@ -239,6 +240,17 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                   {i18n.t('create_community')}
                 </Link>
               </li>
+              <li class="nav-item">
+                <a
+                  className="nav-link"
+                  title={i18n.t('support_lemmy')}
+                  href={supportLemmyUrl}
+                >
+                  <svg class="icon small">
+                    <use xlinkHref="#icon-beer"></use>
+                  </svg>
+                </a>
+              </li>
             </ul>
             <ul class="navbar-nav my-2">
               {this.canAdmin && (

src/shared/components/symbols.tsx

@@ -20,6 +20,9 @@ export class Symbols extends Component<any, any> {
         xmlnsXlink="http://www.w3.org/1999/xlink"
       >
         <defs>
+          <symbol id="icon-beer" viewBox="0 0 27 28">
+            <path d="M10 14v-6h-4v4c0 1.109 0.891 2 2 2h2zM26 21v3h-18v-3l2-3h-2c-3.313 0-6-2.688-6-6v-5l-1-1 0.5-2h7.5l0.5-2h15l0.5 3-1 0.5v12.5z"></path>
+          </symbol>
           <symbol id="icon-x" viewBox="0 0 24 24">
             <path d="M5.293 6.707l5.293 5.293-5.293 5.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l5.293-5.293 5.293 5.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-5.293-5.293 5.293-5.293c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-5.293 5.293-5.293-5.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z"></path>
           </symbol>

src/shared/utils.ts

@@ -71,6 +71,7 @@ export const favIconPngUrl = '/static/assets/apple-touch-icon.png';
 export const defaultFavIcon = 'test';
 export const repoUrl = 'https://github.com/LemmyNet';
 export const joinLemmyUrl = 'https://join.lemmy.ml';
+export const supportLemmyUrl = 'https://join.lemmy.ml/sponsors';
 export const helpGuideUrl = '/docs/about_guide.html';
 export const markdownHelpUrl = `${helpGuideUrl}#markdown-guide`;
 export const sortingHelpUrl = `${helpGuideUrl}#sorting`;