feat: nav style dark mode

liou666 · Mar 26, 2023 · 829bfac · 829bfac
1 parent a898eca
commit 829bfac
Show file tree

Hide file tree

Showing 8 changed files with 126 additions and 46 deletions.
diff --git a/index.html b/index.html
@@ -7,7 +7,7 @@
     <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
     <title>Polyglot</title>
   </head>
-  <body>
+  <body class="font-sans dark:text-white">
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>

diff --git a/src/components/Content.vue b/src/components/Content.vue
@@ -43,7 +43,7 @@ const onSubmit = async () => {
 </script>
 
 <template>
-  <div flex flex-col p-2 rounded-md bg-gray-500>
+  <div flex flex-col p-2 rounded-md bg-white dark="bg-#1e1e1e">
     <div ref="el" class="hide-scrollbar flex-1 overflow-auto">
       <div
         v-for="item, i in chatMessages"

diff --git a/src/components/Header.vue b/src/components/Header.vue
@@ -1,33 +1,27 @@
 <script setup lang="ts">
-// defineProps<{}>()
-const [isKeyMode, toggle] = useToggle(false)
+import InputKit from '@/components/widgets/InputKit.vue'
 const openKey = useLocalStorage('openKey', '')
 </script>
 
 <template>
-  <header bg-white>
-    <h3 animate-bounce>
-      Logo
+  <header class="bg-#ecf7fd dark:bg-#1f262a">
+    <h3 text-2xl>
+      🤖️ <span class="text-gradient ">Polyglot</span>
     </h3>
-    <div class="center-y py-2">
-      <i mr-2 rotate-115 i-ic:baseline-key />
-      <div v-if="isKeyMode" w-55>
-        <input
-          v-model="openKey"
-          type="password"
-          class="input"
-        >
-        <i icon-btn i-carbon-checkmark @click="toggle()" />
-        <i icon-btn i-carbon-close @click="toggle()" />
-      </div>
-      <div
-        v-else
-        font-sans
-        cursor-pointer
-        w-55 @click="toggle()"
-      >
-        Key
-      </div>
+    <div class="center-y">
+      <InputKit v-model="openKey">
+        <template #mainText>
+          Self Key
+        </template>
+      </InputKit>
     </div>
   </header>
 </template>
+
+<style scoped>
+ .text-gradient {
+    background-image: var(--accent-gradient);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+</style>
diff --git a/src/components/Nav.vue b/src/components/Nav.vue
@@ -1,10 +1,32 @@
 <script setup lang="ts">
-// defineProps<{}>()
+import Card from './widgets/Card.vue'
+const isDark = useDark()
+const toggleDark = useToggle(isDark)
 </script>
 
 <template>
-  <nav rounded-md mr-2 bg-white>
-    nav
-    <i icon-btn dark:i-carbon-moon i-carbon:sun />
+  <nav class="rounded-md bg-#eaf7fe  dark:bg-#1d262a">
+    <div h-full flex flex-col p-1>
+      <div flex-1>
+        <Card desc="liou" name="liou">
+          <div rounded-full w-8 h-8 bg-red />
+        </Card>
+      </div>
+      <div w-full h-0.2 bg-gray-200 dark:bg-gray-700 />
+      <div py-1>
+        <div
+          nav-item
+          @click="() => toggleDark()"
+        >
+          <i icon-btn dark:i-carbon-moon i-carbon:sun />
+          <span v-if="isDark">Light Mode</span>
+          <span v-else>Dark Mode</span>
+        </div>
+        <div nav-item>
+          <i icon-btn i-carbon:settings />
+          <span>Setting</span>
+        </div>
+      </div>
+    </div>
   </nav>
 </template>
diff --git a/src/components/widgets/Card.vue b/src/components/widgets/Card.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+const { name, desc } = defineProps<{
+  name: string
+  desc: string
+}>()
+</script>
+
+<template>
+  <div
+    p-1 cursor-pointer center-y
+    m-1 rounded duration-300
+    dark="bg-gray-700 hover:bg-gray-600"
+    bg="gray-500/10 hover:gray-500/20"
+  >
+    <div mr-2>
+      <slot />
+    </div>
+    <div>
+      <div text-lg font-500>
+        {{ name }}
+      </div>
+      <div text-sm font-300>
+        {{ desc }}
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/widgets/InputKit.vue b/src/components/widgets/InputKit.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+const props = defineProps(['modelValue', 'inputType'])
+const emit = defineEmits(['update:modelValue'])
+const tempValue = ref(props.modelValue)
+const [isShowInput, toggle] = useToggle(false)
+</script>
+
+<template>
+  <slot name="mainIcon">
+    <i mr-2 rotate-115 i-ic:baseline-key />
+  </slot>
+  <div v-if="isShowInput">
+    <input
+      v-model="tempValue"
+      :type="props.inputType || 'password'"
+      class="input"
+    >
+    <i
+      icon-btn i-carbon-checkmark @click="() => {
+        $emit('update:modelValue', tempValue)
+        toggle()
+      }"
+    />
+    <i icon-btn i-carbon-close @click="toggle()" />
+  </div>
+  <div
+    v-else
+    cursor-pointer
+    @click="toggle()"
+  >
+    <slot name="mainText">
+      Key
+    </slot>
+  </div>
+</template>
diff --git a/src/style.css b/src/style.css
@@ -1,10 +1,14 @@
 :root {
-  --c-bg: #f5f7fb;
+  --c-bg: #f7f7f7;
   --c-scrollbar: #eee;
   --c-scrollbar-hover: #bbb;
-  --c-header-height: 60px;
-  --c-left-slide-width: 200px;
-  --c-left-slide-close-width: 80px;
+  --accent: 124, 58, 237;
+  --accent-gradient: linear-gradient(45deg, rgb(var(--accent)), #da62c4 30%, #f6c44f 60%);
+  transition: all .1s;
+}
+
+html {
+  background-color: var(--c-bg);
 }
 
 html.dark {
@@ -14,9 +18,7 @@ html.dark {
 }
 
 body {
-  background-color: var(--c-bg);
-  --c-header-height: 60px;
-  --c-left-slide-width: 200px;
+  /* background-color: var(--c-bg); */
   margin: 0;
   min-width: 320px;
   min-height: 100vh;
@@ -56,14 +58,14 @@ body {
 }
 
 #app {
-  max-width: 1280px;
+  /* max-width: 1280px; */
   margin: 0 auto;
   height: 100vh;
   /* padding: 1rem; */
   /* text-align: center; */
 }
 
-@media (prefers-color-scheme: light) {
+/* @media (prefers-color-scheme: light) {
   :root {
     color: #213547;
     background-color: #ffffff;
@@ -80,4 +82,4 @@ body {
   code {
     background-color: #f9f9f9;
   }
-}
+} */
diff --git a/unocss.config.ts b/unocss.config.ts
@@ -13,15 +13,15 @@ export default defineConfig({
   shortcuts: [
     ['btn', 'px-4 py-1 flex items-center rounded inline-block bg-teal-700 text-white cursor-pointer hover:bg-teal-800 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
     ['gray-btn', 'px-4 flex items-center text-xl text-white rounded bg-gray-500 hover:shadow-md duration-300 cursor-pointer border-0 font-sans disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-500'],
-    ['loading-btn', 'animate-pulse w-full h-full px-3 flex items-center justify-center dark:text-slate-400 dark:placeholder:text-slate-400 dark:placeholder:opacity-30 dark:bg-slate-500/40'],
-    ['icon-btn', 'text-[0.9em] inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 text-neutral-900 hover:text-black !outline-none'],
+    ['loading-btn', ' cursor-not-allowed animate-pulse w-full h-full px-3 flex items-center justify-center text-slate-900/70 bg-slate-300/50 dark:text-slate-400 dark:bg-slate-500/40'],
+    ['icon-btn', 'text-[0.9em] inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 !outline-none'],
     ['center', 'flex items-center justify-center'],
     ['center-y', 'flex items-center'],
     ['center-x', 'flex justify-center'],
-    ['input', ' flex-1 text-neutral-700 bg-transparent border-0 border-b border-neutral focus:border-neutral-700 text-left overflow-hidden overflow-ellipsis pr-1 outline-none'],
-    ['input-box', 'dark:text-slate-400 dark:placeholder:text-slate-400 dark:placeholder:opacity-30 dark:bg-slate-500/40 border-0 text-lg outline-none rounded px-3;'],
-    ['chat-box', 'bg-white dark:bg-slate-500 dark:text-slate-200 rounded'],
-
+    ['input', ' flex-1 text-gray-500 dark:text-gray-400 bg-transparent border-0 border-b border-gray-500 focus:border-gray-600 dark:focus:border-gray-400 text-left overflow-hidden overflow-ellipsis pr-1 outline-none'],
+    ['input-box', 'bg-slate-300/50 dark:text-slate-400 dark:placeholder:text-slate-400 dark:placeholder:opacity-30 dark:bg-slate-500/40 border-0 text-lg outline-none rounded px-3;'],
+    ['chat-box', 'bg-#f2f2f2 dark:bg-slate-500 dark:text-slate-200 rounded'],
+    ['nav-item', 'flex cursor-pointer items-center gap-3 rounded-md py-3 px-3  transition-colors duration-200 hover:bg-gray-500/10'],
   ],
   presets: [
     presetUno(),