Bring back the old nav (#100)

* Bring back the old nav

* Added bool to settings

* settings wireup

* Fixy fix

* fix create btn

---------

Co-authored-by: thesuzerain <wverchere@gmail.com>
Co-authored-by: Jai A <jaiagr+gpg@pm.me>

theseus/src/state/projects.rs

@@ -361,7 +361,6 @@ pub async fn infer_data_from_files(
                             update_version: update_versions
                                 .get(&hash)
                                 .map(|val| Box::new(val.clone())),
-
                             incompatible: !version.loaders.contains(
                                 &profile
                                     .metadata

theseus/src/state/settings.rs

@@ -24,6 +24,7 @@ pub struct Settings {
     pub hooks: Hooks,
     pub max_concurrent_downloads: usize,
     pub version: u32,
+    pub collapsed_navigation: bool,
 }
 
 impl Default for Settings {
@@ -39,6 +40,7 @@ impl Default for Settings {
             hooks: Hooks::default(),
             max_concurrent_downloads: 64,
             version: CURRENT_FORMAT_VERSION,
+            collapsed_navigation: false,
         }
     }
 }

theseus_gui/src-tauri/src/api/settings.rs

@@ -16,6 +16,7 @@ pub struct FrontendSettings {
     pub hooks: Hooks,
     pub max_concurrent_downloads: usize,
     pub version: u32,
+    pub collapsed_navigation: bool,
 }
 
 // Get full settings
@@ -39,6 +40,7 @@ pub async fn settings_get() -> Result<FrontendSettings> {
         hooks: backend_settings.hooks,
         max_concurrent_downloads: backend_settings.max_concurrent_downloads,
         version: backend_settings.version,
+        collapsed_navigation: backend_settings.collapsed_navigation,
     };
     Ok(frontend_settings)
 }
@@ -76,6 +78,7 @@ pub async fn settings_set(settings: FrontendSettings) -> Result<()> {
         hooks: settings.hooks,
         max_concurrent_downloads: settings.max_concurrent_downloads,
         version: settings.version,
+        collapsed_navigation: settings.collapsed_navigation,
     };
     settings::set(backend_settings).await?;
     Ok(())

theseus_gui/src/App.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import { RouterView, RouterLink } from 'vue-router'
-import { HomeIcon, SearchIcon, LibraryIcon, PlusIcon, SettingsIcon } from 'omorphia'
+import { HomeIcon, SearchIcon, LibraryIcon, PlusIcon, SettingsIcon, Button } from 'omorphia'
 import { useTheming } from '@/store/state'
 import AccountsCard from '@/components/ui/AccountsCard.vue'
 import InstanceCreationModal from '@/components/ui/InstanceCreationModal.vue'
@@ -13,8 +13,9 @@ import RunningAppBar from '@/components/ui/RunningAppBar.vue'
 const themeStore = useTheming()
 
 onMounted(async () => {
-  const { theme } = await get()
-  themeStore.setThemeState(theme)
+  const { settings, collapsed_navigation } = await get()
+  themeStore.setThemeState(settings)
+  themeStore.collapsedNavigation = collapsed_navigation
 })
 
 const installedMods = ref(0)
@@ -30,33 +31,81 @@ list().then(
 
 <template>
   <div class="container">
-    <div class="nav-container">
+    <div class="nav-container" :class="{ expanded: !themeStore.collapsedNavigation }">
       <div class="nav-section">
         <suspense>
-          <AccountsCard ref="accounts" />
+          <AccountsCard ref="accounts" :expanded="!themeStore.collapsedNavigation" />
         </suspense>
         <div class="pages-list">
-          <RouterLink to="/" class="button-base nav-button"><HomeIcon /></RouterLink>
-          <RouterLink to="/browse" class="button-base nav-button"> <SearchIcon /></RouterLink>
-          <RouterLink to="/library" class="button-base nav-button"> <LibraryIcon /></RouterLink>
-          <button
+          <RouterLink
+            to="/"
+            class="btn"
+            :class="{
+              'icon-only': themeStore.collapsedNavigation,
+              'collapsed-button': themeStore.collapsedNavigation,
+              'expanded-button': !themeStore.collapsedNavigation,
+            }"
+          >
+            <HomeIcon />
+            <span v-if="!themeStore.collapsedNavigation">Home</span>
+          </RouterLink>
+          <RouterLink
+            to="/browse"
+            class="btn"
+            :class="{
+              'icon-only': themeStore.collapsedNavigation,
+              'collapsed-button': themeStore.collapsedNavigation,
+              'expanded-button': !themeStore.collapsedNavigation,
+            }"
+          >
+            <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,
+            }"
+          >
+            <LibraryIcon />
+            <span v-if="!themeStore.collapsedNavigation">Library</span>
+          </RouterLink>
+          <Button
             color="primary"
