From 2bea76fc61d1291ab9b36acb9500cddbb8844f0f Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Thu, 24 Jun 2021 00:57:20 -0500
Subject: [PATCH] Made nav more consistent

---
 src/App.vue                    |   2 +-
 src/components/system/Nav.vue  | 305 ++++++++++++++++++---------------
 src/components/system/Tabs.vue |   5 +
 3 files changed, 169 insertions(+), 143 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 39e74cf..f671fb2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
 	<div id="app" @mousemove="updateMouse" :style="theme" :class="{ useHeader }">
-		<Nav />
+		<Nav v-if="useHeader" />
 		<Tabs />
 		<TPS v-if="showTPS" />
 		<GameOverScreen />
diff --git a/src/components/system/Nav.vue b/src/components/system/Nav.vue
index c71981d..719c0ef 100644
--- a/src/components/system/Nav.vue
+++ b/src/components/system/Nav.vue
@@ -3,8 +3,10 @@
 		<div class="nav" v-if="useHeader">
 			<img v-if="banner" :src="banner" height="100%" :alt="title" />
 			<div v-else class="title">{{ title }}</div>
-			<tooltip display="Changelog" bottom><div class="version" @click="openDialog('Changelog')">v{{ version }}</div></tooltip>
-			<div style="flex-grow: 1"></div>
+			<div @click="openDialog('Changelog')" class="version-container">
+				<tooltip display="Changelog" bottom class="version"><span>v{{ version }}</span></tooltip>
+			</div>
+			<div style="flex-grow: 1; cursor: unset;"></div>
 			<div class="discord">
 				<img src="images/discord.png" @click="window.open(discordLink, 'mywindow')" />
 				<ul class="discord-links">
@@ -16,18 +18,34 @@
 					<li><a href="http://discord.gg/wwQfgPa" target="_blank">Jacorb's Games</a></li>
 				</ul>
 			</div>
-			<tooltip display="<span>Info</span>" bottom yoffset="4px">
-				<div class="info" @click="openDialog('Info')"><br/>i</div>
-			</tooltip>
-			<tooltip display="Saves" bottom xoffset="-24px" style="margin-top: 6px">
-				<div class="material-icons saves" @click="openDialog('Saves')">library_books</div>
-			</tooltip>
-			<tooltip display="<span>Options</span>" bottom xoffset="-64px" yoffset="-8px">
-				<img class="options" src="images/options_wheel.png" @click="openDialog('Options')" />
-			</tooltip>
+			<div @click="openDialog('Info')">
+				<tooltip display="<span>Info</span>" bottom class="info"><span>i</span></tooltip>
+			</div>
+			<div @click="openDialog('Saves')">
+				<tooltip display="Saves" bottom class="saves" xoffset="-20px">
+					<span class="material-icons">library_books</span>
+				</tooltip>
+			</div>
+			<div @click="openDialog('Options')">
+				<tooltip display="<span>Options</span>" bottom class="options" xoffset="-70px">
+					<img src="images/options_wheel.png" />
+				</tooltip>
+			</div>
 		</div>
-		<div v-else>
-			<div class="discord overlay">
+		<div v-else class="overlay-nav">
+			<div @click="openDialog('Changelog')" class="version-container">
+				<tooltip display="Changelog" right xoffset="25%" class="version"><span>v{{ version }}</span></tooltip>
+			</div>
+			<div @click="openDialog('Saves')">
+				<tooltip display="Saves" right class="saves"><span class="material-icons">library_books</span></tooltip>
+			</div>
+			<div @click="openDialog('Options')">
+				<tooltip display="<span>Options</span>" right class="options"><img src="images/options_wheel.png" /></tooltip>
+			</div>
+			<div @click="openDialog('Info')">
+				<tooltip display="<span>Info</span>" right class="info"><span>i</span></tooltip>
+			</div>
+			<div class="discord">
 				<img src="images/discord.png" @click="openDiscord" />
 				<ul class="discord-links">
 					<li v-if="discordLink !== 'https://discord.gg/WzejVAx'">
