feat: improve mobile style

app/components/button.module.scss

@@ -29,7 +29,7 @@
   align-items: center;
 }
 
-@media (prefers-color-scheme: dark) {
+@mixin dark-button {
   div:not(:global(.no-dark))>.icon-button-icon {
     filter: invert(0.5);
   }
@@ -39,6 +39,14 @@
   }
 }
 
+:global(.dark) {
+  @include dark-button;
+}
+
+@media (prefers-color-scheme: dark) {
+  @include dark-button;
+}
+
 .icon-button-text {
   margin-left: 5px;
   font-size: 12px;

app/components/home.module.scss

@@ -38,6 +38,7 @@
 }
 
 .sidebar {
+  top: 0;
   width: var(--sidebar-width);
   box-sizing: border-box;
   padding: 20px;
@@ -68,17 +69,15 @@
 
   .sidebar {
     position: absolute;
-    top: -100%;
+    left: -100%;
     z-index: 999;
-    border-bottom-left-radius: 20px;
+    height: 100vh;
-    border-bottom-right-radius: 20px;
-    height: 80vh;
-    box-shadow: var(--shadow);
     transition: all ease 0.3s;
+    box-shadow: none;
   }
 
   .sidebar-show {
-    top: 0;
+    left: 0;
   }
 
   .mobile {

app/components/home.tsx

@@ -26,7 +26,6 @@ import CloseIcon from "../icons/close.svg";
 
 import { Message, SubmitKey, useChatStore, Theme } from "../store";
 import { Settings } from "./settings";
-import dynamic from "next/dynamic";
 
 export function Markdown(props: { content: string }) {
   return (

app/components/ui-lib.tsx

@@ -1,4 +1,5 @@
 import styles from "./ui-lib.module.scss";
+import LoadingIcon from "../icons/three-dots.svg";
 
 export function Popover(props: {
   children: JSX.Element;
@@ -36,3 +37,13 @@ export function ListItem(props: { children: JSX.Element[] }) {
 export function List(props: { children: JSX.Element[] }) {
   return <div className={styles.list}>{props.children}</div>;
 }
+
+export function Loading() {
+  return <div style={{
+    height: "100vh",
+    width: "100vw",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  }}><LoadingIcon /></div>
+}

app/globals.scss

@@ -6,6 +6,7 @@
   --primary: rgb(29, 147, 171);
   --second: rgb(231, 248, 255);
   --hover-color: #f3f3f3;
+  --bar-color: var(--primary);
 
   /* shadow */
   --shadow: 50px 50px 100px 10px rgb(0, 0, 0, 0.1);
@@ -24,6 +25,8 @@
   --second: rgb(27 38 42);
   --hover-color: #323232;
 
+  --bar-color: var(--primary);
+
   --border-in-light: 1px solid rgba(255, 255, 255, 0.192);
 }
 
@@ -79,7 +82,9 @@ body {
 }
 
 ::-webkit-scrollbar {
-  width: 20px;
+  --bar-width: 1px;
+  width: var(--bar-width);
+  height: var(--bar-width);
 }
 
 ::-webkit-scrollbar-track {
@@ -87,9 +92,8 @@ body {
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: rgba(0, 0, 0, 0.05);
+  background-color: var(--bar-color);
   border-radius: 20px;
-  border: 6px solid transparent;
   background-clip: content-box;
 }
 

app/page.tsx

@@ -1,5 +1,5 @@
-import { Home } from "./components/home";
 import { Analytics } from "@vercel/analytics/react";
+import { Home } from './components/home'
 
 export default function App() {
   return (