Added minimizing tabs

src/components/system/LayerTab.vue

@@ -1,15 +1,20 @@
 <template>
 	<LayerProvider :layer="layer" :index="index">
-		<div class="layer-tab" :style="style" :class="{ hasSubtabs: subtabs }">
+		<div class="layer-container">
+			<button v-if="index > 0 && allowGoBack && !minimized" class="goBack" @click="goBack(index)">←</button>
+			<button class="layer-tab minimized" v-if="minimized" @click="toggleMinimized"><div>{{ name }}</div></button>
+			<div class="layer-tab" :style="style" :class="{ hasSubtabs: subtabs }" v-else>
 				<branches>
 					<sticky v-if="subtabs" class="subtabs" :class="{ floating, firstTab: firstTab || !allowGoBack }">
-					<tab-button v-for="(subtab, id) in subtabs" @selectTab="selectSubtab(id)" :key="id" :activeTab="id === activeSubtab"
+						<tab-button v-for="(subtab, id) in subtabs" @selectTab="selectSubtab(id)" :key="id"
-						:options="subtab" :text="id" />
+							:activeTab="id === activeSubtab" :options="subtab" :text="id" />
 					</sticky>
 					<component v-if="display" :is="display" />
 					<default-layer-tab v-else />
 				</branches>
 			</div>
+			<button v-if="!disableMinimize" class="minimize" @click="toggleMinimized">▼</button>
+		</div>
 	</LayerProvider>
 </template>
 
@@ -26,12 +31,20 @@ export default {
 	props: {
 		layer: String,
 		index: Number,
-		forceFirstTab: Boolean
+		forceFirstTab: Boolean,
+		disableMinimize: Boolean,
+		tab: Function
 	},
 	data() {
 		return { allowGoBack: modInfo.allowGoBack };
 	},
 	computed: {
+		minimized() {
+			return !this.disableMinimize && player.minimized[this.layer];
+		},
+		name() {
+			return layers[this.layer].name;
+		},
 		floating() {
 			return themes[player.theme].floatingTabs;
 		},
@@ -76,19 +89,67 @@ export default {
 			return this.index === 0;
 		}
 	},
+	watch: {
+		minimized(newValue) {
+			const tab = this.tab();
+			if (tab != undefined) {
+				if (newValue) {
+					tab.style.flexGrow = 0;
+					tab.style.flexShrink = 0;
+					tab.style.width = "60px";
+					tab.style.margin = 0;
+				} else {
+					tab.style.flexGrow = null;
+					tab.style.flexShrink = null;
+					tab.style.width = null;
+					tab.style.margin = null;
+				}
+			}
+		}
+	},
+	mounted() {
+		const tab = this.tab();
+		if (tab != undefined) {
+			if (this.minimized) {
+				tab.style.flexGrow = 0;
+				tab.style.flexShrink = 0;
+				tab.style.width = "60px";
+				tab.style.margin = 0;
+			} else {
+				tab.style.flexGrow = null;
+				tab.style.flexShrink = null;
+				tab.style.width = null;
+				tab.style.margin = null;
+			}
+		} else {
+			this.$nextTick(this.mounted);
+		}
+	},
 	methods: {
 		selectSubtab(subtab) {
 			if (player.subtabs[this.layer] == undefined) {
 				player.subtabs[this.layer] = {};
 			}
 			player.subtabs[this.layer].mainTabs = subtab;
+		},
+		toggleMinimized() {
+			player.minimized[this.layer] = !player.minimized[this.layer];
+		},
+		goBack(index) {
+			player.tabs = player.tabs.slice(0, index);
 		}
 	}
 };
 </script>
 
 <style scoped>
