grouped menu items

added some external links

package-lock.json

@@ -40,6 +40,14 @@
         "@fortawesome/fontawesome-common-types": "^0.2.28"
       }
     },
+    "@fortawesome/free-brands-svg-icons": {
+      "version": "5.13.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.13.0.tgz",
+      "integrity": "sha512-/6xXiJFCMEQxqxXbL0FPJpwq5Cv6MRrjsbJEmH/t5vOvB4dILDpnY0f7zZSlA8+TG7jwlt12miF/yZpZkykucA==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.28"
+      }
+    },
     "@fortawesome/free-solid-svg-icons": {
       "version": "5.13.0",
       "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.13.0.tgz",

package.json

@@ -11,6 +11,7 @@
   "main": "App.vue",
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.28",
+    "@fortawesome/free-brands-svg-icons": "^5.13.0",
     "@fortawesome/free-solid-svg-icons": "^5.13.0",
     "@fortawesome/vue-fontawesome": "^0.1.9",
     "@vue/cli-service": "^4.3.1",

src/components/Menu.vue

@@ -24,80 +24,96 @@
     <div class="menu" v-bind:class="{ open: grimoire.isMenuOpen }">
       <font-awesome-icon icon="cog" @click="toggleMenu" />
       <ul>
-        <!-- Grimoire -->
+        <li class="tabs" :class="tab">
-        <li class="headline">
+          <font-awesome-icon icon="book-open" @click="tab = 'grimoire'" />
-          <font-awesome-icon icon="book-open" />
+          <font-awesome-icon icon="broadcast-tower" @click="tab = 'session'" />
-          Grimoire
+          <font-awesome-icon
-        </li>
+            icon="users"
-        <li @click="toggleGrimoire" v-if="players.length">
+            v-if="!session.isSpectator"
-          <em>[G]</em>
+            @click="tab = 'players'"
-          <template v-if="!grimoire.isPublic">Hide</template>
+          />
-          <template v-if="grimoire.isPublic">Show</template>
+          <font-awesome-icon
-        </li>
+            icon="theater-masks"
-        <li @click="toggleNightOrder" v-if="players.length">
+            v-if="!session.isSpectator"
-          <em
+            @click="tab = 'characters'"
-            ><font-awesome-icon
+          />
-              :icon="['fas', grimoire.isNightOrder ? 'check-square' : 'square']"
+          <font-awesome-icon icon="question" @click="tab = 'help'" />
-          /></em>
-          Night order
-        </li>
-        <li v-if="players.length">
-          <em>
-            <font-awesome-icon @click="updateZoom(-0.1)" icon="search-minus" />
-            {{ Math.round(grimoire.zoom * 100) }}%
-            <font-awesome-icon @click="updateZoom(0.1)" icon="search-plus" />
-          </em>
-          Zoom
-        </li>
-        <li @click="setBackground">
-          Background image
-        </li>
-        <li @click="hostSession" v-if="!session.sessionId">
-          Host Live Session
-        </li>
-        <li @click="joinSession" v-if="!session.sessionId">
-          Join Live Session
-        </li>
-        <li class="headline" v-if="session.sessionId">
-          <font-awesome-icon icon="broadcast-tower" />
-          {{ session.isSpectator ? "Playing" : "Hosting" }}
-        </li>
-        <li v-if="session.sessionId" @click="copySessionUrl">
-          <em><font-awesome-icon icon="copy"/></em>
-          Copy player link
-        </li>
-        <li @click="leaveSession" v-if="session.sessionId">
-          <em>{{ session.sessionId }}</em>
-          Leave Session
         </li>
 
-        <template v-if="!session.isSpectator">
+        <template v-if="tab === 'grimoire'">
-          <!-- Users -->
+          <!-- Grimoire -->
-          <li class="headline">
+          <li class="headline">Grimoire</li>
-            <font-awesome-icon icon="users" />
+          <li @click="toggleGrimoire" v-if="players.length">
-            Players
+            <em>[G]</em>
+            <template v-if="!grimoire.isPublic">Hide</template>
+            <template v-if="grimoire.isPublic">Show</template>
           </li>
+          <li @click="toggleNightOrder" v-if="players.length">
+            <em
+              ><font-awesome-icon
+                :icon="[
+                  'fas',
+                  grimoire.isNightOrder ? 'check-square' : 'square'
+                ]"
+            /></em>
+            Night order
+          </li>
+          <li v-if="players.length">
+            <em>
+              <font-awesome-icon
+                @click="updateZoom(-0.1)"
+                icon="search-minus"
+              />
+              {{ Math.round(grimoire.zoom * 100) }}%
+              <font-awesome-icon @click="updateZoom(0.1)" icon="search-plus" />
+            </em>
+            Zoom
+          </li>
+          <li @click="setBackground">
+            Background image
+          </li>
+        </template>
+
+        <template v-if="tab === 'session'">
+          <li class="headline" v-if="session.sessionId">
+            {{ session.isSpectator ? "Playing" : "Hosting" }}
+          </li>
+          <li class="headline" v-else>
+            Live Session
+          </li>
+          <li @click="hostSession" v-if="!session.sessionId">
+            Host a session
+          </li>
+          <li @click="joinSession" v-if="!session.sessionId">
+            Join a session
+          </li>
+          <li v-if="session.sessionId" @click="copySessionUrl">
+            <em><font-awesome-icon icon="copy"/></em>
+            Copy player link
+          </li>
+          <li @click="leaveSession" v-if="session.sessionId">
+            <em>{{ session.sessionId }}</em>
+            Leave Session
+          </li>
+        </template>
+
+        <template v-if="tab === 'players' && !session.isSpectator">
+          <!-- Users -->
+          <li class="headline">Players</li>
           <li @click="addPlayer" v-if="players.length < 20">
             <em>[A]</em> Add
           </li>
           <li @click="randomizeSeatings" v-if="players.length > 2">