-            class="button-base primary nav-button"
-            icon-only
+            :class="{
+              'icon-only': themeStore.collapsedNavigation,
+              'collapsed-button': themeStore.collapsedNavigation,
+              'expanded-button': !themeStore.collapsedNavigation,
+            }"
             @click="() => $refs.installationModal.show()"
           >
             <PlusIcon />
-          </button>
+            <span v-if="!themeStore.collapsedNavigation" class="no-wrap">New Instance</span>
+          </Button>
           <Suspense>
             <InstanceCreationModal ref="installationModal" />
           </Suspense>
         </div>
       </div>
       <div class="settings pages-list">
-        <RouterLink to="/settings" class="button-base nav-button"><SettingsIcon /></RouterLink>
+        <RouterLink
+          to="/settings"
+          class="btn"
+          :class="{
+            'icon-only': themeStore.collapsedNavigation,
+            'collapsed-button': themeStore.collapsedNavigation,
+            'expanded-button': !themeStore.collapsedNavigation,
+          }"
+        >
+          <SettingsIcon />
+          <span v-if="!themeStore.collapsedNavigation">Settings</span>
+        </RouterLink>
       </div>
     </div>
-    <div class="view">
+    <div class="view" :class="{ expanded: !themeStore.collapsedNavigation }">
       <div class="appbar">
         <section class="navigation-controls">
           <Breadcrumbs />
