github and discord links

src/ui/components/RightBar.css

@@ -0,0 +1,27 @@
+.RightBar {
+  position: absolute;
+
+  display:flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+
+  height: 100vh;
+  width: 6%;
+  left: 94%;
+
+  background-color: rgba(77, 77, 77, 0.6);
+}
+
+.BarImg:hover {
+  cursor: pointer;
+}
+
+.RightBarInner > div {
+  margin: 30px 0;
+}
+
+.RightBar img {
+  height: 40px;
+  filter: invert(100%) sepia(0%) saturate(11%) hue-rotate(227deg) brightness(103%) contrast(105%);
+}

src/ui/components/RightBar.tsx

@@ -0,0 +1,31 @@
+import { invoke } from '@tauri-apps/api'
+import React from 'react'
+
+import Discord from  '../../resources/icons/discord.svg'
+import Github from  '../../resources/icons/github.svg'
+
+import './RightBar.css'
+
+const DISCORD = 'https://discord.gg/T5vZU6UyeG'
+const GITHUB = 'https://github.com/Grasscutters/Grasscutter'
+
+export default class RightBar extends React.Component {
+  openInBrowser(url: string) {
+    invoke('open_in_browser', { url })
+  }
+
+  render() {
+    return (
+      <div className="RightBar">
+        <div className="RightBarInner">
+          <div className="BarDiscord BarImg" onClick={() => this.openInBrowser(DISCORD)}>
+            <img src={Discord} />
+          </div>
+          <div className="BarGithub BarImg" onClick={() => this.openInBrowser(GITHUB)}>
+            <img src={Github} />
+          </div>
+        </div>
+      </div>
+    )
+  }
+}