Merge pull request #270 from Anmol270900/add-chakra-discord-in-documentation

docs: add discord invite link to navbar

Author: codebender828

.storybook/config.js

@@ -33,6 +33,10 @@ import {
   faGithub
 } from '@fortawesome/free-brands-svg-icons'
 
+import {
+  faDiscord
+} from '@fortawesome/free-brands-svg-icons'
+
 Vue.use(Chakra, {
   icons: {
     iconPack: 'fa',
@@ -51,6 +55,7 @@ Vue.use(Chakra, {
       faSearch,
       faTimesCircle,
       faGithub,
+      faDiscord,
       faCheckCircle,
       faCog,
       faLock,

website/components/Navbar.vue

@@ -43,6 +43,17 @@
           icon="github"
         />
       </CBox>
+      <CBox as="li" mr="2">
+        <CIconButton
+          as="a"
+          variant="ghost"
+          variant-color="gray"
+          aria-label="Join Discord channel"
+          target="_blank"
+          href="https://discord.gg/sq2Kp6x"
+          icon="discord"
+        />
+      </CBox>
       <CBox as="li">
         <CIconButton
           v-chakra="{

website/plugins/chakra-ui.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import * as Chakra from '@chakra-ui/vue'
 import theme from '@chakra-ui/theme-vue'
-import { faGithub, faTwitter, faLinkedin } from '@fortawesome/free-brands-svg-icons'
+import { faGithub, faDiscord, faTwitter, faLinkedin } from '@fortawesome/free-brands-svg-icons'
 import {
   faBolt,
   faAnchor,
@@ -38,6 +38,7 @@ Vue.use(Chakra.default, {
     iconPack: 'fa',
     iconSet: {
       faGithub,
+      faDiscord,
       faAnchor,
       faBolt,
       faUniversalAccess,