Update:Show siderail on all pages not just library pages

client/components/app/SideRail.vue

@@ -1,6 +1,9 @@
 <template>
-  <div class="w-20 bg-bg h-full relative box-shadow-side z-40" style="min-width: 80px">
-    <div class="absolute top-0 -right-4 w-4 bg-bg h-10 pointer-events-none" />
+  <!-- <div class="w-20 bg-bg h-full relative box-shadow-side z-40" style="min-width: 80px"> -->
+  <div class="w-20 bg-bg h-full fixed left-0 box-shadow-side z-40" style="min-width: 80px" :style="{ top: offsetTop + 'px' }">
+    <!-- ugly little workaround to cover up the shadow overlapping the bookshelf toolbar -->
+    <div v-if="isShowingBookshelfToolbar" class="absolute top-0 -right-4 w-4 bg-bg h-10 pointer-events-none" />
+
     <nuxt-link :to="`/library/${currentLibraryId}`" class="w-full h-20 flex flex-col items-center justify-center text-white border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="homePage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
       <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
@@ -79,6 +82,13 @@ export default {
     return {}
   },
   computed: {
+    isShowingBookshelfToolbar() {
+      if (!this.$route.name) return false
+      return this.$route.name.startsWith('library')
+    },
+    offsetTop() {
+      return 64
+    },
     showExperimentalFeatures() {
       return this.$store.state.showExperimentalFeatures
     },

client/layouts/default.vue

@@ -2,7 +2,10 @@
   <div class="text-white max-h-screen h-screen overflow-hidden bg-bg">
     <app-appbar />
 
+    <app-side-rail v-if="isShowingSideRail" class="hidden md:block" />
+    <div id="app-content" class="h-full" :class="{ 'has-siderail': isShowingSideRail }">
       <Nuxt />
+    </div>
 
     <app-stream-container ref="streamContainer" />
 
@@ -45,6 +48,13 @@ export default {
     },
     isCasting() {
       return this.$store.state.globals.isCasting
+    },
+    isShowingSideRail() {
+      if (!this.$route.name) return false
+      return !this.$route.name.startsWith('config')
+    },
+    appContentMarginLeft() {
+      return this.isShowingSideRail ? 80 : 0
     }
   },
   methods: {
@@ -551,4 +561,13 @@ export default {
 .Vue-Toastification__toast-body.custom-class-1 {
   font-size: 14px;
 }
+
+#app-content {
+  width: 100%;
+}
+#app-content.has-siderail {
+  width: calc(100% - 80px);
+  max-width: calc(100% - 80px);
+  margin-left: 80px;
+}
 </style>

client/pages/library/_library/authors/index.vue

@@ -1,8 +1,5 @@
 <template>
   <div class="page" :class="streamLibraryItem ? 'streaming' : ''">
-    <div class="flex h-full">
-      <app-side-rail class="hidden md:block" />
-      <div class="flex-grow">
     <app-book-shelf-toolbar is-home />
     <div id="bookshelf" class="w-full h-full p-8 overflow-y-auto">
       <div class="flex flex-wrap justify-center">
@@ -12,8 +9,6 @@
       </div>
     </div>
   </div>
-    </div>
-  </div>
 </template>
 
 <script>

client/pages/library/_library/bookshelf/_id.vue

@@ -1,13 +1,8 @@
 <template>
   <div class="page" :class="streamLibraryItem ? 'streaming' : ''">
-    <div class="flex h-full">
-      <app-side-rail class="hidden md:block" />
-      <div class="flex-grow">
     <app-book-shelf-toolbar :page="id || ''" :view-mode.sync="viewMode" />
     <app-lazy-bookshelf :page="id || ''" :view-mode="viewMode" />
   </div>
-    </div>
-  </div>
 </template>
 
 <script>

client/pages/library/_library/index.vue

@@ -1,13 +1,8 @@
 <template>
   <div class="page" :class="streamLibraryItem ? 'streaming' : ''">
-    <div class="flex h-full">
-      <app-side-rail class="hidden md:block" />
-      <div class="flex-grow">
     <app-book-shelf-toolbar is-home />
     <app-book-shelf-categorized />
   </div>
-    </div>
-  </div>
 </template>
 
 <script>

client/pages/library/_library/podcast/search.vue

@@ -1,8 +1,5 @@
 <template>
   <div class="page" :class="streamLibraryItem ? 'streaming' : ''">
-    <div class="flex h-full">
-      <app-side-rail class="hidden md:block" />
-      <div class="flex-grow">
     <app-book-shelf-toolbar page="podcast-search" />
     <div class="w-full h-full overflow-y-auto p-12 relative">
       <div class="w-full max-w-3xl mx-auto">
@@ -33,8 +30,6 @@
         <ui-loading-indicator />
       </div>
     </div>
-      </div>
-    </div>
 
     <modals-podcast-new-modal v-model="showNewPodcastModal" :podcast-data="selectedPodcast" :podcast-feed-data="selectedPodcastFeed" />
   </div>

client/pages/library/_library/search.vue

@@ -1,16 +1,11 @@
 <template>
   <div class="page" :class="streamLibraryItem ? 'streaming' : ''">
-    <div class="flex h-full">
-      <app-side-rail class="hidden md:block" />
-      <div class="flex-grow">
     <app-book-shelf-toolbar is-home page="search" :search-query="query" />
     <app-book-shelf-categorized v-if="hasResults" ref="bookshelf" search :results="results" />
     <div v-else class="w-full py-16">
       <p class="text-xl text-center">No Search results for "{{ query }}"</p>
     </div>
   </div>
-    </div>
-  </div>
 </template>
 
 <script>

client/pages/library/_library/series/_id.vue

@@ -1,13 +1,8 @@
 <template>
   <div class="page" :class="streamLibraryItem ? 'streaming' : ''">
-    <div class="flex h-full">
-      <app-side-rail class="hidden md:block" />
-      <div class="flex-grow">
     <app-book-shelf-toolbar :selected-series="series" />
     <app-lazy-bookshelf page="series-books" :series-id="seriesId" />
   </div>
-    </div>
-  </div>
 </template>
 
 <script>