From 930f33a665e1e4c86e274374d497c1c7a81536ae Mon Sep 17 00:00:00 2001
From: ftwpala <ftwpala@gmail.com>
Date: Sun, 16 Jul 2023 10:36:36 +0200
Subject: [PATCH] Improvements to the mobile experience with the navbar. Now
 you are able to toggle the navbar the same way you are able to do in Desktop.
 To open the header, a new icon will be in the top left corner. If the
 position of the icon is troublesome, it will be moved.

---
 src/components/Header.jsx         | 15 ++++++++++++++-
 src/components/RoutesWithChat.jsx |  1 +
 src/css/Header.scss               | 15 ++++++++++-----
 src/css/Stream.scss               | 23 ++++++++++++++++++-----
 4 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 2883dd9..7fec9d8 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -21,7 +21,7 @@ import { faComments } from '@fortawesome/free-solid-svg-icons';
 import '../css/Header';
 
 import type { State } from '../redux/types';
-import { toggleChat, showChat, CHAT_HOST_SERVICE, CHAT_HOST_STRIMS, CHAT_HOST_DGG } from '../actions';
+import { toggleChat, showChat, showHeader, CHAT_HOST_SERVICE, CHAT_HOST_STRIMS, CHAT_HOST_DGG } from '../actions';
 import { supportedChatServices } from '../util/supported-chats';
 import isVod from '../util/is-vod';
 import HeaderForm from './HeaderForm';
@@ -31,6 +31,7 @@ type OwnProps = {||};
 type Props = {|
   ...OwnProps,
   +chatClosed?: boolean,
+  +headerClosed?: boolean,
   +currentStreamService?: string | null,
   +history: BrowserHistory,
   classes: string,
@@ -40,12 +41,14 @@ type Props = {|
   +isStrimsChat: boolean,
   +rustlerCount: number[] | null,
   +showChat: () => {},
+  +showHeader: () => {},
   +showDggChat: boolean,
   +toggleChat: (host: mixed) => {}
 |};
 
 const Header = ({
   chatClosed,
+  headerClosed,
   currentStreamService,
   history,
   classes,
@@ -55,6 +58,7 @@ const Header = ({
   isStrimsChat,
   rustlerCount,
   showChat,
+  showHeader,
   showDggChat,
   toggleChat
 }: Props) => {
@@ -102,10 +106,17 @@ const Header = ({
     </div>
   );
 
+  let openHeader = !headerClosed ? null : (
+    <div title="Open Header" className='open-header-mobile-btn' onClick={showHeader}>
+       <span className='open-header-caret-mobile'>&#8250;</span>
+    </div>
+  );
+
   return (
     <>
     <Navbar expand='lg' variant='dark' className={classes}>
       {openChat}
+      {openHeader}
       <Navbar.Brand>
         <Link className='navbar-brand' to='/'>Strims</Link>
       </Navbar.Brand>
@@ -187,6 +198,7 @@ function mapStateToProps(state: State): $Shape<Props> {
     rustlerCount: state.streams[state.stream] ? [state.streams[state.stream].rustlers, state.streams[state.stream].viewers] : null,
     showDggChat: Boolean(idx(state, _ => _.self.profile.data.show_dgg_chat)),
     chatClosed: !state.ui.showChat,
+    headerClosed: !state.ui.showHeader,
   };
 }
 
@@ -196,6 +208,7 @@ export default compose(
     {
       toggleChat,
       showChat,
+      showHeader,
     }
   )
 )(Header);
diff --git a/src/components/RoutesWithChat.jsx b/src/components/RoutesWithChat.jsx
index 087b25b..107458f 100644
--- a/src/components/RoutesWithChat.jsx
+++ b/src/components/RoutesWithChat.jsx
@@ -95,6 +95,7 @@ export default compose(
       chatSize: state.ui.chatSize,
       showLeftChat: idx(state, _ => _.self.profile.data.left_chat),
       chatClosed: !state.ui.showChat || !state.self.isLoggedIn,
+      headerClosed: !state.ui.showHeader,
     }),
     {
       setChatSize,
diff --git a/src/css/Header.scss b/src/css/Header.scss
index b85704e..6ed24d8 100644
--- a/src/css/Header.scss
+++ b/src/css/Header.scss
@@ -8,7 +8,7 @@
   border-radius: 0px;
 }
 
-.open-chat-btn{
+.open-chat-btn,.open-header-mobile-btn{
   position: fixed;
   right: 25px;
   top: 65px;
@@ -16,7 +16,11 @@
   cursor: pointer;
 }
 
-.close-header .open-chat-btn{
+.open-header-mobile-btn{
+  left: 25px;
+}
+
+.close-header .open-chat-btn,.close-header .open-header-mobile-btn{
   top: 10px;
 }
 
@@ -59,6 +63,9 @@
     min-height: unset;
     overflow:visible;
   }
+  .close-header.navbar{
+    overflow:hidden;
+  }
   @media (orientation:landscape){
     .nav-item {
       padding-left: 0.5rem;
@@ -71,7 +78,5 @@
       padding-right: 0.5rem;
     }
   }
-  #open-chat-btn{
-    display: none;
-  }
+
 }
diff --git a/src/css/Stream.scss b/src/css/Stream.scss
index c1593aa..7b33b88 100644
--- a/src/css/Stream.scss
+++ b/src/css/Stream.scss
@@ -18,11 +18,6 @@
 }
 
 
-@include media-breakpoint-down(md) {
-  .open-header-btn,.close-header-btn{
-    display: none;
-  }
-}
 
 .open-header-caret,.close-header-caret{
   position: fixed;
@@ -42,6 +37,16 @@
   opacity:1;
 }
 
+.open-header-caret-mobile{
+  display: none;
+  position:fixed;
+  rotate: 90deg;
+  color: #D17134;
+  font-size: 32px;
+  line-height: 20px;
+  opacity: 0.4;
+}
+
 .open-header-caret{
   top: -15px;
   rotate: 90deg;
@@ -58,6 +63,14 @@
 }
 
 @include media-breakpoint-down(md) {
+  .open-header-caret-mobile{
+    display: block;
+  }
+
+  .close-header-caret{
+    top:35px;
+  }
+  
   @media (orientation:portrait){
     .chat-embed {
       height: 100%;