From 59748b4d4027c905c88cf2552fb5a7b1bfc18c7e Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@richelsen.net>
Date: Tue, 3 Aug 2021 13:13:48 +0200
Subject: [PATCH] relative top bar on mobile

---
 components/Shell.tsx | 202 ++++++++++++++++++++++---------------------
 1 file changed, 103 insertions(+), 99 deletions(-)

diff --git a/components/Shell.tsx b/components/Shell.tsx
index 063feaa8..1fe932e4 100644
--- a/components/Shell.tsx
+++ b/components/Shell.tsx
@@ -67,117 +67,121 @@ export default function Shell(props) {
   }
 
   return session ? (
-    <div className="h-screen flex overflow-hidden bg-gray-100">
-      {/* Static sidebar for desktop */}
-      <div className="hidden md:flex md:flex-shrink-0">
-        <div className="flex flex-col w-64">
-          {/* Sidebar component, swap this element with another sidebar if you like */}
-          <div className="flex flex-col h-0 flex-1 border-r border-gray-200 bg-white">
-            <div className="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
-              <Link href="/event-types">
-                <a className="px-4">
-                  <Logo small />
-                </a>
-              </Link>
-              <nav className="mt-5 flex-1 px-2 bg-white space-y-1">
-                {navigation.map((item) => (
-                  <Link key={item.name} href={item.href}>
-                    <a
-                      className={classNames(
-                        item.current
-                          ? "bg-neutral-100 text-neutral-900"
-                          : "text-neutral-500 hover:bg-gray-50 hover:text-neutral-900",
-                        "group flex items-center px-2 py-2 text-sm font-medium rounded-sm"
-                      )}>
-                      <item.icon
+    <>
+      <div className="h-screen flex overflow-hidden bg-gray-100">
+        {/* Static sidebar for desktop */}
+        <div className="hidden md:flex md:flex-shrink-0">
+          <div className="flex flex-col w-64">
+            {/* Sidebar component, swap this element with another sidebar if you like */}
+            <div className="flex flex-col h-0 flex-1 border-r border-gray-200 bg-white">
+              <div className="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
+                <Link href="/event-types">
+                  <a className="px-4">
+                    <Logo small />
+                  </a>
+                </Link>
+                <nav className="mt-5 flex-1 px-2 bg-white space-y-1">
+                  {navigation.map((item) => (
+                    <Link key={item.name} href={item.href}>
+                      <a
                         className={classNames(
-                          item.current ? "text-neutral-500" : "text-neutral-400 group-hover:text-neutral-500",
-                          "mr-3 flex-shrink-0 h-5 w-5"
-                        )}
-                        aria-hidden="true"
-                      />
-                      {item.name}
-                    </a>
-                  </Link>
-                ))}
-              </nav>
-            </div>
-            <div className="flex-shrink-0 flex border-t border-gray-200 p-4">
-              <UserDropdown session={session} />
+                          item.current
+                            ? "bg-neutral-100 text-neutral-900"
+                            : "text-neutral-500 hover:bg-gray-50 hover:text-neutral-900",
+                          "group flex items-center px-2 py-2 text-sm font-medium rounded-sm"
+                        )}>
+                        <item.icon
+                          className={classNames(
+                            item.current
+                              ? "text-neutral-500"
+                              : "text-neutral-400 group-hover:text-neutral-500",
+                            "mr-3 flex-shrink-0 h-5 w-5"
+                          )}
+                          aria-hidden="true"
+                        />
+                        {item.name}
+                      </a>
+                    </Link>
+                  ))}
+                </nav>
+              </div>
+              <div className="flex-shrink-0 flex border-t border-gray-200 p-4">
+                <UserDropdown session={session} />
+              </div>
             </div>
           </div>
         </div>
-      </div>
-      <div className="flex flex-col w-0 flex-1 overflow-hidden">
-        {/* show top navigation for md and smaller (tablet and phones) */}
-        <nav className="md:hidden bg-white shadow p-4 flex justify-between items-center">
-          <Link href="/event-types">
-            <a>
-              <Logo />
-            </a>
-          </Link>
-          <div className="flex gap-3 items-center self-center">
-            <button className="bg-white p-2 rounded-full text-gray-400 hover:text-gray-500 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black">
-              <span className="sr-only">View notifications</span>
-              <Link href="/settings/profile">
+
+        <div className="flex flex-col w-0 flex-1 overflow-hidden">
+          <main className="flex-1 relative z-0 overflow-y-auto focus:outline-none">
+            {/* show top navigation for md and smaller (tablet and phones) */}
+            <nav className="md:hidden bg-white shadow p-4 flex justify-between items-center">
+              <Link href="/event-types">
                 <a>
-                  <CogIcon className="h-6 w-6" aria-hidden="true" />
+                  <Logo />
                 </a>
               </Link>