@@ -38,19 +56,6 @@
 					<li><a href="http://discord.gg/wwQfgPa" target="_blank">Jacorb's Games</a></li>
 				</ul>
 			</div>
-			<div class="info overlay" @click="openDialog('Info')"><br/>i</div>
-			<tooltip display="<span>Info</span>" right>
-				<img class="options overlay" src="images/options_wheel.png" @click="openDialog('Saves')" />
-			</tooltip>
-			<tooltip display="Saves" right>
-				<div class="material-icons saves overlay" @click="openDialog('Saves')">library_books</div>
-			</tooltip>
-			<tooltip display="<span>Options</span>" right>
-				<img class="options overlay" src="images/options_wheel.png" @click="openDialog('Options')" />
-			</tooltip>
-			<tooltip display="Changelog" right>
-				<div class="version overlay" @click="openDialog('Changelog')">v{{ version }}</div>
-			</tooltip>
 		</div>
 		<Info :show="showInfo" @openDialog="openDialog" @closeDialog="closeDialog" />
 		<SavesManager :show="showSaves" @closeDialog="closeDialog" />
@@ -92,142 +97,158 @@ export default {
 </script>
 
 <style scoped>
-	.nav {
-		background-color: var(--secondary-background);
-		display: flex;
-		left: 0;
-		right: 0;
-		top: 0;
-		height: 46px;
-		width: 100%;
-		border-bottom: 4px solid var(--separator);
-	}
+.nav {
+	background-color: var(--secondary-background);
+	display: flex;
+	left: 0;
+	right: 0;
+	top: 0;
+	height: 46px;
+	width: 100%;
+	border-bottom: 4px solid var(--separator);
+}
 
-	.title {
-		font-size: 36px;
-		text-align: left;
-		margin-left: 12px;
-	}
+.nav > * {
+    height: 46px;
+    width: 46px;
+    display: flex;
+	cursor: pointer;
+}
 
-	.overlay {
-		z-index: 100;
-	}
+.overlay-nav {
+	position: absolute;
+	top: 10px;
+	left: 10px;
+	display: flex;
+	flex-direction: column;
+	z-index: 1;
+}
 
-	.discord {
-		width: 40px;
-		height: 40px;
-		cursor: pointer;
-	}
+.overlay-nav > * {
+    height: 50px;
+    width: 50px;
+    display: flex;
+	cursor: pointer;
+	margin: 0;
+    align-items: center;
+    justify-content: center;
+}
 
-	.discord.overlay {
-		position: absolute;
-		top: 120px;
-		left: 4px;
-	}
+.title {
+	font-size: 36px;
+	text-align: left;
+	margin-left: 12px;
+	cursor: unset;
+}
 
-	.discord img {
-		width: 100%;
-		height: 100%;
-	}
+.nav > .title {
+	width: unset;
+}
 
-	.discord-links {
-		position: fixed;
-		top: 45px;
-		padding: 20px;
-		right: -280px;
-		width: 200px;
-		transition: right .25s ease;
-		background: var(--secondary-background);
-		z-index: 1;
-	}
+.nav .saves,
+.nav .info {
+    display: flex;
+}
 
-	.discord.overlay .discord-links {
-		top: 160px;
-		right: unset;
-		left: -280px;
-		transition: left .25s ease;
-	}
+.tooltip-container {
+	width: 100%;
+	height: 100%;
+    display: flex;
+}
 
-	.discord-links li {
-		margin-bottom: 4px;
-	}
+.overlay-nav .discord {
+	position: relative;
+}
 
-	.discord:not(.overlay):hover .discord-links {
-		right: 0;
-	}
+.discord img {
+	width: 100%;
+	height: 100%;
+}
 
-	.discord.overlay:hover .discord-links {
-		left: 0;
-	}
+.discord-links {
+	position: fixed;
+	top: 45px;
+	padding: 20px;
+	right: -280px;
+	width: 200px;
+	transition: right .25s ease;
+	background: var(--secondary-background);
+	z-index: 1;
+}
 
-	.info {
-		font-size: 20px;
-		color: var(--link);
-		line-height: 14px;
-		width: 40px;
-		height: 40px;
-		cursor: pointer;
-	}
+.overlay-nav .discord-links {
+	position: absolute;
+    left: -280px;
+    right: unset;
+    transition: left .25s ease;
+}
 
-	.info.overlay {
-		position: absolute;
-		top: 60px;
-		left: 4px;
-	}
+.overlay-nav .discord:hover .discord-links {
+    left: -10px;
+}
 
-	.info:hover {
-		transform: scale(1.2, 1.2);
-		text-shadow: 5px 0 10px var(--link),
-			-3px 0 12px var(--link);
-	}
+.discord-links li {
+	margin-bottom: 4px;
+}
 
-	.saves {
-		font-size: 36px;
-		cursor: pointer;
-	}
+.discord-links li:first-child {
+    font-size: 1.2em;
+}
 
-	.saves:hover {
-		transform: scale(1.2, 1.2);
-		text-shadow: 5px 0 10px var(--color),
-			-3px 0 12px var(--color);
-	}
+*:not(.overlay-nav) .discord:hover .discord-links {
+	right: 0;
+}
 
-	.options {
-		height: 50px;
-		width: 50px;
-		cursor: pointer;
-		transition-duration: .5s;
-	}
+.info {
+	font-size: 30px;
+	color: var(--link);
+	line-height: 14px;
+}
 
-	.options.overlay {
-		position: absolute;
-		top: 0;
-		left: 0;
-	}
+.info:hover span {
+	transform: scale(1.2, 1.2);
+	text-shadow: 5px 0 10px var(--link),
+		-3px 0 12px var(--link);
+}
 
-	.options:hover {
-		transform: rotate(360deg);
-	}
+.saves span {
+	font-size: 36px;
+}
 
-	.version {
-		color: var(--points);
-		cursor: pointer;
-	}
+.saves:hover span {
+	transform: scale(1.2, 1.2);
+	text-shadow: 5px 0 10px var(--color),
+		-3px 0 12px var(--color);
+}
 
-	.version.overlay {
-		position: absolute;
-		right: 4px;
-		top: 4px;
-	}
+.options img {
+	width: 100%;
+	height: 100%;
+}
 
-	.version:hover {
-		transform: scale(1.2, 1.2);
-		text-shadow: 5px 0 10px var(--points), -3px 0 12px var(--points);
-	}
+.options:hover img {
+	transform: rotate(360deg);
+}
 
-	.nav > .title + .tooltip-container {
-		margin-left: 12px;
-		margin-right: 12px;
-		margin-bottom: 5px;
-	}
+.nav .version-container {
+    display: flex;
+    height: 25px;
+    margin-bottom: 0;
+    margin-left: 10px;
+}
+
+.overlay-nav .version-container {
+	width: unset;
+	height: 25px;
+}
+
+.version {
+	color: var(--points);
+}
+
+.version:hover span {
+	transform-origin: 0% 50%;
+	transform: scale(1.2, 1.2);
+	text-shadow: 5px 0 10px var(--points), -3px 0 12px var(--points);
+}
 </style>
diff --git a/src/components/system/Tabs.vue b/src/components/system/Tabs.vue
index 4197d1d..7fdf6cb 100644
--- a/src/components/system/Tabs.vue
+++ b/src/components/system/Tabs.vue
@@ -1,6 +1,7 @@
 <template>
 	<simplebar class="tabs-container">
 		<div v-for="(tab, index) in tabs" :key="index" class="tab" :ref="`tab-${index}`">
+			<Nav v-if="index === 0 && !useHeader" />
 			<simplebar>
 				<div class="inner-tab">
 					<LayerProvider :layer="tab" :index="index" v-if="tab in components && components[tab]">
@@ -17,11 +18,15 @@
 </template>
 
 <script>
+import modInfo from '../../data/modInfo.json';
 import { mapState } from 'vuex';
 import { layers } from '../../store/layers';
 
 export default {
 	name: 'Tabs',
+	data() {
+		return { useHeader: modInfo.useHeader };
+	},
 	computed: {
 		...mapState([ 'tabs' ]),
 		components() {