-            <em>[R]</em> Randomize
+            Randomize
           </li>
           <li @click="clearPlayers" v-if="players.length">
             Remove all
           </li>
         </template>
 
-        <!-- Characters -->
+        <template v-if="tab === 'characters' && !session.isSpectator">
-        <li class="headline">
+          <!-- Characters -->
-          <font-awesome-icon icon="theater-masks" />
+          <li class="headline">Characters</li>
-          Characters
-        </li>
-        <li @click="toggleModal('reference')">
-          <em>[R]</em>
-          Reference Sheet
-        </li>
-        <template v-if="!session.isSpectator">
           <li @click="toggleModal('edition')">
             <em>[E]</em>
             Select Edition
@@ -110,6 +126,27 @@
             Remove all
           </li>
         </template>
+
+        <template v-if="tab === 'help'">
+          <!-- Help -->
+          <li class="headline">Help</li>
+          <li @click="toggleModal('reference')">
+            <em>[R]</em>
+            Reference Sheet
+          </li>
+          <li>
+            <a href="https://discord.gg/tkWDny6" target="_blank">
+              <em><font-awesome-icon :icon="['fab', 'discord']"/></em>
+              Join Discord
+            </a>
+          </li>
+          <li>
+            <a href="https://github.com/bra1n/townsquare" target="_blank">
+              <em><font-awesome-icon :icon="['fab', 'github']"/></em>
+              Source code
+            </a>
+          </li>
+        </template>
       </ul>
     </div>
   </div>
@@ -127,6 +164,11 @@ export default {
     ...mapState(["grimoire", "session"]),
     ...mapState("players", ["players"])
   },
+  data() {
+    return {
+      tab: "grimoire"
+    };
+  },
   methods: {
     takeScreenshot(dimensions = {}) {
       this.$store.commit("updateScreenshot");
@@ -262,7 +304,7 @@ export default {
     margin-left: 10px;
   }
 
-  .session {
+  span.session {
     color: $demon;
     &.spectator {
       color: $townsfolk;
@@ -295,6 +337,14 @@ export default {
     padding: 5px 5px 15px;
   }
 
+  a {
+    color: white;
+    text-decoration: none;
+    &:hover {
+      color: red;
+    }
+  }
+
   ul {
     display: flex;
     list-style-type: none;
@@ -312,11 +362,43 @@ export default {
       text-align: left;
       background: rgba(0, 0, 0, 0.7);
 
+      &.tabs {
+        display: flex;
+        padding: 0;
+        svg {
+          flex-grow: 1;
+          flex-shrink: 0;
+          height: 35px;
+          border-bottom: 3px solid black;
+          border-right: 3px solid black;
+          padding: 5px 0;
+          cursor: pointer;
+          transition: color 250ms;
+          &:hover {
+            color: red;
+          }
+          &:last-child {
+            border-right: 0;
+          }
+        }
+        &.grimoire .fa-book-open,
+        &.players .fa-users,
+        &.characters .fa-theater-masks,
+        &.session .fa-broadcast-tower,
+        &.help .fa-question {
+          background: linear-gradient(
+            to bottom,
+            $townsfolk 0%,
+            rgba(0, 0, 0, 0.5) 100%
+          );
+        }
+      }
+
       &:last-child {
         margin-bottom: 0;
       }
 
-      &:not(.headline):hover {
+      &:not(.headline):not(.tabs):hover {
         cursor: pointer;
         color: red;
       }
@@ -333,7 +415,7 @@ export default {
     .headline {
       font-family: PiratesBay, sans-serif;
       letter-spacing: 1px;
-      padding: 5px 10px;
+      padding: 0 10px;
       text-align: center;
       background: linear-gradient(
         to right,

src/main.js

@@ -3,6 +3,7 @@ import App from "./App";
 import store from "./store";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { fas } from "@fortawesome/free-solid-svg-icons";
+import { fab } from "@fortawesome/free-brands-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
 const faIcons = [
@@ -18,6 +19,7 @@ const faIcons = [
   "Heartbeat",
   "Link",
   "PeopleArrows",
+  "Question",
   "Random",
   "RedoAlt",
   "SearchMinus",
@@ -32,7 +34,11 @@ const faIcons = [
   "Users",
   "VoteYea"
 ];
-library.add(...faIcons.map(i => fas["fa" + i]));
+const fabIcons = ["Github", "Discord"];
+library.add(
+  ...faIcons.map(i => fas["fa" + i]),
+  ...fabIcons.map(i => fab["fa" + i])
+);
 Vue.component("font-awesome-icon", FontAwesomeIcon);
 Vue.config.productionTip = false;