@@ -86,6 +135,10 @@ list().then(
   .view {
     width: calc(100% - 5rem);
 
+    &.expanded {
+      width: calc(100% - 12rem);
+    }
+
     .appbar {
       display: flex;
       justify-content: space-between;
@@ -171,12 +224,18 @@ list().then(
   box-shadow: var(--shadow-inset-sm), var(--shadow-floating);
   padding: 1rem;
   background: var(--color-raised-bg);
+
+  &.expanded {
+    width: 13rem;
+    max-width: 13rem;
+    min-width: 13rem;
+  }
 }
 
 .pages-list {
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: flex-start;
   justify-content: flex-start;
   width: 100%;
   gap: 0.5rem;
@@ -184,8 +243,6 @@ list().then(
   a {
     display: flex;
     align-items: center;
-    font-size: 0.9rem;
-    font-weight: 400;
     word-spacing: 3px;
     background: inherit;
     transition: all ease-in-out 0.1s;
@@ -194,6 +251,7 @@ list().then(
     &.router-link-active {
       color: var(--color-contrast);
       background: var(--color-button-bg);
+      box-shadow: var(--shadow-floating);
     }
 
     &:hover {
@@ -203,20 +261,6 @@ list().then(
       text-decoration: none;
     }
   }
-}
-
-.nav-button {
-  height: 3rem;
-  width: 3rem;
-  padding: 0.75rem;
-  border-radius: var(--radius-md);
-
-  svg {
-    width: 1.5rem;
-    height: 1.5rem;
-    max-width: 1.5rem;
-    max-height: 1.5rem;
-  }
 
   &.primary {
     color: var(--color-accent-contrast);
@@ -224,6 +268,26 @@ list().then(
   }
 }
 
+.collapsed-button {
+  height: 3rem !important;
+  width: 3rem !important;
+  padding: 0.75rem;
+  border-radius: var(--radius-md);
+  box-shadow: none;
+
+  svg {
+    width: 1.5rem !important;
+    height: 1.5rem !important;
+    max-width: 1.5rem !important;
+    max-height: 1.5rem !important;
+  }
+}
+
+.expanded-button {
+  width: 100%;
+  padding: var(--gap-md) var(--gap-lg);
+}
+
 .instance-list {
   display: flex;
   flex-direction: column;
@@ -245,38 +309,6 @@ list().then(
   }
 }
 
-.add-instance-btn {
-  background-color: var(--color-bg);
-  font-size: 0.9rem;
-  margin-right: 0.6rem;
-
-  svg {
-    background-color: var(--color-green);
-    width: 1.5rem;
-    height: 1.5rem;
-    color: var(--color-accent-contrast);
-    border-radius: var(--radius-xs);
-  }
-}
-
-.settings {
-  svg {
-    color: var(--color-base) !important;
-  }
-
-  a {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: center;
-    gap: 1rem;
-
-    &:hover {
-      text-decoration: none;
-    }
-  }
-}
-
 .user-section {
   display: flex;
   justify-content: flex-start;
@@ -294,14 +326,12 @@ list().then(
 
   .username {
     margin-bottom: 0.3rem;
-    font-size: 1.1rem;
     font-weight: 400;
     line-height: 1.25rem;
     color: var(--color-contrast);
   }
 
   a {
-    font-size: 0.75rem;
     font-weight: 400;
     color: var(--color-secondary);
   }

theseus_gui/src/assets/icons/index.js

@@ -4,3 +4,4 @@ export { default as BrowseIcon } from './folder-search.svg'
 export { default as LoginIcon } from './log-in.svg'
 export { default as StopIcon } from './stop-circle.svg'
 export { default as TerminalIcon } from './terminal-square.svg'
+export { default as UsersIcon } from './users.svg'

theseus_gui/src/assets/icons/users.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>

theseus_gui/src/assets/stylesheets/global.scss

@@ -22,6 +22,12 @@
   white-space: nowrap;
 }
 
+.no-select {
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
 a {
   color: var(--color-link);
   text-decoration: none;

theseus_gui/src/components/ui/AccountsCard.vue

@@ -1,13 +1,23 @@
 <template>
-  <Avatar
-    ref="avatar"
-    class="button-base"
-    size="sm"
-    :src="selectedAccount?.profile_picture ?? ''"
+  <div
+    ref="button"
+    class="button-base avatar-button"
+    :class="{ expanded: expanded }"
     @click="toggle()"
-  />
+  >
+    <Avatar :size="expanded ? 'xs' : 'sm'" :src="selectedAccount?.profile_picture ?? ''" />
+    <div v-show="expanded" class="avatar-text">
+      <div class="text no-select">
+        {{ selectedAccount.username }}
+      </div>
+      <p class="no-select">
+        <UsersIcon />
+        Accounts
+      </p>
+    </div>
+  </div>
   <transition name="fade">
-    <Card v-if="showCard" ref="card" class="account-card">
+    <Card v-if="showCard" ref="card" class="account-card" :class="{ expanded: expanded }">
       <div v-if="selectedAccount" class="selected account">
         <Avatar size="xs" :src="selectedAccount.profile_picture" />
         <div>
@@ -15,7 +25,7 @@
           <p>Selected</p>
         </div>
         <Button icon-only color="raised" @click="logout(selectedAccount.id)">
-          <LogOutIcon />
+          <XIcon />
         </Button>
       </div>
       <div v-else class="logged-out account">
@@ -31,7 +41,7 @@
             <p>{{ account.username }}</p>
           </Button>
           <Button icon-only @click="logout(account.id)">
-            <LogOutIcon />
+            <XIcon />
           </Button>
         </div>
       </div>
@@ -44,9 +54,9 @@
 </template>
 
 <script setup>
-import { Avatar, Button, Card, PlusIcon, LogOutIcon } from 'omorphia'
-import { LoginIcon } from '@/assets/icons'
-import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
+import { Avatar, Button, Card, PlusIcon, XIcon } from 'omorphia'
+import { LoginIcon, UsersIcon } from '@/assets/icons'
+import { ref, defineProps, computed, onMounted, onBeforeUnmount } from 'vue'
 import {
   users,
   remove_user,
@@ -56,6 +66,13 @@ import {
 import { get, set } from '@/helpers/settings'
 import { WebviewWindow } from '@tauri-apps/api/window'
 
+defineProps({
+  expanded: {
+    type: Boolean,
+    required: true,
+  },
+})
+
 const settings = ref(await get())
 
 const appendProfiles = (accounts) => {
@@ -86,7 +103,7 @@ const refreshValues = async () => {
 
 let showCard = ref(false)
 let card = ref(null)
-let avatar = ref(null)
+let button = ref(null)
 
 const setAccount = async (account) => {
   settings.value.default_user = account.id
@@ -95,9 +112,7 @@ const setAccount = async (account) => {
 }
 
 const login = async () => {
-  console.log('login process')
   const url = await authenticate_begin_flow()
-  console.log(url)
 
   const window = new WebviewWindow('loginWindow', {
     url: url,
@@ -128,15 +143,15 @@ const logout = async (id) => {
 
 const toggle = () => {
   showCard.value = !showCard.value
-  console.log('toggled')
 }
 
 const handleClickOutside = (event) => {
+  const elements = document.elementsFromPoint(event.clientX, event.clientY)
   if (
     card.value &&
-    avatar.value.$el !== event.target &&
     card.value.$el !== event.target &&
-    !document.elementsFromPoint(event.clientX, event.clientY).includes(card.value.$el)
+    !elements.includes(card.value.$el) &&
+    !button.value.contains(event.target)
   ) {
     showCard.value = false
   }
@@ -177,8 +192,8 @@ onBeforeUnmount(() => {
   position: absolute;
   display: flex;
   flex-direction: column;
-  top: 0;
-  left: 5rem;
+  top: 0.5rem;
+  left: 5.5rem;
   z-index: 100;
   gap: 0.5rem;
   padding: 1rem;
@@ -191,6 +206,10 @@ onBeforeUnmount(() => {
   &.hidden {
     display: none;
   }
+
+  &.expanded {
+    left: 13.5rem;
+  }
 }
 
 .accounts-title {
@@ -238,4 +257,33 @@ onBeforeUnmount(() => {
 .fade-leave-to {
   opacity: 0;
 }
+
+.avatar-button {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--color-base);
+  background-color: var(--color-bg);
+  border-radius: var(--radius-md);
+  box-shadow: none;
+  width: 100%;
+  text-align: left;
+
+  &.expanded {
+    padding: 1rem;
+  }
+}
+
+.avatar-text {
+  margin: auto 0 auto 0.25rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.text {
+  width: 6rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 </style>

theseus_gui/src/helpers/settings.js

@@ -18,6 +18,7 @@ Settings {
     "hooks": Hooks,
     "max_concurrent_downloads": uint,
     "version": u32,
+    "collapsed_navigation": bool,
 }
 
 Memorysettings {

theseus_gui/src/pages/Settings.vue

@@ -12,6 +12,7 @@ import {
   XIcon,
   PlusIcon,
   AnimatedLogo,
+  Toggle,
 } from 'omorphia'
 import { BrowseIcon } from '@/assets/icons'
 import { useTheming } from '@/store/state'
@@ -46,6 +47,12 @@ const handleTheme = async (e) => {
   await set(settings.value)
 }
 
+const handleCollapse = async (e) => {
+  themeStore.collapsedNavigation = e
+  settings.value.collapsed_navigation = themeStore.collapsedNavigation
+  await set(settings.value)
+}
+
 const loadJavaModal = async (version) => {
   if (version === 17) chosenInstallOptions.value = await find_jre_17_jres()
   else if (version === 8) chosenInstallOptions.value = await find_jre_8_jres()
@@ -175,6 +182,17 @@ const setJavaInstall = (javaInstall) => {
           @change="handleTheme"
         />
       </div>
+      <div class="toggle-setting">
+        <div class="description">
+          <h3>Collapsed navigation mode</h3>
+          <p>Change the style of the side navigation bar</p>
+        </div>
+        <Toggle
+          :model-value="themeStore.collapsedNavigation"
+          :checked="themeStore.collapsedNavigation"
+          @update:model-value="(value) => handleCollapse(value)"
+        />
+      </div>
     </Card>
     <Card class="settings-card">
       <h2 class="settings-title">Java</h2>
@@ -365,6 +383,7 @@ const setJavaInstall = (javaInstall) => {
   margin: 1rem;
   display: flex;
   flex-direction: column;
+  gap: 1rem;
 }
 
 .theming {

theseus_gui/src/store/theme.js

@@ -1,7 +1,12 @@
 import { defineStore } from 'pinia'
 
 export const useTheming = defineStore('themeStore', {
-  state: () => ({ themeOptions: ['light', 'dark'], selectedTheme: 'dark', darkTheme: true }),
+  state: () => ({
+    themeOptions: ['light', 'dark'],
+    collapsedNavigation: false,
+    selectedTheme: 'dark',
+    darkTheme: true,
+  }),
   actions: {
     setThemeState(newTheme) {
       if (this.themeOptions.includes(newTheme)) this.selectedTheme = newTheme