From ce01ee6a2d52ef27d4e37294e2d04e9c4c3e17ed Mon Sep 17 00:00:00 2001
From: "Adrian O.V" <83074853+CodexAdrian@users.noreply.github.com>
Date: Thu, 27 Jul 2023 03:08:05 -0400
Subject: [PATCH] Fix homepage (#364)

* Fix collapsed things not working properly

* Fix spacing problem

* lint
---
 theseus_gui/src/App.vue | 56 ++++-------------------------------------
 1 file changed, 5 insertions(+), 51 deletions(-)

diff --git a/theseus_gui/src/App.vue b/theseus_gui/src/App.vue
index 88cfc29d8..896286822 100644
--- a/theseus_gui/src/App.vue
+++ b/theseus_gui/src/App.vue
@@ -161,32 +161,18 @@ const accounts = ref(null)
         <div class="pages-list">
           <RouterLink to="/" class="btn icon-only collapsed-button">
             <HomeIcon />
-            <span v-if="!themeStore.collapsedNavigation">Home</span>
           </RouterLink>
           <RouterLink
             to="/browse/modpack"
-            class="btn"
+            class="btn icon-only collapsed-button"
             :class="{
-              'icon-only': themeStore.collapsedNavigation,
-              'collapsed-button': themeStore.collapsedNavigation,
-              'expanded-button': !themeStore.collapsedNavigation,
               'router-link-active': isOnBrowse,
             }"
           >
             <SearchIcon />
-            <span v-if="!themeStore.collapsedNavigation">Browse</span>
           </RouterLink>
-          <RouterLink
-            to="/library"
-            class="btn"
-            :class="{
-              'icon-only': themeStore.collapsedNavigation,
-              'collapsed-button': themeStore.collapsedNavigation,
-              'expanded-button': !themeStore.collapsedNavigation,
-            }"
-          >
+          <RouterLink to="/library" class="btn icon-only collapsed-button">
             <LibraryIcon />
-            <span v-if="!themeStore.collapsedNavigation">Library</span>
           </RouterLink>
           <Suspense>
             <InstanceCreationModal ref="installationModal" />
@@ -195,32 +181,17 @@ const accounts = ref(null)
       </div>
       <div class="settings pages-list">
         <Button
-          class="sleek-primary"
-          :class="{
-            'icon-only': themeStore.collapsedNavigation,
-            'collapsed-button': themeStore.collapsedNavigation,
-            'expanded-button': !themeStore.collapsedNavigation,
-          }"
+          class="sleek-primary icon-only collapsed-button"
           @click="() => $refs.installationModal.show()"
         >
           <PlusIcon />
-          <span v-if="!themeStore.collapsedNavigation" class="no-wrap">New instance</span>
         </Button>
-        <RouterLink
-          to="/settings"
-          class="btn"
-          :class="{
-            'icon-only': themeStore.collapsedNavigation,
-            'collapsed-button': themeStore.collapsedNavigation,
-            'expanded-button': !themeStore.collapsedNavigation,
-          }"
-        >
+        <RouterLink to="/settings" class="btn icon-only collapsed-button">
           <SettingsIcon />
-          <span v-if="!themeStore.collapsedNavigation">Settings</span>
         </RouterLink>
       </div>
     </div>
-    <div class="view" :class="{ expanded: !themeStore.collapsedNavigation }">
+    <div class="view">
       <div class="appbar-row">
         <div data-tauri-drag-region class="appbar">
           <section class="navigation-controls">
@@ -330,10 +301,6 @@ const accounts = ref(null)
   overflow: hidden;
 
   .view {
-    &.expanded {
-      --sidebar-width: 13rem;
-    }
-
     width: calc(100% - var(--sidebar-width));
 
     .appbar {
@@ -370,14 +337,6 @@ const accounts = ref(null)
   background-color: var(--color-raised-bg);
   box-shadow: var(--shadow-inset-sm), var(--shadow-floating);
   padding: var(--gap-md);
-
-  &.expanded {
-    --sidebar-width: 13rem;
-
-    width: var(--sidebar-width);
-    max-width: var(--sidebar-width);
-    min-width: var(--sidebar-width);
-  }
 }
 
 .pages-list {
@@ -432,11 +391,6 @@ const accounts = ref(null)
   }
 }
 
-.expanded-button {
-  width: 100%;
-  padding: var(--gap-md) var(--gap-lg);
-}
-
 .instance-list {
   display: flex;
   flex-direction: column;