-.layer-tab {
+.layer-container {
+	min-width: 100%;
+	min-height: 100%;
+	margin: 0;
+}
+
+.layer-tab:not(.minimized) {
 	padding-top: 50px;
 	padding-bottom: 20px;
 	min-height: 100%;
@@ -97,7 +158,31 @@ export default {
     position: relative;
 }
 
-.inner-tab > .layer-tab {
+.layer-tab.minimized {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    padding: 0;
+    padding-top: 50px;
+    margin: 0;
+    cursor: pointer;
+    font-size: 40px;
+    color: var(--color);
+    border: none;
+    background-color: transparent;
+}
+
+.layer-tab.minimized div {
+    margin: 0;
+	writing-mode: vertical-rl;
+    padding-left: 10px;
+    width: 50px;
+}
+
+.inner-tab > .layer-container > .layer-tab:not(.minimized) {
 	margin: -50px -10px;
 	padding: 50px 10px;
 }
@@ -148,4 +233,40 @@ export default {
 .subtabs:not(.floating):not(.firstTab) {
 	padding-left: 70px;
 }
+
+.minimize {
+    position: absolute;
+    top: 0;
+    right: 15px;
+    background-color: transparent;
+    border: 1px solid transparent;
+    color: var(--color);
+    font-size: 40px;
+    cursor: pointer;
+    line-height: 40px;
+    z-index: 7;
+}
+
+.minimized + .minimize {
+	transform: rotate(-90deg);
+    top: 3px;
+}
+
+.goBack {
+    position: absolute;
+    top: 0;
+    left: 20px;
+    background-color: transparent;
+    border: 1px solid transparent;
+    color: var(--color);
+    font-size: 40px;
+    cursor: pointer;
+    line-height: 40px;
+    z-index: 7;
+}
+
+.goBack:hover {
+    transform: scale(1.1, 1.1);
+    text-shadow: 0 0 7px var(--color);
+}
 </style>

src/components/system/Nav.vue

@@ -181,7 +181,7 @@ export default {
 	.version {
 		margin-left: 12px;
 		margin-right: 12px;
-		margin-bottom: 7px;
+		margin-bottom: 5px;
 		color: var(--points);
 		cursor: pointer;
 	}

src/components/system/Tabs.vue

@@ -1,14 +1,14 @@
 <template>
 	<perfect-scrollbar class="tabs-container">
 		<div class="tabs">
-			<div v-for="(tab, index) in tabs" :key="index" class="tab">
+			<div v-for="(tab, index) in tabs" :key="index" class="tab" :ref="`tab-${index}`">
-				<button v-if="index > 0 && allowGoBack" class="goBack" @click="goBack(index)">←</button>
 				<perfect-scrollbar>
 					<div class="inner-tab">
 						<LayerProvider :layer="tab" :index="index" v-if="tab in components && components[tab]">
 							<component :is="components[tab]" />
 						</LayerProvider>
-						<layer-tab :layer="tab" :index="index" v-else-if="tab in components" />
+						<layer-tab :layer="tab" :index="index" v-else-if="tab in components"
+							:tab="() => $refs[`tab-${index}`] && $refs[`tab-${index}`][0]" />
 						<component :is="tab" :index="index" v-else />
 					</div>
 				</perfect-scrollbar>
@@ -21,14 +21,9 @@
 <script>
 import { mapState } from 'vuex';
 import { layers } from '../../store/layers';
-import { player } from '../../store/proxies';
-import modInfo from '../../data/modInfo.json';
 
 export default {
 	name: 'Tabs',
-	data() {
-		return { allowGoBack: modInfo.allowGoBack };
-	},
 	computed: {
 		...mapState([ 'tabs' ]),
 		components() {
@@ -37,11 +32,6 @@ export default {
 				return acc;
 			}, {});
 		}
-	},
-	methods: {
-		goBack(index) {
-			player.tabs = player.tabs.slice(0, index);
-		}
 	}
 };
 </script>
@@ -60,7 +50,8 @@ export default {
 .tab {
     position: relative;
     height: 100%;
-    width: 100%;
+    flex-grow: 1;
+    transition-duration: 0s;
 }
 
 .tab .ps {
@@ -84,24 +75,6 @@ export default {
 	background: var(--separator);
     z-index: 1;
 }
-
-.goBack {
-    position: absolute;
-    top: 0;
-    left: 20px;
-    background-color: transparent;
-    border: 1px solid transparent;
-    color: var(--color);
-    font-size: 40px;
-    cursor: pointer;
-    line-height: 40px;
-    z-index: 7;
-}
-
-.goBack:hover {
-    transform: scale(1.1, 1.1);
-    text-shadow: 0 0 7px var(--color);
-}
 </style>
 
 <style>

src/components/tree/Tree.vue

@@ -8,7 +8,7 @@
 		</span>
 		<modal :show="showModal" @close="closeModal">
 			<div slot="header"><h2 v-if="modalHeader">{{ modalHeader }}</h2></div>
-			<layer-tab slot="body" v-if="modal" :layer="modal" :index="tab.index" :forceFirstTab="true" />
+			<layer-tab slot="body" v-if="modal" :layer="modal" :index="tab.index" :forceFirstTab="true" :disableMinimize="true" />
 		</modal>
 	</div>
 </template>

src/data/layers/aca/f.js

@@ -29,6 +29,7 @@ export default {
     base: 3,
     roundUpCost: true,
     canBuyMax() {return false},
+    name: "Farms",
     //directMult() {return new Decimal(player.c.otherThingy)},
 
     row: 1,

src/data/mod.js

@@ -38,7 +38,8 @@ const spook = {
 
 const main = {
 	id: 'main',
-	display: '<tree :append="true" />'
+	display: '<tree :append="true" />',
+	name: "Tree"
 }
 
 export const initialLayers = [ main, f, c, a, g, h, spook ];

src/util/load.js

@@ -17,6 +17,7 @@ export function getInitialStore() {
 		hideChallenges: false,
 		theme: "paper",
 		subtabs: {},
+		minimized: {},
 		...getStartingData(),
 		...initialLayers.reduce((acc, layer) => {
 			acc[layer.id] = {