feat: basic support in mobile mode. including:

navbar show and hide,
similar fade animation,
auto close when select new convo,
mobile title will change with convo,
new chat button.
This commit is contained in:
Wentao Lyu 2023-03-12 00:32:03 +08:00
parent fb9f77ae5e
commit 070fee2ece
5 changed files with 160 additions and 33 deletions

View file

@ -1,4 +1,4 @@
import React from 'react';
import React, { useEffect, useState } from 'react';
import Messages from './components/Messages';
import Landing from './components/Main/Landing';
import TextChat from './components/Main/TextChat';
@ -10,14 +10,16 @@ import { useSelector } from 'react-redux';
const App = () => {
const { messages } = useSelector((state) => state.messages);
const { title } = useSelector((state) => state.convo);
const { conversationId } = useSelector((state) => state.convo);
const [ navVisible, setNavVisible ]= useState(false)
useDocumentTitle(title);
return (
<div className="flex h-screen">
<Nav />
<Nav navVisible={navVisible} setNavVisible={setNavVisible} />
<div className="flex h-full w-full flex-1 flex-col bg-gray-50 md:pl-[260px]">
<div className="transition-width relative flex h-full w-full flex-1 flex-col items-stretch overflow-hidden bg-white dark:bg-gray-800">
<MobileNav />
<MobileNav setNavVisible={setNavVisible} />
{messages.length === 0 ? (
<Landing title={title} />
) : (