-            </button>
-            <div className="mt-1">
-              <UserDropdown small bottom session={session} />
-            </div>
-          </div>
-        </nav>
-
-        <main className="flex-1 relative z-0 overflow-y-auto focus:outline-none">
-          <div className="py-6">
-            <div className="block sm:flex justify-between px-4 sm:px-6 md:px-8">
-              <div className="mb-6">
-                <h1 className="text-2xl font-semibold text-gray-900">{props.heading}</h1>
-                <p className="text-sm text-neutral-500 mr-4">{props.subtitle}</p>
-              </div>
-              <div className="mb-4 flex-shrink-0">{props.CTA}</div>
-            </div>
-            <div className="px-4 sm:px-6 md:px-8">{props.children}</div>
-
-            {/* show bottom navigation for md and smaller (tablet and phones) */}
-            <nav className="md:hidden flex fixed bottom-0 bg-white w-full rounded-lg shadow">
-              {/* note(PeerRich): using flatMap instead of map to remove settings from bottom nav */}
-              {navigation.flatMap((item, itemIdx) =>
-                item.name === "Settings" ? (
-                  []
-                ) : (
-                  <Link key={item.name} href={item.href}>
-                    <a
-                      className={classNames(
-                        item.current ? "text-gray-900" : "text-neutral-400 hover:text-gray-700",
-                        itemIdx === 0 ? "rounded-l-lg" : "",
-                        itemIdx === navigation.length - 1 ? "rounded-r-lg" : "",
-                        "group relative min-w-0 flex-1 overflow-hidden bg-white py-2 px-2 text-xs sm:text-sm font-medium text-center hover:bg-gray-50 focus:z-10"
-                      )}
-                      aria-current={item.current ? "page" : undefined}>
-                      <item.icon
-                        className={classNames(
-                          item.current ? "text-gray-900" : "text-gray-400 group-hover:text-gray-500",
-                          "block mx-auto flex-shrink-0 h-5 w-5 mb-1 text-center"
-                        )}
-                        aria-hidden="true"
-                      />
-                      <span>{item.name}</span>
+              <div className="flex gap-3 items-center self-center">
+                <button className="bg-white p-2 rounded-full text-gray-400 hover:text-gray-500 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black">
+                  <span className="sr-only">View notifications</span>
+                  <Link href="/settings/profile">
+                    <a>
+                      <CogIcon className="h-6 w-6" aria-hidden="true" />
                     </a>
                   </Link>
-                )
-              )}
+                </button>
+                <div className="mt-1">
+                  <UserDropdown small bottom session={session} />
+                </div>
+              </div>
             </nav>
+            <div className="py-6">
+              <div className="block sm:flex justify-between px-4 sm:px-6 md:px-8">
+                <div className="mb-6">
+                  <h1 className="text-2xl font-semibold text-gray-900">{props.heading}</h1>
+                  <p className="text-sm text-neutral-500 mr-4">{props.subtitle}</p>
+                </div>
+                <div className="mb-4 flex-shrink-0">{props.CTA}</div>
+              </div>
+              <div className="px-4 sm:px-6 md:px-8">{props.children}</div>
 
-            {/* add padding to content for mobile navigation*/}
-            <div className="block md:hidden pt-12" />
-          </div>
-        </main>
+              {/* show bottom navigation for md and smaller (tablet and phones) */}
+              <nav className="md:hidden flex fixed bottom-0 bg-white w-full rounded-lg shadow">
+                {/* note(PeerRich): using flatMap instead of map to remove settings from bottom nav */}
+                {navigation.flatMap((item, itemIdx) =>
+                  item.name === "Settings" ? (
+                    []
+                  ) : (
+                    <Link key={item.name} href={item.href}>
+                      <a
+                        className={classNames(
+                          item.current ? "text-gray-900" : "text-neutral-400 hover:text-gray-700",
+                          itemIdx === 0 ? "rounded-l-lg" : "",
+                          itemIdx === navigation.length - 1 ? "rounded-r-lg" : "",
+                          "group relative min-w-0 flex-1 overflow-hidden bg-white py-2 px-2 text-xs sm:text-sm font-medium text-center hover:bg-gray-50 focus:z-10"
+                        )}
+                        aria-current={item.current ? "page" : undefined}>
+                        <item.icon
+                          className={classNames(
+                            item.current ? "text-gray-900" : "text-gray-400 group-hover:text-gray-500",
+                            "block mx-auto flex-shrink-0 h-5 w-5 mb-1 text-center"
+                          )}
+                          aria-hidden="true"
+                        />
+                        <span>{item.name}</span>
+                      </a>
+                    </Link>
+                  )
+                )}
+              </nav>
+
+              {/* add padding to content for mobile navigation*/}
+              <div className="block md:hidden pt-12" />
+            </div>
+          </main>
+        </div>
       </div>
-    </div>
+    </>
   ) : null;
 }