🎨 feat: update ThemeToggle component styling and improve scrollbar co…

…lor management
markni · Oct 27, 2024 · f63def6 · f63def6
1 parent 92b4cb0
commit f63def6
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 13 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,17 +1,15 @@
 <script setup>
-import { RouterView, useRoute } from 'vue-router';
+import { RouterView } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import { useAppStore } from '@/stores/app.js';
 import FullscreenOverlay from '@/components/FullscreenOverlay.vue';
 import GlobalHeader from '@/components/GlobalHeader.vue';
 import texts from '@/constants/texts.js';
 import { useThemeStore } from './stores/theme';
-import { computed, onMounted, watch } from 'vue';
+import { onMounted, watch } from 'vue';
 import ThemeToggle from '@/components/ThemeToggle.vue';
 import { DARK_GRAY, IVORY } from './constants/colors';
 
-const route = useRoute();
-
 const store = useAppStore();
 const { networkError, longPolling, notFoundUserError, notFoundSubjectError } = storeToRefs(store);
 const themeStore = useThemeStore();
@@ -24,14 +22,15 @@ watch(
   () => themeStore.isDarkMode,
   (newValue) => {
     document.documentElement.style.backgroundColor = newValue ? DARK_GRAY : IVORY;
+    // Add this line to update the scrollbar color
+    document.documentElement.style.setProperty(
+      '--scrollbar-color',
+      newValue ? 'rgba(0,0,0,0.3)' : ''
+    );
   },
   { immediate: true }
 );
 
-const showThemeToggle = computed(() => {
-  return !route.path.startsWith('/uxxxser');
-});
-
 console.log(`
   _   _ ______ _______       ____          _____  ______
  | \\ | |  ____|__   __|/\\   |  _ \\   /\\   |  __ \\|  ____|
@@ -74,19 +73,37 @@ console.log(`
       :text="texts._loading"
       annotation="loading"
     />
-    <ThemeToggle v-if="showThemeToggle" />
-
-    <GlobalHeader />
 
     <div
       class="flex min-h-screen bg-paper font-serif text-black transition-[background-color] duration-300 dark:bg-paper-dark dark:text-white"
     >
+      <div class="sticky top-0 self-start">
+        <GlobalHeader />
+      </div>
       <div :class="['bottom-0 mx-auto w-full p-4 pt-10', { container: $route.path !== '/' }]">
         <RouterView />
       </div>
+      <div class="sticky top-0 self-start">
+        <ThemeToggle />
+      </div>
     </div>
     <div class="pointer-events-none fixed bottom-0 right-0 opacity-0">
       {{ texts._allTextCombined }}
     </div>
   </div>
 </template>
+
+<style>
+/* Add this style block at the end of the file */
+:root {
+  --scrollbar-color: initial;
+}
+
+* {
+  scrollbar-color: var(--scrollbar-color) transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: var(--scrollbar-color);
+}
+</style>
diff --git a/src/components/GlobalHeader.vue b/src/components/GlobalHeader.vue
@@ -9,7 +9,7 @@ const isMenuExpanded = ref(false);
 <template>
   <!-- z-49 so it's lower than overlay -->
   <header
-    class="fixed left-0 top-0 z-[49] bg-paper px-8 py-4 transition-[background-color] duration-300 dark:bg-paper-dark"
+    class="min-w-32 bg-paper px-8 py-4 transition-[background-color] duration-300 dark:bg-paper-dark"
   >
     <nav class="flex flex-col">
       <div

diff --git a/src/components/ThemeToggle.vue b/src/components/ThemeToggle.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="fixed right-16 top-8 z-50 opacity-5 transition-opacity duration-[10000ms] hover:opacity-100 hover:duration-500"
+    class="px-8 py-4 opacity-5 transition-opacity duration-[10000ms] hover:opacity-100 hover:duration-500"
   >
     <button
       @click="themeStore.toggleDarkMode"