From 7111bbd1a748bd8c589499fcd780e57ddacd889a Mon Sep 17 00:00:00 2001
From: tersiswilvin <52929976+tersiswilvin@users.noreply.github.com>
Date: Thu, 11 Aug 2022 01:43:20 -0700
Subject: [PATCH] Topbar overhaul

revamped topbar,  and did some small html and css changes throughout the site.
---
 public/css/2018.css                     |  81 ++++++--
 public/css/app.css                      | 247 ++++++++++++++----------
 public/css/classicapp.css               | 106 ++++++++++
 public/css/classicappdark.css           | 106 ++++++++++
 resources/views/auth/register.blade.php |   4 +-
 resources/views/index.blade.php         |   2 +-
 resources/views/layouts/app.blade.php   | 100 +++++-----
 7 files changed, 483 insertions(+), 163 deletions(-)

diff --git a/public/css/2018.css b/public/css/2018.css
index 5830407..d34afb4 100644
--- a/public/css/2018.css
+++ b/public/css/2018.css
@@ -22,6 +22,7 @@ html {
   
   .arkoticon_navbar {
 	margin: 0px;
+	margin-top: -5px;
 	content: url("http://archblox.com/img/ark2018.png");
 	margin-right: 3px;
 	width: 30px;
@@ -32,6 +33,7 @@ body {
 	color: #191919;
 	font-family: "Source Sans Pro",Arial,Helvetica,sans-serif;
 	font-size: 16px;
+	font-size: 100%;
 	width: 100%;
 	height: 100%;
 	margin-bottom: 168px;
@@ -46,7 +48,7 @@ body {
 }
 
 .content {
-	color: #000000;
+	color: #191919;
     background-color: #E3E3E3;
     padding-top: 12px;
     margin: 40px auto 0;
@@ -63,7 +65,7 @@ body {
 	border: 0;
 }
 
-.smallnavbarbutton {
+.Redesign .smallnavbarbutton {
 	color: #191919;
 	display: flex;
 	margin: 3px;
@@ -72,6 +74,9 @@ body {
 	line-height: 1.92857;
 	height: 28px;
 }
+.Redesign .smallnavbarbutton:hover {
+	background: transparent;
+}
 
 #alert, #success {
 	top: 40px;
@@ -160,6 +165,10 @@ body {
     background-position: -28px -475px;
 }
 
+.navbarbuttoncontainer li:hover {
+	background: none;
+  }
+
 .smallnavbarbutton:nth-child(6):before {
     content: '';
     background-image: url(https://images.rbxcdn.com/f4000b6d03a0df7153556d2514045629-navigation_10022018.svg);
@@ -174,8 +183,9 @@ body {
 	margin-right: 3px;
 }
 
-.navbar {
+.BannerRedesign {
 	background: #0074bd;
+	border: 0;
 	height: 40px;
 	padding: 0;
 	top: 0;
@@ -188,7 +198,18 @@ body {
 	transform: translateZ(0);
 }
 
-.smallnav {
+#NavigationRedesignBannerContainer {
+	height: 40px;
+	margin: 0;
+	width: 100%;
+}
+.subbar {
+	top: 0;
+	height: 0;
+	width: 0;
+	background: #fff;
+}
+.Redesign .subMenu {
 	-webkit-transform: translateZ(0);
 	transform: translateZ(0);
 	-ms-transform: none;
@@ -266,13 +287,11 @@ body {
 }
 #logo_small img, #smallnav_open img {
 	padding: 5px 0;
-	padding-top: 7px;
 	width: 30px;
 	height: 30px;
 }
 #logo_full img {
 	padding: 5px 0;
-	padding-top: 10px;
 	max-width: 120px;
 	height: 30px;
 }
@@ -284,17 +303,32 @@ body {
 	background-size: auto auto;
 	width: 30px;
 	margin: 0px;
-	margin-top: 1px;
+	margin-top: 6px;
 	margin-left: 10px;
 	height: 30px;
+	float: left;
+}
+
+#NavigationRedesignBannerContainer p {
+	color: #fff;
+}
+
+#logo_full, #logo_full img {
+	height: 30px;
 }
 
-
 .navbarbuttoncontainer {
 	display: flex;
+	min-height: 40px;
+}
+.navbarbuttoncontainer li {
+	padding: 0;
+	padding-left: 5px;
+	height: 40px
 }
 .navbarbutton {
 	color: #fff;
+	font-family: "Source Sans Pro",Arial,Helvetica,sans-serif;
 	padding: 6px 9px;
 	width: auto;
 	font-size: 16px;
@@ -306,6 +340,9 @@ body {
 	margin: 4px auto;
 	top: 0;
 }
+#NavigationRedesignBannerContainer {
+	font-family: "Source Sans Pro",Arial,Helvetica,sans-serif;
+}
 .navbarbutton:hover {
     background-color: #191919;
     background-color: rgba(25,25,25,.1);
@@ -488,11 +525,19 @@ iframe {
 	padding-bottom: 40px
 }
 
+#logo_full {
+	display: none;
+  }
+  
+  #logo_small {
+	display: block;
+  }
+
 @media (min-width: 1688px) {
 	#smallnav_open {
 		display: none;
 	}
-	.smallnav {
+	.subbar {
 		display: block;
 	}
 	#logo_full img, #logo_full {
@@ -504,6 +549,13 @@ iframe {
 		width: calc(100% - 250px);
 		padding-right: 10px;
 	}
+	#logo_full {
+		display: block;
+	}
+	
+	#logo_small {
+		display: none;
+	}
 }
 @media (max-width: 970px) {
 	.navbarbuttoncontainer a {
@@ -518,15 +570,22 @@ iframe {
 }
 @media (max-width: 767px) {
 	.navbarbuttoncontainer a {
-		font-size: 12px;
+		font-size: 10px;
 		line-height: 1.9em;
 		top: 0px;
 	}
 }
 @media (max-width: 560px) {
 	.navbarbuttoncontainer a {
-		font-size: 10px;
+		font-size: 8px;
 		line-height: 2.2em;
 		top: 0px;
 	}
 }
+@media (max-width: 560px) {
+	.navbarbuttoncontainer a {
+		font-size: 6px;
+		line-height: 3.5em;
+		top: 0px;
+	}
+}
diff --git a/public/css/app.css b/public/css/app.css
index f1ce0ea..b92884d 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -40,16 +40,9 @@
 }
 
 .arkotcontainer {
-  position: relative;
-  padding-right: 10px;
-  margin-right: 0%;
-  margin-left: auto;
   display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-content: center;
-  justify-content: center;
-  align-items: center;
+  float: left;
+  padding: 0 5px;
 }
 
 .smallnavbarbuttoncontainer {
@@ -84,6 +77,10 @@
   text-align: center;
 }
 
+.navbarbuttoncontainer li:hover {
+  background: linear-gradient(180deg, rgb(255,255,255,.3), transparent);
+}
+
 #alert {
   background: linear-gradient(#f07575 10%, #de2323 100%);
 }
@@ -95,40 +92,44 @@
 .warningtext {
   color: red;
 }
+.helpfultip {
+  color: orange;
+  font-weight: 600;
+}
 
 #logo_full {
-  display: none;
+  display: inline-block;
+  float: left;
+}
+#logo_full, #logo_full img {
+  width: 200px;
+  Height: 35px;
 }
 
+/*Left in for compatibility for older themes --// TersisWilvin 2022 \\--*/
 #logo_small {
-  display: block;
+  display: none;
+  float: left;
 }
-
-@media (min-width: 1688px) {
-  #logo_full {
-    display: block;
-  }
-
-  #logo_small {
-    display: none;
-  }
-}
-
-@media (max-width: 730px) {
-  .navbarbuttoncontainer a {
-    position: relative;
-  }
+#logo_small, #logo_small img {
+  width: 45px;
+  height: 35px; 
 }
 
 @media (max-width: 970px) {
   .navbarbuttoncontainer a, #navbarusername, .arkotcontainer p, #navbarlogincontainer {
-    font-size: 14px;
+    font-size: 11px;
+  }
+  .arkoticon_navbar {
+    width: 11px;
   }
 }
