fix(color-scheme): load color scheme initially

The color scheme is now loaded and set after registering the watcher to
ensure that the callback is also called initially.

src/App.vue

@@ -26,7 +26,7 @@ import { useRoute } from 'vue-router';
 const route = useRoute();
 
 const { getColorScheme, updateColorScheme } = useColorScheme();
-const colorScheme = ref(getColorScheme());
+const colorScheme = ref('auto');
 provide('colorScheme', colorScheme);
 watch(colorScheme, (newValue) => {
     updateColorScheme(newValue);
@@ -46,6 +46,7 @@ watch(colorScheme, (newValue) => {
         document.body.classList.remove('color-scheme-auto');
     }
 });
+colorScheme.value = getColorScheme();
 
 watchEffect(() => updatePageTitle(route));
 </script>

src/features/sidebar/components/Sidebar.vue

@@ -36,7 +36,7 @@ const toggleSidebar = function toggleSidebar () {
         <div class="sidebar-controls">
             <SidebarExpandButton @click="toggleSidebar" class="sidebar-expand-button" />
         </div>
-        <div class="sidebar-content" v-show="props.expanded">
+        <div class="sidebar-content" v-if="props.expanded">
             <slot />
         </div>
     </nav>