From c2b174ab532f6b0938f81c1174b4874b44bdf3cc Mon Sep 17 00:00:00 2001
From: Maria Rushkova <66270386+mrushkova@users.noreply.github.com>
Date: Wed, 6 Oct 2021 18:02:59 +0200
Subject: [PATCH] Fix narrow topbar (#47)

---
 .../src/components/Chat/ChatBody.tsx          | 22 +++++++++--
 .../src/components/Icons/BackIcon.tsx         | 31 ----------------
 .../components/NarrowMode/NarrowChannels.tsx  |  9 +----
 .../components/NarrowMode/NarrowMembers.tsx   |  3 +-
 .../components/NarrowMode/NarrowTopbar.tsx    | 37 +++----------------
 5 files changed, 26 insertions(+), 76 deletions(-)
 delete mode 100644 packages/react-chat/src/components/Icons/BackIcon.tsx

diff --git a/packages/react-chat/src/components/Chat/ChatBody.tsx b/packages/react-chat/src/components/Chat/ChatBody.tsx
index 4e4394bc..b612d169 100644
--- a/packages/react-chat/src/components/Chat/ChatBody.tsx
+++ b/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>`
diff --git a/packages/react-chat/src/components/Icons/BackIcon.tsx b/packages/react-chat/src/components/Icons/BackIcon.tsx
deleted file mode 100644
index 7fdb97dc..00000000
--- a/packages/react-chat/src/components/Icons/BackIcon.tsx
+++ /dev/null
@@ -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};
-  }
-`;
diff --git a/packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx b/packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx
index e26ef36c..a20900d4 100644
--- a/packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx
+++ b/packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx
@@ -26,12 +26,7 @@ export function NarrowChannels({
 }: NarrowChannelsProps) {
   return (
     <ListWrapper theme={theme}>
-      <NarrowTopbar
-        theme={theme}
-        list="Channels"
-        community={community}
-        onClick={() => setShowChannels(false)}
-      />
+      <NarrowTopbar theme={theme} list="Channels" community={community} />
       <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};
 `;
diff --git a/packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx b/packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx
index 509c57c3..bae322d3 100644
--- a/packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx
+++ b/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};
 `;
diff --git a/packages/react-chat/src/components/NarrowMode/NarrowTopbar.tsx b/packages/react-chat/src/components/NarrowMode/NarrowTopbar.tsx
index 05bd6e86..e537c886 100644
--- a/packages/react-chat/src/components/NarrowMode/NarrowTopbar.tsx
+++ b/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({
-  theme,
-  list,
-  community,
-  onClick,
-}: NarrowTopbarProps) {
+export function NarrowTopbar({ theme, list, community }: NarrowTopbarProps) {
   return (
     <TopbarWrapper theme={theme}>
-      <GoBackBtn onClick={onClick}>
-        <BackIcon theme={theme} />
-      </GoBackBtn>
-
-      <HeadingWrapper>
-        <Heading theme={theme}>{list}</Heading>
-        <SubHeading theme={theme}>{community}</SubHeading>
-      </HeadingWrapper>
+      <Heading theme={theme}>{list}</Heading>
+      <SubHeading theme={theme}>{community}</SubHeading>
     </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%);
-`;