Add expanded sidebar navigation for window > 1200px

SpinShare · May 21, 2024 · 7e1897b · 7e1897b
1 parent bdfda11
commit 7e1897b
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 19 deletions.
diff --git a/SpinShareClient/UserInterface/package.json b/SpinShareClient/UserInterface/package.json
@@ -1,6 +1,6 @@
 {
   "name": "spinshare-ui",
-  "version": "3.0.12",
+  "version": "3.0.13",
   "scripts": {
     "dev": "vite",
     "build": "vite build --emptyOutDir",

diff --git a/SpinShareClient/UserInterface/src/components/DownloadQueue.vue b/SpinShareClient/UserInterface/src/components/DownloadQueue.vue
@@ -139,7 +139,7 @@ const handleRemoveFromQueue = (queueId) => {
 <style lang="scss">
 .download-queue-backdrop {
     position: absolute;
-    left: 60px;
+    left: 300px;
     bottom: 0;
     top: 0;
     right: 0;
@@ -148,6 +148,10 @@ const handleRemoveFromQueue = (queueId) => {
     z-index: 100;
     cursor: pointer;
 
+    @media (max-width: 1200px) {
+        left: 60px;
+    }
+
     & .download-queue {
         cursor: default;
         width: 400px;

diff --git a/SpinShareClient/UserInterface/src/components/SidebarNavigation.vue b/SpinShareClient/UserInterface/src/components/SidebarNavigation.vue
@@ -1,7 +1,16 @@
 <template>
     <aside>
         <div class="brand">
-            <img src="../assets/icon.svg" />
+            <img
+                src="../assets/icon.svg"
+                class="icon"
+                alt="SpinShare Logo"
+            />
+            <img
+                src="../assets/logo.svg"
+                class="logo"
+                alt="SpinShare Logo"
+            />
         </div>
 
         <nav>
@@ -11,34 +20,39 @@
                 v-tooltip.right="t('general.sidebar.frontpage')"
             >
                 <span class="mdi mdi-view-dashboard-outline"></span>
+                <span class="label">{{ t('general.sidebar.frontpage') }}</span>
             </router-link>
             <router-link
                 to="/search"
                 class="item"
                 v-tooltip.right="t('general.sidebar.search')"
             >
                 <span class="mdi mdi-magnify"></span>
+                <span class="label">{{ t('general.sidebar.search') }}</span>
             </router-link>
             <router-link
                 to="/discover/new/0"
                 class="item"
                 v-tooltip.right="t('general.sidebar.new')"
             >
                 <span class="mdi mdi-new-box"></span>
+                <span class="label">{{ t('general.sidebar.new') }}</span>
             </router-link>
             <router-link
                 to="/discover/updated/0"
                 class="item"
                 v-tooltip.right="t('general.sidebar.updated')"
             >
                 <span class="mdi mdi-update"></span>
+                <span class="label">{{ t('general.sidebar.updated') }}</span>
             </router-link>
             <router-link
                 to="/discover/hotThisWeek/0"
                 class="item"
                 v-tooltip.right="t('general.sidebar.trending')"
             >
                 <span class="mdi mdi-fire"></span>
+                <span class="label">{{ t('general.sidebar.trending') }}</span>
             </router-link>
         </nav>
 
@@ -49,6 +63,7 @@
                 v-tooltip.right="t('general.sidebar.library')"
             >
                 <span class="mdi mdi-archive-music-outline"></span>
+                <span class="label">{{ t('general.sidebar.library') }}</span>
             </router-link>
             <div
                 class="item"
@@ -57,6 +72,7 @@
                 @click="toggleDownloadQueue"
             >
                 <span class="mdi mdi-download-box-outline"></span>
+                <span class="label">{{ t('general.sidebar.downloads') }}</span>
                 <div
                     class="badge"
                     v-if="downloadQueueCount !== 0"
@@ -70,6 +86,7 @@
                 v-tooltip.right="t('general.sidebar.settings')"
             >
                 <span class="mdi mdi-cog-outline"></span>
+                <span class="label">{{ t('general.sidebar.settings') }}</span>
             </router-link>
         </nav>
 
@@ -119,39 +136,67 @@ aside {
     display: grid;
     grid-template-rows: auto 1fr auto;
     grid-gap: 15px;
-    justify-content: center;
     align-items: center;
-    padding: 25px 0;
+    padding: 25px;
+    width: 300px;
+
+    @media (max-width: 1200px) {
+        justify-content: center;
+        padding: 25px 0;
+        width: 60px;
+    }
 
     & .brand {
-        width: 42px;
         display: flex;
-        justify-content: center;
         align-items: center;
+        justify-content: center;
+
+        @media (max-width: 1200px) {
+            width: 42px;
+        }
 
         & img {
-            width: 24px;
-            height: 24px;
+            &.icon {
+                width: 24px;
+                height: 24px;
+                display: none;
+
+                @media (max-width: 1200px) {
+                    display: block;
+                }
+            }
+
+            &.logo {
+                height: 24px;
+                display: block;
+
+                @media (max-width: 1200px) {
+                    display: none;
+                }
+            }
         }
     }
 
     & nav {
         display: flex;
         flex-direction: column;
         gap: 10px;
-        align-items: center;
+
+        @media (max-width: 1200px) {
+            align-items: center;
+        }
 
         & .item {
-            width: 42px;
-            height: 42px;
             display: flex;
             border-radius: 100px;
-            justify-content: center;
             align-items: center;
+            gap: 15px;
+            text-decoration: none;
             transition: 0.15s ease-in-out all;
             position: relative;
+            padding: 10px 20px;
 
-            & > span {
+            & .mdi {
                 font-size: 22px;
             }
 
@@ -177,6 +222,17 @@ aside {
                 background: rgba(var(--colorBaseText), 0.07);
                 cursor: pointer;
             }
+
+            @media (max-width: 1200px) {
+                width: 42px;
+                height: 42px;
+                padding: 0;
+                justify-content: center;
+
+                & .label {
+                    display: none;
+                }
+            }
         }
     }
 }

diff --git a/SpinShareClient/UserInterface/src/layouts/AppLayout.vue b/SpinShareClient/UserInterface/src/layouts/AppLayout.vue
@@ -14,9 +14,9 @@ import { inject, onMounted } from 'vue';
 const emitter = inject('emitter');
 
 onMounted(() => {
-  if (window.spinshare.settings.IsConsole) {
-        document.body.classList.add("ui-console");
-    
+    if (window.spinshare.settings.IsConsole) {
+        document.body.classList.add('ui-console');
+
         emitter.emit('console-update-controller-hints', {
             showMenu: false,
             items: [],
@@ -31,14 +31,14 @@ onMounted(() => {
     height: 100%;
     display: grid;
     overflow: hidden;
-    grid-template-columns: 60px 1fr;
+    grid-template-columns: auto 1fr;
 
     & > main {
         overflow-y: auto;
     }
 }
 
 .ui-console .layout-app {
-   grid-template-columns: 1fr;
+    grid-template-columns: 1fr;
 }
 </style>