-
-@media (max-width: 640px) {
+@media (max-width: 730px) {
+  .navbarbuttoncontainer a {
+    position: relative;
+  }
   .navbarbuttoncontainer a, #navbarusername, .arkotcontainer p, #navbarlogincontainer {
-    font-size: 12px;
+    font-size: 9px;
   }
 }
 
@@ -160,28 +161,82 @@
   background: linear-gradient(#cacbcc 10%, #606060 100%);
 }
 
-.navbar {
-  height: 40px;
-  margin: 0px;
-  padding-right: 5px;
-  align-content: center;
-  padding-left: 5px;
-  padding-top: 2px;
+#NavigationRedesignBannerContainer {
+  text-align: left;
+  position: relative;
+  height: 36px;
+  z-index: 200;
+  font-family: Arial,Helvetica,sans-serif;
+}
+.BannerCenterContainer {
+  width: 970px;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+}
+.BannerRedesign {
+  height: 35px;
+  background: #114081;
+  background: linear-gradient(#1951A5 0%, #114081);
+  border-bottom: 1px solid #0A2246;
   position: fixed;
-  top: 0px;
-  padding-bottom: 2px;
-  color: white;
-  line-height: normal;
-  z-index: 100;
-  display: inline-flex;
-  vertical-align: middle;
   width: 100%;
-  background: #2362DE;
-  /* Fallback for IE 11*/
-  background: linear-gradient(#5082ed 10%, #0a44b7 100%);
+  z-index: 10001;
+  top: 0;
+  display: inline-flex;
+}
+.subbar {
+  display: block;
+  height: 25px;
+  width: 100%;
+  top: 36px;
+  position: relative;
+  background: linear-gradient(#000 10%, #191919 100%);
+}
+.subMenu {
+  background: #A3514F;
+  background-repeat: repeat-x;
+  color: White;
+  font-family: Arial,Helvetica,Sans-Serif;
+  font-size: 14px;
+  height: 26px;
+  position: relative;
+  border-left: solid 3px #6E99C9;
+  border-right: solid 3px #6E99C9;
+  border-bottom: solid 3px #6E99C9;
+  z-index: 5;
+}
+.subMenu {
+  width: 970px;
+  height: 30px;
+  border: none;
+  text-align: left;
+  background: #363636;
+  z-index: 200;
+  margin: 0 auto;
+}
+.Redesign .subMenu {
+  height: 25px;
+  background: linear-gradient(#000 10%, #191919 100%);
+}
+
+.navbarbuttoncontainer {
+  display: inline-block;
+  min-height: 36px;
+  z-index: 1000;
+  float: left;
+}
+.navbarbuttoncontainer li {
+  float: left;
+  list-style: none;
+  margin: 0;
+  padding: 7px 8px 0 8px;
+  height: 28px;
+  font-size: 14px;
+  cursor: pointer;
+  font-weight: bold;
 }
 
-.navbarbuttoncontainer,
 .navbarlogincontainer {
   padding-left: 5px;
   vertical-align: middle;
@@ -213,8 +268,7 @@ iframe {
   padding: 3px;
 }
 
-#navbarlogincontainer,
-#navbarsignedincontainer {
+#navbarlogincontainer, #navbarsignedincontainer {
   position: relative;
   padding-right: 10px;
   margin-right: 0%;
@@ -227,10 +281,6 @@ iframe {
   align-items: center;
 }
 
-#navbarlogincontainer {
-  margin-left: auto;
-}
-
 #profilefriendscontainer p,
 #profilefriendscontainer a {
   display: inline;
@@ -334,11 +384,27 @@ iframe {
   margin-left: 75%;
 }
 
-.navbarbutton {
+.RightNav {
+  margin-top: 6px;
+  float: right;
   position: relative;
-  padding-right: 5px;
-  text-align: center;
-  font-size: 18px;
+}
+#navbarlogincontainer {
+  margin-top: 9px;
+  float: right;
+  position: relative;
+}
+#NavigationRedesignBannerContainer .RightNav {
+  margin-top: 9px;
+}
+
+.navbarbutton {
+  border: 0 solid black;
+  font-size: 13px;
+  padding: 0;
+  text-decoration: none;
+  outline: none;
+  font-family: Arial,Helvetica,sans-serif;
 }
 
 .smallnavbarbutton {
@@ -347,26 +413,13 @@ iframe {
   text-align: center;
   font-size: 15px;
 }
-
-.smallnav {
-  height: 25px;
-  margin: 0px;
-  padding-left: 10px;
-  padding-right: 5px;
-  position: fixed;
-  z-index: 100;
-  top: 43px;
-  padding-top: 2px;
-  padding-bottom: 2px;
-  display: inline-flex;
-  vertical-align: middle;
-  width: 100%;
-  line-height: normal;
-  color: rgb(255, 255, 255);
-  text-size-adjust: auto;
-  text-align: left;
-  background: #000000;
-  background: linear-gradient(#303030 10%, #000000 100%);
+.Redesign .smallnavbarbutton {
+  font-size: 12px;
+  padding: 5px;
+  line-height: 26px;
+}
+.Redesign .smallnavbarbutton:hover {
+  background: linear-gradient(0deg,#191919 10%, #474747 100%);
 }
 
 .invisible,
@@ -418,32 +471,29 @@ body {
 
 .content {
   color: black;
-  margin: auto;
-  margin-top: 105px;
-  margin-left: 10px;
-  margin-right: 10px;
-  padding-left: 5px;
-  padding-right: 5px;
-  min-height: 300px;
+  min-height: 550px;
+  padding: 5px 5px 25px 5px;
+  margin: 100px auto 0 auto;
+  width: 970px;
   background: rgb(255, 255, 255);
   /* Fallback for IE 11*/
   background-color: rgb(255, 255, 255);
-  padding-bottom: 5px;
-  padding-top: 5px;
 }
 
 .content_signup {
   color: black;
-  max-width: 500px;
-  margin: auto;
-  margin-top: 30px;
-  padding-left: 5px;
-  padding-right: 5px;
+  width: 970px;
+  padding: 5px;
+  margin: 30px auto 0 auto;
   background: rgb(255, 255, 255);
   /* Fallback for IE 11*/
   background-color: rgb(255, 255, 255);
-  padding-bottom: 5px;
-  padding-top: 5px;
+}
+.content_signup a[href="https://discord.gg/nudzQ7hkWY"]{
+  display: block;
+}
+.content_signup h1, .content_signup a, .content_signup p {
+  text-align: center;
 }
 
 .content_signup button {
@@ -575,12 +625,9 @@ button:hover.greenbutton {
 
 #footer_signup {
   text-align: center;
-  max-width: 500px;
-  margin: auto;
-  padding-left: 5px;
-  padding-right: 5px;
-  padding-bottom: 5px;
-  padding-top: 5px;
+  width: 970px;
+  margin: auto auto;
+  padding: 1em 5px;
   background: rgb(172, 172, 172);
   /* Fallback for IE 11*/
   background-color: rgb(172, 172, 172);
diff --git a/public/css/classicapp.css b/public/css/classicapp.css
index e81295d..b920ed8 100644
--- a/public/css/classicapp.css
+++ b/public/css/classicapp.css
@@ -16,4 +16,110 @@ html {
 
 .content {
   margin-top: 105px;
+}
+
+#logo_full {
+  display: none;
+}
+
+#logo_small {
+  display: block;
+}
+
+#NavigationRedesignBannerContainer {
+  font-family: "Helvetica";
+  height: 40px;;
+}
+
+.BannerCenterContainer {
+  width: 100%;
+}
+
+#logo_full, #logo_full img {
+  width: 200px;
+  Height: 40px;
+}
+
+.navbarbuttoncontainer li:hover {
+	background: none;
+  }
+
+.BannerRedesign {
+  height: 40px;
+  margin: 0px;
+  padding-right: 5px;
+  align-content: center;
+  padding-left: 5px;
+  padding-top: 2px;
+  position: fixed;
+  top: 0px;
+  padding-bottom: 2px;
+  color: white;
+  line-height: normal;
+  z-index: 100;
+  display: inline-flex;
+  vertical-align: middle;
+  width: 100%;
+  background: #2362DE;
+  background: linear-gradient(#5082ed 10%, #0a44b7 100%);
+  border: 0;
+}
+.Redesign .subMenu {
+  height: 25px;
+  margin: 0px;
+  padding-left: 10px;
+  padding-right: 5px;
+  position: fixed;
+  z-index: 100;
+  top: 43px;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  display: inline-flex;
+  vertical-align: middle;
+  width: 100%;
+  line-height: normal;
+  color: rgb(255, 255, 255);
+  text-size-adjust: auto;
+  text-align: left;
+  background: #000000;
+  background: linear-gradient(#303030 10%, #000000 100%);
+}
+.navbarbuttoncontainer {
+  padding-left: 5px;
+}
+.navbarbuttoncontainer li {
+  padding: 0;
+  vertical-align: middle;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: center;
+  justify-content: center;
+  align-items: center;
+  height: 40px;
+}
+.navbarbutton {
+  position: relative;
+  padding-right: 5px;
+  text-align: center;
+  font-size: 18px;
+  font-family: "Helvetica";
+  font-weight: bold;
+}
+.Redesign .smallnavbarbutton {
+  position: relative;
+  padding: 0;
+  padding-right: 5px;
+  text-align: center;
+  font-size: 15px;
+}
+
+@media (min-width: 1688px) {
+  #logo_full {
+    display: block;
+  }
+
+  #logo_small {
+    display: none;
+  }
 }
\ No newline at end of file
diff --git a/public/css/classicappdark.css b/public/css/classicappdark.css
index a16be9d..6d1ce00 100644
--- a/public/css/classicappdark.css
+++ b/public/css/classicappdark.css
@@ -16,4 +16,110 @@ html {
 
 .content {
   margin-top: 105px;
+}
+
+#logo_full {
+  display: none;
+}
+
+#logo_small {
+  display: block;
+}
+
+#NavigationRedesignBannerContainer {
+  font-family: "Helvetica";
+  height: 40px;
+}
+
+.BannerCenterContainer {
+  width: 100%;
+}
+
+#logo_full, #logo_full img {
+  width: 200px;
+  Height: 40px;
+}
+
+.navbarbuttoncontainer li:hover {
+	background: none;
+  }
+
+.BannerRedesign {
+  height: 40px;
+  margin: 0px;
+  padding-right: 5px;
+  align-content: center;
+  padding-left: 5px;
+  padding-top: 2px;
+  position: fixed;
+  top: 0px;
+  padding-bottom: 2px;
+  color: white;
+  line-height: normal;
+  z-index: 100;
+  display: inline-flex;
+  vertical-align: middle;
+  width: 100%;
+  background: #2362DE;
+  background: linear-gradient(#3690df 10%, #0d1085 100%);
+  border: 0;
+}
+.Redesign .subMenu {
+  height: 25px;
+  margin: 0px;
+  padding-left: 10px;
+  padding-right: 5px;
+  position: fixed;
+  z-index: 100;
+  top: 43px;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  display: inline-flex;
+  vertical-align: middle;
+  width: 100%;
+  line-height: normal;
+  color: rgb(255, 255, 255);
+  text-size-adjust: auto;
+  text-align: left;
+  background: #000000;
+  background: linear-gradient(#303030 10%, #000000 100%);
+}
+.navbarbuttoncontainer {
+  padding-left: 5px;
+}
+.navbarbuttoncontainer li {
+  padding: 0;
+  vertical-align: middle;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: center;
+  justify-content: center;
+  align-items: center;
+  height: 40px;
+}
+.navbarbutton {
+  position: relative;
+  padding-right: 5px;
+  text-align: center;
+  font-size: 18px;
+  font-family: "Helvetica";
+  font-weight: bold;
+}
+.Redesign .smallnavbarbutton {
+  position: relative;
+  padding: 0;
+  padding-right: 5px;
+  text-align: center;
+  font-size: 15px;
+}
+
+@media (min-width: 1688px) {
+  #logo_full {
+    display: block;
+  }
+
+  #logo_small {
+    display: none;
+  }
 }
\ No newline at end of file
diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php
index 1354e63..6378644 100644
--- a/resources/views/auth/register.blade.php
+++ b/resources/views/auth/register.blade.php
@@ -53,8 +53,8 @@
     <br>
     <h3>Password</h3>
     <input id="password" type="password" name="password" required autocomplete="password">
-    <p>Don't reuse passwords, and don't use a simple one!</p>
-    <p>Passwords must be 8 or more characters, with 1 capital letter, 1 symbol and 1 number.</p>
+    <p class="helpfultip">Don't reuse or use weak passwords!</p>
+    <p>Recommend to be 8 or more characters, with atleast 1 capital letter, 1 symbol and 1 number.</p>
     @error('password')
     <div class="invalid-feedback" style="color:red">
         <strong>{{ $message }}</strong>
diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php
index 122bd49..33fb7f1 100644
--- a/resources/views/index.blade.php
+++ b/resources/views/index.blade.php
@@ -12,7 +12,7 @@
 <h1>Welcome to ARCHBLOX!</h1>
 <p>ARCHBLOX is a Work-In-Progress revival.</p>
 <br>
-<p><a alt="Log In button" href="{{ route('login') }}">Log In</a> | <a alt="Sign Up button" href="{{ route('register') }}">Sign Up</a></p>
+<p><a alt="Sign Up button" href="{{ route('register') }}" >Sign Up</a> or <a alt="Log In button" href="{{ route('login') }}">Login</a></p>
 <br>
 <a href="https://discord.gg/nudzQ7hkWY">Join our Discord!</a>
 @endsection
\ No newline at end of file
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 9c2f688..f4836a7 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -88,57 +88,59 @@
 </head>
 
 <body>
-    <div class="navbar">
-        @auth
-        @switch (Auth::user()->settings->theme)
-        @case(2)
-        <a id="smallnav_open"></a>
-        <script>
-        function third() {
-            document.querySelector('.smallnav').classList.toggle('invisible_navbar');
-        }
-        document.querySelector('#smallnav_open').addEventListener('click', third);
-        </script>
-        @break
-        @default
-        @endswitch
-        @endauth
-        <a id="logo_full" href="{{ route('home') }}"><img alt="ARCHBLOX Logo" src="{{ asset('img/MORBLOXlogo.png') }}"
-                width="200" height="40" /></a>
-        <a id="logo_small" href="{{ route('home') }}"><img alt="ARCHBLOX Logo"
-                src="{{ asset('img/MORBLOXlogoshort.png') }}" width="45" height="40" /></a>
-        <div class="navbarbuttoncontainer">
-            <a class="navbarbutton" id="smallbtn5" href="{{ route('incomplete') }}">Games</a>
-            <a class="navbarbutton" id="smallbtn4" href="{{ route('catalog') }}">Catalog</a>
-            <a class="navbarbutton" id="smallbtn0" href="{{ route('incomplete') }}">Build</a>
-            <a class="navbarbutton" id="smallbtn2" href="@guest {{ route('login') }}
-@else
-{{ route('profile', Auth::id()) }} @endguest">Profile</a>
-            <a class="navbarbutton" id="smallbtn3" href="{{ route('settings') }}">Settings</a>
-        </div>
-        @guest
-        <div id="navbarlogincontainer">
-            <p><a href="{{ route('register') }}">Sign Up</a> or <a href="{{ route('login') }}">Log In</a></p>
-        </div>
-        @else
-        <div class="arkotcontainer"><img class="arkoticon_navbar" src="{{ asset('img/arkot.png') }}">
-            <p> {{ Auth::user()->morbux }}</p>
-        </div>
-        <div id="navbarsignedincontainer">
-            <p class="nonbolded" id="navbarusername"><a
-                    href="@guest {{ route('login') }} @else {{ route('profile', Auth::id()) }} @endguest">{{ Auth::user()->name }}</a>
-                | <a href="{{ route('logout') }}" onclick="event.preventDefault();
-                    document.getElementById('logout-form').submit();">Log
-                    out...</a></p>
-        </div>
+    <div class="BannerRedesign">
+        <div ID="NavigationRedesignBannerContainer" class="BannerCenterContainer">
+            @auth
+            @switch (Auth::user()->settings->theme)
+            @case(2)
+            <a id="smallnav_open"></a>
+            <script>
+            function third() {
+                document.querySelector('.subbar.Redesign').classList.toggle('invisible_navbar');
+            }
+            document.querySelector('#smallnav_open').addEventListener('click', third);
+            </script>
+            @break
+            @default
+            @endswitch
+            @endauth
+            <a id="logo_full" href="{{ route('home') }}"><img alt="ARCHBLOX Logo" src="{{ asset('img/MORBLOXlogo.png') }}"/></a>
+            <a id="logo_small" href="{{ route('home') }}"><img alt="ARCHBLOX Logo"
+                    src="{{ asset('img/MORBLOXlogoshort.png') }}"/></a>
+            <div class="navbarbuttoncontainer">
+                <li><a class="navbarbutton" id="smallbtn5" href="{{ route('incomplete') }}">Games</a></li>
+                <li><a class="navbarbutton" id="smallbtn4" href="{{ route('catalog') }}">Catalog</a></li>
+                <li><a class="navbarbutton" id="smallbtn0" href="{{ route('incomplete') }}">Build</a></li>
+                <li><a class="navbarbutton" id="smallbtn2" href="@guest {{ route('login') }}
+    @else
+    {{ route('profile', Auth::id()) }} @endguest">Profile</a></li>
+                <li><a class="navbarbutton" id="smallbtn3" href="{{ route('settings') }}">Settings</a><li>
+            </div>
+            @guest
+            <div id="navbarlogincontainer">
+                <p><a href="{{ route('register') }}">Sign Up</a> or <a href="{{ route('login') }}">Login</a></p>
+            </div>
+            @else
+            <div id="HeaderLoginButton" class="RightNav">
+                <div class="arkotcontainer"><img class="arkoticon_navbar" src="{{ asset('img/arkot.png') }}">
+                    <p> {{ Auth::user()->morbux }}</p>
+                </div>
+                <div id="navbarsignedincontainer">
+                    <p class="nonbolded" id="navbarusername"><a
+                            href="@guest {{ route('login') }} @else {{ route('profile', Auth::id()) }} @endguest">{{ Auth::user()->name }}</a> | <a href="{{ route('logout') }}" onclick="event.preventDefault();
+                            document.getElementById('logout-form').submit();">Logout</a></p>
+                </div>
+            </div>
 
-        <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display:none">
-            @csrf
-        </form>
-        @endguest
+            <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display:none">
+                @csrf
+            </form>
+            @endguest
+            </div>
+        </div>
     </div>
-    <div class="smallnav invisible_navbar">
-        <div class="smallnavbarbuttoncontainer">
+    <div class="subbar Redesign invisible_navbar">
+        <div class="subMenu">
             <a class="smallnavbarbutton" href="{{ route('friends') }}">Friends @if (!Auth::guest() &&
                 count(Auth::user()->getFriendRequests()))
                 <span class="warningtext">({{ count(Auth::user()->getFriendRequests()) }})</span>