7x31
/
ChatGPT-Next-Web
mirror of https://github.com/Yidadaa/ChatGPT-Next-Web.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

hide sidebar in mobile screen

This commit is contained in:
dakai 2023-04-02 01:22:41 +08:00
parent 997cf89313
commit 9f286fd997
2 changed files with 56 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/components/home.module.scss
View File

@ -88,14 +88,26 @@
} }
.sidebar { .sidebar {
//width: 100vw;
position: absolute; position: absolute;
left: -100%; //left: -100%;
z-index: 999; z-index: 999;
height: var(--full-height); height: var(--full-height);
transition: all ease 0.3s; transition: all ease 0.3s;
box-shadow: none; box-shadow: none;
} }
.sidebar-collapse {
display: none;
}
.window-content-collapse {
width: var(--window-content-width);
height: 100%;
display: flex;
flex-direction: column;
}
.sidebar-show { .sidebar-show {
left: 0; left: 0;
} }

79
app/components/home.tsx
View File

@ -17,7 +17,7 @@ import AddIcon from "../icons/add.svg";
import DeleteIcon from "../icons/delete.svg"; import DeleteIcon from "../icons/delete.svg";
import LoadingIcon from "../icons/three-dots.svg"; import LoadingIcon from "../icons/three-dots.svg";
import MenuIcon from "../icons/menu.svg"; import MenuIcon from "../icons/menu.svg";
//import CloseIcon from "../icons/close.svg"; import CloseIcon from "../icons/close.svg";
import CopyIcon from "../icons/copy.svg"; import CopyIcon from "../icons/copy.svg";
import DownloadIcon from "../icons/download.svg"; import DownloadIcon from "../icons/download.svg";
import LeftIcon from "../icons/left.svg"; import LeftIcon from "../icons/left.svg";
@ -211,17 +211,17 @@ export function PromptHints(props: {
); );
} }
export function Chat(props: { export function Chat() {
showSideBar?: () => void;
sidebarShowing?: boolean;
}) {
type RenderMessage = Message & { preview?: boolean }; type RenderMessage = Message & { preview?: boolean };
const chatStore = useChatStore(); const chatStore = useChatStore();
const [session, sessionIndex] = useChatStore((state) => [ const [sidebarCollapse, setSideBarCollapse, session, sessionIndex] =
state.currentSession(), useChatStore((state) => [
state.currentSessionIndex, state.sidebarCollapse,
]); state.setSidebarCollapse,
state.currentSession(),
state.currentSessionIndex,
]);
const fontSize = useChatStore((state) => state.config.fontSize); const fontSize = useChatStore((state) => state.config.fontSize);
const inputRef = useRef<HTMLTextAreaElement>(null); const inputRef = useRef<HTMLTextAreaElement>(null);
@ -381,7 +381,11 @@ export function Chat(props: {
<div className={styles["window-header"]}> <div className={styles["window-header"]}>
<div <div
className={styles["window-header-title"]} className={styles["window-header-title"]}
onClick={props?.showSideBar} //onClick={() => {
// if (window.innerWidth < 768) {
// setSideBarCollapse(!sidebarCollapse);
// }
//}}
> >
<div <div
className={`${styles["window-header-main-title"]} ${styles["chat-body-title"]}`} className={`${styles["window-header-main-title"]} ${styles["chat-body-title"]}`}
@ -406,7 +410,9 @@ export function Chat(props: {
icon={<MenuIcon />} icon={<MenuIcon />}
bordered bordered
title={Locale.Chat.Actions.ChatList} title={Locale.Chat.Actions.ChatList}
onClick={props?.showSideBar} onClick={() => {
setSideBarCollapse(!sidebarCollapse);
}}
/> />
</div> </div>
<div className={styles["window-action-button"]}> <div className={styles["window-action-button"]}>
@ -526,7 +532,7 @@ export function Chat(props: {
setAutoScroll(false); setAutoScroll(false);
setTimeout(() => setPromptHints([]), 500); setTimeout(() => setPromptHints([]), 500);
}} }}
autoFocus={!props?.sidebarShowing} autoFocus={sidebarCollapse}
/> />
<IconButton <IconButton
icon={<SendWhiteIcon />} icon={<SendWhiteIcon />}
@ -638,7 +644,6 @@ export function Home() {
], ],
); );
const loading = !useHasHydrated(); const loading = !useHasHydrated();
const [showSideBar, setShowSideBar] = useState(true);
const [sidebarCollapse, setSideBarCollapse] = useChatStore((state) => [ const [sidebarCollapse, setSideBarCollapse] = useChatStore((state) => [
state.sidebarCollapse, state.sidebarCollapse,
state.setSidebarCollapse, state.setSidebarCollapse,
@ -664,9 +669,7 @@ export function Home() {
> >
<div <div
className={ className={
sidebarCollapse sidebarCollapse ? styles["sidebar-collapse"] : styles["sidebar"]
? ` ${styles["sidebar-collapse"]}`
: styles.sidebar + ` ${showSideBar && styles["sidebar-show"]}`
} }
> >
<div <div
@ -699,7 +702,9 @@ export function Home() {
className={styles["sidebar-body"]} className={styles["sidebar-body"]}
onClick={() => { onClick={() => {
setOpenSettings(false); setOpenSettings(false);
setShowSideBar(false); if (window.innerWidth < 768) {
setSideBarCollapse(true);
}
}} }}
> >
<ChatList /> <ChatList />
@ -719,17 +724,6 @@ export function Home() {
: styles["sidebar-actions"] : styles["sidebar-actions"]
} }
> >
{/*
<div className={styles["sidebar-action"] + " " + styles.mobile}>
<IconButton
icon={<CloseIcon />}
onClick={() => {
if (confirm(Locale.Home.DeleteChat)) {
removeSession(currentIndex);
}
}}
/>
</div>*/}
<div <div
className={ className={
sidebarCollapse sidebarCollapse
@ -753,6 +747,23 @@ export function Home() {
/> />
)} )}
</div> </div>
<div
className={
sidebarCollapse
? styles["sidebar-action-collapse"]
: styles["sidebar-action"] + " " + styles.mobile
}
>
<IconButton
icon={<CloseIcon />}
onClick={() => {
if (confirm(Locale.Home.DeleteChat)) {
removeSession(currentIndex);
}
}}
/>
</div>
<div <div
className={ className={
sidebarCollapse sidebarCollapse
@ -764,7 +775,7 @@ export function Home() {
icon={<SettingsIcon />} icon={<SettingsIcon />}
onClick={() => { onClick={() => {
setOpenSettings(true); setOpenSettings(true);
setShowSideBar(false); setSideBarCollapse(true);
}} }}
/> />
</div> </div>
@ -790,7 +801,7 @@ export function Home() {
text={sidebarCollapse ? undefined : Locale.Home.NewChat} text={sidebarCollapse ? undefined : Locale.Home.NewChat}
onClick={() => { onClick={() => {
createNewSession(); createNewSession();
setShowSideBar(false); setSideBarCollapse(true);
}} }}
/> />
</div> </div>
@ -808,15 +819,11 @@ export function Home() {
<Settings <Settings
closeSettings={() => { closeSettings={() => {
setOpenSettings(false); setOpenSettings(false);
setShowSideBar(true); setSideBarCollapse(false);
}} }}
/> />
) : ( ) : (
<Chat <Chat key="chat" />
key="chat"
showSideBar={() => setShowSideBar(true)}
sidebarShowing={showSideBar}
/>
)} )}
</div> </div>
</div> </div>