add visibility toggle to main page

nodepen · Jan 20, 2020 · 990b2aa · 990b2aa
1 parent 21961ab
commit 990b2aa
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 12 deletions.
diff --git a/public/index.html b/public/index.html
@@ -8,6 +8,7 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <link href="https://fonts.googleapis.com/css?family=Major+Mono+Display&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Nova+Mono&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <title>glasshopper</title>
   </head>
   <body>

diff --git a/src/App.vue b/src/App.vue
@@ -13,31 +13,25 @@
         >
           sandbox
         </router-link>
-        <router-link
+        <!-- <router-link
           to="/g"
           class="tab"
         >
           glossary
-        </router-link>
-        <router-link
-          to="/t"
-          class="tab"
-        >
-          tutorials
-        </router-link>
+        </router-link> -->
       </div>
       <div class="toggles">
-        <div class="toggle" />
-        <div class="toggle" />
-        <div class="toggle" />
+        <div class="toggle" @pointerdown="toggleGraphVisibility">
+			<i class="material-icons"> {{ visibilityIcon }}</i>
+		</div>
       </div>
     </nav>
     <footer>
       <div class="footer__title">
         glasshopper.io
       </div>
       <div class="footer__version">
-        0.4.0
+        0.4.1
       </div>
     </footer>
   </div>
@@ -53,6 +47,16 @@ export default Vue.extend({
 		GraphEditor,
 		GraphScene
 	},
+	methods: {
+		toggleGraphVisibility(): void {
+			this.$store.dispatch('toggleFocus');
+		}
+	},
+	computed: {
+		visibilityIcon(): string {
+			return this.$store.state.focus === 'graph' ? 'visibility' : 'visibility_off'
+		}
+	}
 })
 </script>
 
@@ -144,6 +148,19 @@ nav {
 	box-sizing: border-box;
 
 	border: 0.7mm solid black;
+
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+}
+
+.toggle:hover {
+	cursor: pointer;
+}
+
+.toggle > * {
+	font-size: 18px;
 }
 
 .tabs {