- {connectionList.map((connection) => (
+
diff --git a/pages/index.tsx b/pages/index.tsx
index 9965273..16b52c4 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,7 +1,8 @@
import { NextPage } from "next";
import Head from "next/head";
-import React from "react";
import dynamic from "next/dynamic";
+import React, { useEffect } from "react";
+import { ResponsiveWidth, useLayoutStore } from "@/store";
// Use dynamic import to avoid page hydrated.
// reference: https://github.com/pmndrs/zustand/issues/1145#issuecomment-1316431268
@@ -13,6 +14,25 @@ const ChatView = dynamic(() => import("@/components/ChatView"), {
});
const ChatPage: NextPage = () => {
+ const layoutStore = useLayoutStore();
+
+ useEffect(() => {
+ const handleWindowResize = () => {
+ if (window.innerWidth < ResponsiveWidth.lg) {
+ layoutStore.toggleSidebar(false);
+ } else {
+ layoutStore.toggleSidebar(true);
+ }
+ };
+
+ handleWindowResize();
+ window.addEventListener("resize", handleWindowResize);
+
+ return () => {
+ window.removeEventListener("resize", handleWindowResize);
+ };
+ }, []);
+
return (
@@ -21,9 +41,16 @@ const ChatPage: NextPage = () => {
-
-
+
+ layoutStore.toggleSidebar(e.target.checked)}
+ />
+
);
diff --git a/store/index.ts b/store/index.ts
index 1726882..d9a4117 100644
--- a/store/index.ts
+++ b/store/index.ts
@@ -3,3 +3,4 @@ export * from "./assistant";
export * from "./connection";
export * from "./chat";
export * from "./message";
+export * from "./layout";
diff --git a/store/layout.ts b/store/layout.ts
new file mode 100644
index 0000000..6355ad8
--- /dev/null
+++ b/store/layout.ts
@@ -0,0 +1,30 @@
+import { isUndefined } from "lodash-es";
+import { create } from "zustand";
+
+// reference: https://tailwindcss.com/docs/responsive-design
+export enum ResponsiveWidth {
+ sm = 640,
+ lg = 1024,
+}
+
+interface LayoutState {
+ showSidebar: boolean;
+ toggleSidebar: (show?: boolean) => void;
+}
+
+export const useLayoutStore = create
()((set, get) => ({
+ showSidebar: true,
+ toggleSidebar: (show) => {
+ if (isUndefined(show)) {
+ set((state) => ({
+ ...state,
+ showSidebar: !state.showSidebar,
+ }));
+ } else {
+ set((state) => ({
+ ...state,
+ showSidebar: show,
+ }));
+ }
+ },
+}));