finish basic sidebar

src/components/ThemeControlToggle.vue

@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <label class="toggle text-base-content">
+      <input type="checkbox" value="synthwave" class="theme-controller" @click="theme.toggleTheme"
+        :checked="checkState">
+
+      <svg aria-label="sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor">
+          <circle cx="12" cy="12" r="4"></circle>
+          <path d="M12 2v2"></path>
+          <path d="M12 20v2"></path>
+          <path d="m4.93 4.93 1.41 1.41"></path>
+          <path d="m17.66 17.66 1.41 1.41"></path>
+          <path d="M2 12h2"></path>
+          <path d="M20 12h2"></path>
+          <path d="m6.34 17.66-1.41 1.41"></path>
+          <path d="m19.07 4.93-1.41 1.41"></path>
+        </g>
+      </svg>
+
+      <svg aria-label="moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor">
+          <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
+        </g>
+      </svg>
+
+    </label>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useThemeStore } from '@/stores/theme';
+import { computed } from 'vue';
+
+const theme = useThemeStore();
+
+const checkState = computed(() => {
+  return theme.isDarkTheme()
+})
+
+</script>
+
+<style scoped lang="postcss">
+@import "../assets/main.css"
+</style>