feature: ChatGPT style show/hide panel button, panel state saving in local storage (#575)

* Add nav bar state saving to local storage

* Add ChatGPT style hide side panel button
This commit is contained in:
David 2023-07-04 05:26:00 +09:00 committed by GitHub
parent 88683b9cc5
commit 8e1473c3d8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 61 additions and 44 deletions

View file

@ -1,19 +1,24 @@
/* eslint-disable react-hooks/exhaustive-deps */
import { useEffect, useState } from 'react';
import { Outlet } from 'react-router-dom';
import MessageHandler from '../components/MessageHandler';
import Nav from '../components/Nav';
import MobileNav from '../components/Nav/MobileNav';
import {
useGetSearchEnabledQuery,
useGetEndpointsQuery,
useGetPresetsQuery
useGetPresetsQuery,
useGetSearchEnabledQuery
} from '~/data-provider';
import MessageHandler from '../components/MessageHandler';
import MobileNav from '../components/Nav/MobileNav';
import Nav from '../components/Nav';
import { Outlet } from 'react-router-dom';
import store from '~/store';
import { useSetRecoilState } from 'recoil';
import { useAuthContext } from '~/hooks/AuthContext';
import { useSetRecoilState } from 'recoil';
export default function Root() {
const [navVisible, setNavVisible] = useState(false);
const [navVisible, setNavVisible] = useState(() => {
const savedNavVisible = localStorage.getItem('navVisible');
return savedNavVisible !== null ? JSON.parse(savedNavVisible) : false;
});
const setIsSearchEnabled = useSetRecoilState(store.isSearchEnabled);
const setEndpointsConfig = useSetRecoilState(store.endpointsConfig);
@ -24,6 +29,10 @@ export default function Root() {
const endpointsQuery = useGetEndpointsQuery();
const presetsQuery = useGetPresetsQuery({ enabled: !!user });
useEffect(() => {
localStorage.setItem('navVisible', JSON.stringify(navVisible));
}, [navVisible]);
useEffect(() => {
if (endpointsQuery.data) {
setEndpointsConfig(endpointsQuery.data);