github and discord links

src/ui/App.css

@@ -1,6 +1,8 @@
+html,
 body {
   user-select: none;
   height: 100vh;
+  overflow: hidden;
 }
 
 #root, .App {

src/ui/App.tsx

@@ -13,6 +13,7 @@ import MiniDialog from './components/MiniDialog'
 import DownloadList from './components/common/DownloadList'
 import Downloads from './components/menu/Downloads'
 import NewsSection from './components/news/NewsSection'
+import RightBar from './components/RightBar'
 
 interface IProps {
   [key: string]: never;
@@ -52,6 +53,8 @@ class App extends React.Component<IProps, IState> {
           downFunc={() => this.setState({ downloadsOpen: !this.state.downloadsOpen })}
         />
 
+        <RightBar />
+
         <NewsSection />
 
         {

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>
+    )
+  }
+}