From 457600d7f8786104e2ac12de734afc8b7e9d00e3 Mon Sep 17 00:00:00 2001
From: Pico2x <pico2x@gmail.com>
Date: Mon, 19 Sep 2022 16:59:36 +0100
Subject: [PATCH] Move group navbar to top

---
 web/components/nav/group-nav-bar.tsx |  2 +-
 web/pages/group/[...slugs]/index.tsx | 21 +++++++++++++--------
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/web/components/nav/group-nav-bar.tsx b/web/components/nav/group-nav-bar.tsx
index 8c20fee9..9ea3f5a4 100644
--- a/web/components/nav/group-nav-bar.tsx
+++ b/web/components/nav/group-nav-bar.tsx
@@ -32,7 +32,7 @@ export function GroupNavBar(props: {
   const user = useUser()
 
   return (
-    <nav className="fixed inset-x-0 bottom-0 z-20 flex justify-between border-t-2 bg-white text-xs text-gray-700 lg:hidden">
+    <nav className="z-20 flex justify-between border-t-2 bg-white text-xs text-gray-700 lg:hidden">
       {mobileGroupNavigation.map((item) => (
         <NavBarItem
           key={item.name}
diff --git a/web/pages/group/[...slugs]/index.tsx b/web/pages/group/[...slugs]/index.tsx
index bb889e72..3adb01c1 100644
--- a/web/pages/group/[...slugs]/index.tsx
+++ b/web/pages/group/[...slugs]/index.tsx
@@ -262,7 +262,11 @@ export default function GroupPage(props: {
 
   return (
     <>
-      <TopGroupNavBar group={group} />
+      <TopGroupNavBar
+        group={group}
+        currentPage={sidebarPages[sidebarIndex].key}
+        onClick={onSidebarClick}
+      />
       <div>
         <div
           className={
@@ -287,19 +291,19 @@ export default function GroupPage(props: {
             {pageContent}
           </main>
         </div>
-        <GroupNavBar
-          currentPage={sidebarPages[sidebarIndex].key}
-          onClick={onSidebarClick}
-        />
       </div>
     </>
   )
 }
 
-export function TopGroupNavBar(props: { group: Group }) {
+export function TopGroupNavBar(props: {
+  group: Group
+  currentPage: string
+  onClick: (key: string) => void
+}) {
   return (
-    <header className="sticky top-0 z-50 w-full pb-2 md:hidden lg:col-span-12">
-      <div className="flex items-center  border-b border-gray-200 bg-white  px-4">
+    <header className="sticky top-0 z-50 w-full border-b border-gray-200 md:hidden lg:col-span-12">
+      <div className="flex items-center   bg-white  px-4">
         <div className="flex-shrink-0">
           <Link href="/">
             <a className="text-indigo-700 hover:text-gray-500 ">
@@ -313,6 +317,7 @@ export function TopGroupNavBar(props: { group: Group }) {
           </h1>
         </div>
       </div>
+      <GroupNavBar currentPage={props.currentPage} onClick={props.onClick} />
     </header>
   )
 }