Fix narrow topbar (#47)

packages/react-chat/src/components/Chat/ChatBody.tsx

@@ -54,8 +54,8 @@ export function ChatBody({
 
   const switchChannelList = useCallback(() => {
     setShowMembersList(false);
-    setShowChannelsList(true);
+    setShowChannelsList(!showChannelsList);
-  }, []);
+  }, [showChannelsList]);
 
   const switchMemberList = useCallback(() => {
     setShowChannelsList(false);
@@ -64,7 +64,12 @@ export function ChatBody({
 
   return (
     <ChatBodyWrapper theme={theme} className={className}>
-      <ChatTopbar>
+      <ChatTopbar
+        className={
+          narrow && (showChannelsList || showMembersList) ? "narrow" : ""
+        }
+        theme={theme}
+      >
         <ChannelWrapper className={className}>
           {(showCommunity || narrow) && (
             <CommunityWrap theme={theme} className={className}>
@@ -152,10 +157,19 @@ const ChannelWrapper = styled.div`
   }
 `;
 
-const ChatTopbar = styled.div`
+const ChatTopbar = styled.div<ThemeProps>`
   display: flex;
   justify-content: space-between;
   padding: 5px 8px;
+  background: ${({ theme }) => theme.bodyBackgroundColor};
+
+  &.narrow {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 2;
+  }
 `;
 
 const CommunityWrap = styled.div<ThemeProps>`

packages/react-chat/src/components/Icons/BackIcon.tsx

@@ -1,31 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-
-import { Theme } from "../../styles/themes";
-
-interface ThemeProps {
-  theme: Theme;
-}
-
-export const BackIcon = ({ theme }: ThemeProps) => {
-  return (
-    <Icon
-      width="18"
-      height="14"
-      viewBox="0 0 18 14"
-      xmlns="http://www.w3.org/2000/svg"
-      theme={theme}
-    >
-      <path
-        d="M7.53033 1.53033C7.82322 1.23744 7.82322 0.762563 7.53033 0.46967C7.23744 0.176777 6.76256 0.176777 6.46967 0.46967L0.46967 6.46967C0.176777 6.76256 0.176777 7.23744 0.46967 7.53033L6.46967 13.5303C6.76256 13.8232 7.23744 13.8232 7.53033 13.5303C7.82322 13.2374 7.82322 12.7626 7.53033 12.4697L3.66421 8.60355C3.34923 8.28857 3.57232 7.75 4.01777 7.75H17C17.4142 7.75 17.75 7.41421 17.75 7C17.75 6.58579 17.4142 6.25 17 6.25H4.01777C3.57231 6.25 3.34923 5.71143 3.66421 5.39645L7.53033 1.53033Z"
-        fill="black"
-      />
-    </Icon>
-  );
-};
-
-const Icon = styled.svg<ThemeProps>`
-  & > path {
-    fill: ${({ theme }) => theme.primary};
-  }
-`;

packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx

@@ -26,12 +26,7 @@ export function NarrowChannels({
 }: NarrowChannelsProps) {
   return (
     <ListWrapper theme={theme}>
-      <NarrowTopbar
+      <NarrowTopbar theme={theme} list="Channels" community={community} />
-        theme={theme}
-        list="Channels"
-        community={community}
-        onClick={() => setShowChannels(false)}
-      />
       <ChannelList>
         {channels.map((channel) => (
           <Channel
@@ -61,6 +56,6 @@ interface ThemeProps {
 }
 
 const ListWrapper = styled.div<ThemeProps>`
-  padding: 18px;
+  padding: 82px 18px 18px;
   background: ${({ theme }) => theme.bodyBackgroundColor};
 `;

packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx

@@ -26,7 +26,6 @@ export function NarrowMembers({
         theme={theme}
         list="Community members"
         community={community.name}
-        onClick={() => setShowMembersList(false)}
       />
       <MembersList
         theme={theme}
@@ -43,6 +42,6 @@ interface ThemeProps {
 }
 
 const ListWrapper = styled.div<ThemeProps>`
-  padding: 18px;
+  padding: 82px 18px 18px;
   background: ${({ theme }) => theme.bodyBackgroundColor};
 `;

packages/react-chat/src/components/NarrowMode/NarrowTopbar.tsx

@@ -2,31 +2,18 @@ import React from "react";
 import styled from "styled-components";
 
 import { Theme } from "../../styles/themes";
-import { BackIcon } from "../Icons/BackIcon";
 
 interface NarrowTopbarProps {
   theme: Theme;
   list: string;
   community: string;
-  onClick: () => void;
 }
 
-export function NarrowTopbar({
+export function NarrowTopbar({ theme, list, community }: NarrowTopbarProps) {
-  theme,
-  list,
-  community,
-  onClick,
-}: NarrowTopbarProps) {
   return (
     <TopbarWrapper theme={theme}>
-      <GoBackBtn onClick={onClick}>
+      <Heading theme={theme}>{list}</Heading>
-        <BackIcon theme={theme} />
+      <SubHeading theme={theme}>{community}</SubHeading>
-      </GoBackBtn>
-
-      <HeadingWrapper>
-        <Heading theme={theme}>{list}</Heading>
-        <SubHeading theme={theme}>{community}</SubHeading>
-      </HeadingWrapper>
     </TopbarWrapper>
   );
 }
@@ -38,17 +25,13 @@ interface ThemeProps {
 const TopbarWrapper = styled.div<ThemeProps>`
   display: flex;
   justify-content: center;
+  flex-direction: column;
+  text-align: center;
   background-color: ${({ theme }) => theme.bodyBackgroundColor};
   padding: 14px 0;
   position: relative;
 `;
 
-const HeadingWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  text-align: center;
-`;
-
 const Heading = styled.p<ThemeProps>`
   font-weight: 500;
   color: ${({ theme }) => theme.primary};
@@ -58,13 +41,3 @@ const SubHeading = styled.p<ThemeProps>`
   font-weight: 500;
   color: ${({ theme }) => theme.secondary};
 `;
-
-const GoBackBtn = styled.button`
-  width: 24px;
-  height: 24px;
-  margin-right: 18px;
-  position: absolute;
-  left: 0;
-  top: 50%;
-  transform: translateY(-50%);
-`;