⛵️🗑️ ↝ Layout & improvements to usability for global layout

components/Content/Planets/Base/IndividualBasePlanet.tsx

@@ -527,13 +527,6 @@ export function BasePlanetData ({ planetId }) { // Repurpose/rename syntax for g
 
   return (
     <div>
-      <p>ID: {basePlanetData.id}</p>
-      <p>Temperature: {basePlanetData.temperature}</p>
-      {/* <ActivateButton planetIdDeepnote={basePlanetData.deepnote} /> */}
-      {/* <ContentPlaceholder planetIdDeepnote='https://embed.deepnote.com/f8de697b-ba49-4014-b2b2-fe5f4cc3c026/3c7a3d159d33438fae3b08ca3e5aa88e/9a872bcf31674fcf8f46c75daf205168?height=564.1875' /> 
-      <iframe src="https://observablehq.com/d/464f8a61b073bb4d" width='100%' height='100%' />
-        <iframe src="https://deepnote.com/@star-sailors/Step-by-step-50ad3984-69a9-496e-a121-efb59231e7e9" width='100%' height='100%' />
-      */}
       <center><iframe src={basePlanetData.deepnote} height='659' width='80%' /></center>
     </div>
   )

components/Section/Layout.tsx

@@ -27,7 +27,7 @@ const Layout: React.FC<DashboardLayoutProps> = ({ children }) => {
   return (
     <>
         <main className="h-max pb-10 grow pt-6">
-          {/* <Navbar /> */}
+          <Navbar />
           {children}
         </main>
       {isMobile && (

components/Section/Navbar.tsx

@@ -1,16 +1,37 @@
 import { Avatar, AvatarFallback, AvatarImage } from "../ui/Avatar";
-import { useEffect, useState } from "react";
+import { useEffect, Fragment, useState } from "react";
 import Link from "next/link";
 import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
+import { Dialog, Disclosure, Popover, Transition } from '@headlessui/react'
+import {
+  ArrowPathIcon,
+  Bars3Icon,
+  ChartPieIcon,
+  CursorArrowRaysIcon,
+  FingerPrintIcon,
+  SquaresPlusIcon,
+  XMarkIcon,
+} from '@heroicons/react/24/outline'
+import { ChevronDownIcon, PhoneIcon, PlayCircleIcon } from '@heroicons/react/20/solid';
 
-const Navbar: React.FC = () => {
+export const NavbarMinimal: React.FC = () => {
     const supabase  = useSupabaseClient();
     const session = useSession();
 
     return (
         <nav className="py-4 border-bg">
-            <div className="container flex justify-between items-center">
-                <Link href="/" className="font-bold text-xl">Star Sailors<span className="text-red-600"></span></Link>
+            <div className="container flex justify-between items-center mx-auto max-w-screen-xl">
+                <div className="flex items-center space-x-4 w-80">
+                    <Link href="/" className="font-bold text-xl text-white">
+                        Star Sailors<span className="text-red-600"></span>
+                    </Link>
+                    <div className="flex items-center space-x-4 flex-grow justify-center">
+                        <Link href="/nav-item1" className="text-gray-500 hover:text-gray-700">NavItem1</Link>
+                        <Link href="/nav-item2" className="text-gray-500 hover:text-gray-700">NavItem2</Link>
+                        <Link href="/nav-item3" className="text-gray-500 hover:text-gray-700">NavItem3</Link>
+                        <Link href="/nav-item4" className="text-gray-500 hover:text-gray-700">NavItem4</Link>
+                    </div>
+                </div>
                 <Link href="/profile">
                     <Avatar className="cursor-pointer rounded-md">
                         <AvatarImage src="https://avatars.githubusercontent.com/u/78838067?s=200&v=4" />
@@ -21,4 +42,194 @@ const Navbar: React.FC = () => {
     );
 };
 
-export default Navbar;
+const products = [
+  { name: 'Your planets', description: '', href: '/garden', icon: ChartPieIcon },
+  { name: 'Gather', description: '', href: '/gather', icon: CursorArrowRaysIcon },
+  { name: 'Automation', description: '', href: '/auto', icon: FingerPrintIcon },
+]
+const callsToAction = [
+  { name: 'Open Source', href: 'https://github.com/signal-k', icon: PlayCircleIcon },
+  { name: 'Datasets', href: 'https://nodes.desci.com', icon: PhoneIcon },
+]
+
+function classNames(...classes) {
+  return classes.filter(Boolean).join(' ')
+}
+
+export default function Navbar() {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+
+  return (
+    <header className="bg-white">
+      <nav className="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8" aria-label="Global">
+        <div className="flex lg:flex-1">
+            <a href="/feed" className="text-sm font-bold leading-6 text-gray-900">
+                Star Sailors
+            </a>
+          <a href="/feed" className="-m-1.5 p-1.5">
+            <span className="sr-only">Star Sailors</span>
+            {/* <img className="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600" alt="" /> */}
+          </a>
+        </div>
+        <div className="flex lg:hidden">
+          <button
+            type="button"
+            className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
+            onClick={() => setMobileMenuOpen(true)}
+          >
+            <span className="sr-only">Open main menu</span>
+            <Bars3Icon className="h-6 w-6" aria-hidden="true" />
+          </button>
+        </div>
+        <Popover.Group className="hidden lg:flex lg:gap-x-12">
+          <Popover className="relative">
+            <Popover.Button className="flex items-center gap-x-1 text-sm font-semibold leading-6 text-gray-900">
+              Garden
+              <ChevronDownIcon className="h-5 w-5 flex-none text-gray-400" aria-hidden="true" />
+            </Popover.Button>
+
+            <Transition
+              as={Fragment}
+              enter="transition ease-out duration-200"
+              enterFrom="opacity-0 translate-y-1"
+              enterTo="opacity-100 translate-y-0"
+              leave="transition ease-in duration-150"
+              leaveFrom="opacity-100 translate-y-0"
+              leaveTo="opacity-0 translate-y-1"
+            >
+              <Popover.Panel className="absolute -left-8 top-full z-10 mt-3 w-screen max-w-md overflow-hidden rounded-3xl bg-white shadow-lg ring-1 ring-gray-900/5">
+                <div className="p-4">
+                  {products.map((item) => (
+                    <div
+                      key={item.name}
+                      className="group relative flex items-center gap-x-6 rounded-lg p-4 text-sm leading-6 hover:bg-gray-50"
+                    >
+                      <div className="flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
+                        <item.icon className="h-6 w-6 text-gray-600 group-hover:text-indigo-600" aria-hidden="true" />
+                      </div>
+                      <div className="flex-auto">
+                        <a href={item.href} className="block font-semibold text-gray-900">
+                          {item.name}
+                          <span className="absolute inset-0" />
+                        </a>
+                        <p className="mt-1 text-gray-600">{item.description}</p>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+                <div className="grid grid-cols-2 divide-x divide-gray-900/5 bg-gray-50">
+                  {callsToAction.map((item) => (
+                    <a
+                      key={item.name}
+                      href={item.href}
+                      className="flex items-center justify-center gap-x-2.5 p-3 text-sm font-semibold leading-6 text-gray-900 hover:bg-gray-100"
+                    >
+                      <item.icon className="h-5 w-5 flex-none text-gray-400" aria-hidden="true" />
+                      {item.name}
+                    </a>
+                  ))}
+                </div>
+              </Popover.Panel>
+            </Transition>
+          </Popover>
+
+          <a href="/explore" className="text-sm font-semibold leading-6 text-gray-900">
+            Inventory
+          </a>
+          <a href="/feed" className="text-sm font-semibold leading-6 text-gray-900">
+            Feed
+          </a>
+          <a href="/profile" className="text-sm font-semibold leading-6 text-gray-900">
+            Profile
+          </a>
+        </Popover.Group>
+        <div className="hidden lg:flex lg:flex-1 lg:justify-end">
+            <Link href="/profile">
+                <Avatar className="cursor-pointer rounded-md">
+                    <AvatarImage src="https://avatars.githubusercontent.com/u/78838067?s=200&v=4" />
+                </Avatar>
+            </Link>
+        </div>
+      </nav>
+      <Dialog as="div" className="lg:hidden" open={mobileMenuOpen} onClose={setMobileMenuOpen}>
+        <div className="fixed inset-0 z-10" />
+        <Dialog.Panel className="fixed inset-y-0 right-0 z-10 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
+          <div className="flex items-center justify-between">
+            <a href="#" className="-m-1.5 p-1.5">
+              <span className="sr-only">Your Company</span>
+              <img
+                className="h-8 w-auto"
+                src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
+                alt=""
+              />
+            </a>
+            <button
+              type="button"
+              className="-m-2.5 rounded-md p-2.5 text-gray-700"
+              onClick={() => setMobileMenuOpen(false)}
+            >
+              <span className="sr-only">Close menu</span>
+              <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+            </button>
+          </div>
+          <div className="mt-6 flow-root">
+            <div className="-my-6 divide-y divide-gray-500/10">
+              <div className="space-y-2 py-6">
+                <Disclosure as="div" className="-mx-3">
+                  {({ open }) => (
+                    <>
+                      <Disclosure.Button className="flex w-full items-center justify-between rounded-lg py-2 pl-3 pr-3.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">
+                        Product
+                        <ChevronDownIcon
+                          className={classNames(open ? 'rotate-180' : '', 'h-5 w-5 flex-none')}
+                          aria-hidden="true"
+                        />
+                      </Disclosure.Button>
+                      <Disclosure.Panel className="mt-2 space-y-2">
+                        {[...products, ...callsToAction].map((item) => (
+                          <Disclosure.Button
+                            key={item.name}
+                            as="a"
+                            href={item.href}
+                            className="block rounded-lg py-2 pl-6 pr-3 text-sm font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+                          >
+                            {item.name}
+                          </Disclosure.Button>
+                        ))}
+                      </Disclosure.Panel>
+                    </>
+                  )}
+                </Disclosure>
+                <a
+                  href="#"
+                  className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+                >
+                  Features
+                </a>
+                <a
+                  href="#"
+                  className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+                >
+                  Marketplace
+                </a>
+                <a
+                  href="#"
+                  className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+                >
+                  Company
+                </a>
+              </div>
+              <div className="py-6">
+                <Link href="/profile">
+                    <Avatar className="cursor-pointer rounded-md">
+                        <AvatarImage src="https://avatars.githubusercontent.com/u/78838067?s=200&v=4" />
+                    </Avatar>
+                </Link>
+              </div>
+            </div>
+          </div>
+        </Dialog.Panel>
+      </Dialog>
+    </header>
+  )
+}

pages/garden.tsx

@@ -2,10 +2,12 @@ import React from "react";
 // import Garden from "../components/Gameplay/Garden";
 import { Garden } from "../components/Content/Planets/GalleryList";
 import Layout, { LayoutNoNav } from "../components/Section/Layout";
+import Navbar from "../components/Section/Navbar";
 
 export default function GardenPage() {
     return (
         <LayoutNoNav>
+            <Navbar />
             <Garden />
         </LayoutNoNav>
     )

pages/planets/[id].tsx

@@ -7,6 +7,7 @@ import { DesktopSidebar } from "../../components/Section/Sidebar";
 import { ClassificationFeedForIndividualPlanet } from "../../components/Content/ClassificationFeed";
 import { ActivateButton } from "../../components/Content/Planets/PlanetData/ContentPlaceholder";
 import PostFormCardAnomalyTag from "../../components/Content/Classify/AnomalyPostFormCard";
+import Navbar from "../../components/Section/Navbar";
 
 export default function PlanetIdPage () {
     const router = useRouter();
@@ -52,7 +53,7 @@ export default function PlanetIdPage () {
                 </div>
                 <div className="w-2/6 bg-gray-50 overflow-y-auto z-">
                     <BasePlanetData planetId={{ id: id as string }} />
-                    <EditableBasePlanetData planetId={{ id: id as string }} />
+                    {/* <EditableBasePlanetData planetId={{ id: id as string }} /> */}
                     <PostFormCardAnomalyTag planetId={id} onPost={null} />
                     <ClassificationFeedForIndividualPlanet planetId={{ id: id as string }} />
                 </div>
@@ -61,18 +62,19 @@ export default function PlanetIdPage () {
     }
 
     return (
-        // <Layout>
-        <div className="flex h-screen">
-            <div className="w-3/6 overflow-y-auto mr-30 z-40">
-                    {/* <br /><ActivateButton /> */}
-                    <IndividualBasePlanetDesktop id={id as string} />
+        <>
+            <Navbar />
+            <div className="flex h-screen">
+                <div className="w-3/6 overflow-y-auto mr-30 z-40">
+                        {/* <br /><ActivateButton /> */}
+                        <IndividualBasePlanetDesktop id={id as string} />
+                    </div>
+                    <div className="w-3/6 bg-gray-50 overflow-y-auto z-">
+                        <BasePlanetData planetId={{ id: id as string }} />
+                        <PostFormCardAnomalyTag planetId={id} onPost={null} />
+                        <ClassificationFeedForIndividualPlanet planetId={{ id: id as string }} />
                 </div>
-                <div className="w-3/6 bg-gray-50 overflow-y-auto z-">
-                    <BasePlanetData planetId={{ id: id as string }} />
-                    <EditableBasePlanetData planetId={{ id: id as string }} />
-                    <PostFormCardAnomalyTag planetId={id} onPost={null} />
-                    <ClassificationFeedForIndividualPlanet planetId={{ id: id as string }} />
             </div>
-        </div>
+        </>
       );                    
 };

yarn.lock

@@ -458,7 +458,7 @@
 
 "@headlessui/react@^1.7.17":
   version "1.7.17"
-  resolved "https://registry.npmjs.org/@headlessui/react/-/react-1.7.17.tgz"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.17.tgz#a0ec23af21b527c030967245fd99776aa7352bc6"
   integrity sha512-4am+tzvkqDSSgiwrsEpGWqgGo9dz8qU5M3znCkC4PgkpY4HcCZzEDEvozltGGGHIKl9jbXbZPSH5TWn4sWJdow==
   dependencies:
     client-only "^0.0.1"