From 8a1a511a9b0f828c46f5ddcbbfacb2ff61e6b7e2 Mon Sep 17 00:00:00 2001
From: Gustavo Maronato <gustavo@maronato.dev>
Date: Sat, 19 Aug 2023 14:24:58 -0300
Subject: [PATCH] navbar

---
 frontend/package-lock.json                    |  21 +++
 frontend/package.json                         |   1 +
 frontend/src/App.tsx                          |  29 ++--
 frontend/src/components/BackButton.tsx        |  27 ++++
 frontend/src/components/Container.tsx         |   2 +-
 frontend/src/components/Header.tsx            |   2 +-
 .../components/{Button.tsx => NavButton.tsx}  |   6 +-
 frontend/src/components/Navbar.tsx            | 146 ++++++++++++++++++
 frontend/src/components/ShortItem.tsx         |   6 +-
 frontend/src/index.css                        |   2 +-
 frontend/src/pages/ShortDetails.tsx           |   2 +
 11 files changed, 223 insertions(+), 21 deletions(-)
 create mode 100644 frontend/src/components/BackButton.tsx
 rename frontend/src/components/{Button.tsx => NavButton.tsx} (87%)
 create mode 100644 frontend/src/components/Navbar.tsx

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index c838d12..b66d17b 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,6 +8,7 @@
       "name": "goshort",
       "version": "0.0.0",
       "dependencies": {
+        "@headlessui/react": "^1.7.17",
         "@heroicons/react": "^2.0.18",
         "classnames": "^2.3.2",
         "react": "^18.2.0",
@@ -469,6 +470,21 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@headlessui/react": {
+      "version": "1.7.17",
+      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.17.tgz",
+      "integrity": "sha512-4am+tzvkqDSSgiwrsEpGWqgGo9dz8qU5M3znCkC4PgkpY4HcCZzEDEvozltGGGHIKl9jbXbZPSH5TWn4sWJdow==",
+      "dependencies": {
+        "client-only": "^0.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^16 || ^17 || ^18",
+        "react-dom": "^16 || ^17 || ^18"
+      }
+    },
     "node_modules/@heroicons/react": {
       "version": "2.0.18",
       "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.0.18.tgz",
@@ -1614,6 +1630,11 @@
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
       "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
     },
+    "node_modules/client-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 066f8ad..820e47f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@headlessui/react": "^1.7.17",
     "@heroicons/react": "^2.0.18",
     "classnames": "^2.3.2",
     "react": "^18.2.0",
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 2358255..c1f5395 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,17 +1,20 @@
 import { FunctionComponent } from "react"
 
-import { Outlet } from "react-router-dom"
+import { Outlet, ScrollRestoration } from "react-router-dom"
 
-import Button from "./components/Button"
+// import Button from "./components/Button"
 import Container from "./components/Container"
-import { useIsAuthenticated } from "./hooks/useAuth"
+import Navbar from "./components/Navbar"
+// import { useIsAuthenticated } from "./hooks/useAuth"
 
 const App: FunctionComponent = () => {
-  const isAuthenticated = useIsAuthenticated()
+  // const isAuthenticated = useIsAuthenticated()
   return (
-    <Container>
-      <div className="flex flex-col">
-        <div className="grid grid-cols-3 justify-between text-slate-500 font-medium">
+    <>
+      <Navbar />
+      <Container>
+        <div className="flex flex-col">
+          {/* <div className="grid grid-cols-3 justify-between text-slate-500 font-medium">
           <div className="flex-flex-row mr-auto text-lg">
             <Button text="GoShort" link="/" />
           </div>
@@ -29,12 +32,14 @@ const App: FunctionComponent = () => {
             {isAuthenticated || <Button text="Login" link="lgn" />}
             {isAuthenticated && <Button text="Logout" link="lgo" />}
           </div>
+        </div> */}
+          <div className="flex flex-col">
+            <Outlet />
+          </div>
         </div>
-        <div className="flex flex-col">
-          <Outlet />
-        </div>
-      </div>
-    </Container>
+      </Container>
+      <ScrollRestoration />
+    </>
   )
 }
 
diff --git a/frontend/src/components/BackButton.tsx b/frontend/src/components/BackButton.tsx
new file mode 100644
index 0000000..9654b0d
--- /dev/null
+++ b/frontend/src/components/BackButton.tsx
@@ -0,0 +1,27 @@
+import { FunctionComponent, useCallback } from "react"
+
+import { ChevronLeftIcon } from "@heroicons/react/24/outline"
+import classNames from "classnames"
+import { useNavigate } from "react-router-dom"
+
+const BackButton: FunctionComponent<{ className?: string }> = ({
+  className,
+}) => {
+  const navigate = useNavigate()
+  const goBack = useCallback(() => navigate(-1), [navigate])
+
+  return (
+    <div
+      className={classNames(
+        className,
+        "text-blue-500 flex flex-row align-middle justify-items-center hover:text-blue-600 duration-200 transition-colors"
+      )}>
+      <ChevronLeftIcon className="w-5 5-6" />
+      <button className="" onClick={goBack}>
+        Back
+      </button>
+    </div>
+  )
+}
+
+export default BackButton
diff --git a/frontend/src/components/Container.tsx b/frontend/src/components/Container.tsx
index be49b9f..642a3a3 100644
--- a/frontend/src/components/Container.tsx
+++ b/frontend/src/components/Container.tsx
@@ -2,7 +2,7 @@ import { FunctionComponent, PropsWithChildren } from "react"
 
 const Container: FunctionComponent<PropsWithChildren> = ({ children }) => {
   return (
-    <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 w-full">
+    <div className="mx-auto max-w-7xl px-4 pb-20 sm:px-6 lg:px-8 w-full">
       {children}
     </div>
   )
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index c8fc0fe..ca179ea 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -2,7 +2,7 @@ import { FunctionComponent } from "react"
 
 const Header: FunctionComponent<{ title: string }> = ({ title }) => {
   return (
-    <header className="pt-20 pb-10 px-3">
+    <header className="pt-14 pb-10">
       <h1 className="text-5xl font-bold">{title}</h1>
     </header>
   )
diff --git a/frontend/src/components/Button.tsx b/frontend/src/components/NavButton.tsx
similarity index 87%
rename from frontend/src/components/Button.tsx
rename to frontend/src/components/NavButton.tsx
index e7b5490..5de40c2 100644
--- a/frontend/src/components/Button.tsx
+++ b/frontend/src/components/NavButton.tsx
@@ -3,7 +3,7 @@ import { FunctionComponent } from "react"
 import classNames from "classnames"
 import { NavLink, useSearchParams } from "react-router-dom"
 
-const Button: FunctionComponent<{
+const NavButton: FunctionComponent<{
   text: string
   onClick?: () => void
   link?: string
@@ -11,7 +11,7 @@ const Button: FunctionComponent<{
   const Content: FunctionComponent<{ active?: boolean }> = ({ active }) => (
     <div
       className={classNames(
-        "px-0 mx-3 py-2 group border-b hover:border-blue-600 transition-colors duration-200",
+        "text-xl px-0 mx-3 py-2 group border-b hover:border-blue-600 transition-colors duration-200",
         { "border-b-2 border-blue-600": active, "border-transparent": !active }
       )}>
       <button
@@ -41,4 +41,4 @@ const Button: FunctionComponent<{
   return <Content />
 }
 
-export default Button
+export default NavButton
diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
new file mode 100644
index 0000000..acafebd
--- /dev/null
+++ b/frontend/src/components/Navbar.tsx
@@ -0,0 +1,146 @@
+import { Fragment, useMemo } from "react"
+
+import { Disclosure, Menu, Transition } from "@headlessui/react"
+import {
+  Bars3Icon,
+  ChevronDownIcon,
+  XMarkIcon,
+} from "@heroicons/react/24/outline"
+import classNames from "classnames"
+import { Link, NavLink } from "react-router-dom"
+
+import { useIsAuthenticated, useUser } from "../hooks/useAuth"
+
+import NavButton from "./NavButton"
+
+export default function Navbar() {
+  const isAuthenticated = useIsAuthenticated()
+  const user = useUser()
+
+  const navigation = useMemo(() => {
+    const authed = [
+      { name: "Shorts", href: "sht" },
+      { name: "Tokens", href: "tkn" },
+      { name: "Sessions", href: "ses" },
+    ]
+    const unauthed = [
+      { name: "Login", href: "lgn" },
+      { name: "Signup", href: "sgn" },
+    ]
+    return isAuthenticated ? authed : unauthed
+  }, [isAuthenticated])
+
+  return (
+    <Disclosure as="nav">
+      {({ open }) => (
+        <>
+          <div
+            className={classNames("mx-auto max-w-7xl px-2 sm:px-6 lg:px-8", {
+              "bg-white": open,
+            })}>
+            <div className="relative flex h-16 items-center justify-between">
+              <div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
+                {/* Mobile menu button*/}
+                <Disclosure.Button className="relative inline-flex items-center justify-center rounded-md p-2 text-slate-500 hover:bg-slate-200 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500">
+                  <span className="absolute -inset-0.5" />
+                  <span className="sr-only">Open main menu</span>
+                  {open ? (
+                    <XMarkIcon className="block h-6 w-6" aria-hidden="true" />
+                  ) : (
+                    <Bars3Icon className="block h-6 w-6" aria-hidden="true" />
+                  )}
+                </Disclosure.Button>
+              </div>
+              <div className="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
+                <div className="flex flex-shrink-0 items-center">
+                  <NavButton text="GoShort" link="/" />
+                </div>
+                <div className="hidden sm:ml-6 sm:flex w-full flex-row justify-center">
+                  <div className="flex space-x-4">
+                    {navigation.map((item) => (
+                      <NavButton
+                        key={item.name}
+                        text={item.name}
+                        link={item.href}
+                      />
+                    ))}
+                  </div>
+                </div>
+              </div>
+              <div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
+                {/* Profile dropdown */}
+                {isAuthenticated && (
+                  <Menu as="div" className="relative ml-3">
+                    <div>
+                      <Menu.Button className="relative px-3 py-2 justify-items-center flex text-lg rounded-lg focus:outline-none focus:ring-none">
+                        <span className="absolute -inset-1.5" />
+                        <span className="sr-only">Open user menu</span>
+                        <span className="my-auto">{user?.username}</span>
+                        <span className="my-auto">
+                          <ChevronDownIcon
+                            className="h-4 w-4 ml-2"
+                            aria-hidden="true"
+                          />
+                        </span>
+                      </Menu.Button>
+                    </div>
+                    <Transition
+                      as={Fragment}
+                      enter="transition ease-out duration-100"
+                      enterFrom="transform opacity-0 scale-95"
+                      enterTo="transform opacity-100 scale-100"
+                      leave="transition ease-in duration-75"
+                      leaveFrom="transform opacity-100 scale-100"
+                      leaveTo="transform opacity-0 scale-95">
+                      <Menu.Items className="absolute right-0 z-10 mt-2 w-32 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                        <Menu.Item>
+                          {({ active }) => (
+                            <Link
+                              to="/lgo"
+                              className={classNames(
+                                active ? "bg-gray-100" : "",
+                                "block px-4 py-2 text-sm text-gray-700"
+                              )}>
+                              Logout
+                            </Link>
+                          )}
+                        </Menu.Item>
+                      </Menu.Items>
+                    </Transition>
+                  </Menu>
+                )}
+                {isAuthenticated || <NavButton text="Login" link="lgn" />}
+              </div>
+            </div>
+          </div>
+
+          <Disclosure.Panel
+            className={classNames("sm:hidden pb-2 flex", {
+              "bg-white shadow": open,
+            })}>
+            {({ close }) => (
+              <div className="space-y-1">
+                {navigation.map((item) => (
+                  <NavLink
+                    onClick={() => close()}
+                    key={item.name}
+                    to={item.href}
+                    className={({ isActive }) =>
+                      classNames(
+                        isActive
+                          ? "bg-blue-100 text-blue-600 border-blue-500"
+                          : "text-slate-500 hover:bg-slate-50 hover:text-slate-600 hover:border-slate-500",
+                        "block border-l-4 border-transparent px-3 py-2 text-base font-medium"
+                      )
+                    }>
+                    {item.name}
+                  </NavLink>
+                ))}
+              </div>
+            )}
+          </Disclosure.Panel>
+        </>
+      )}
+    </Disclosure>
+  )
+}
diff --git a/frontend/src/components/ShortItem.tsx b/frontend/src/components/ShortItem.tsx
index b904770..5cf6694 100644
--- a/frontend/src/components/ShortItem.tsx
+++ b/frontend/src/components/ShortItem.tsx
@@ -68,7 +68,7 @@ const ShortItem: FunctionComponent<Short & { doDelete: () => void }> = ({
         <div className="col-span-10 md:col-span-4 lg:col-span-5 my-auto order-4 md:order-3">
           <a
             href={url}
-            target="_blank"
+            title={url}
             rel="noreferrer"
             className="flex flex-row font-normal leading-6 text-blue-600 hover:text-blue-500 transition-all duration-200">
             <span className="break-all">
@@ -87,10 +87,10 @@ const ShortItem: FunctionComponent<Short & { doDelete: () => void }> = ({
             Last viewed <time dateTime="2023-01-23T13:23Z">3h ago</time>
           </p>
           <Link to={`/sht/${name}`}>
-            <div className="py-1 my-1 text-xs flex flex-row gap-1 text-slate-500 hover:text-blue-500 border-b border-transparent hover:border-blue-500 transition-colors duration-200">
+            <div className="py-1 my-1 text-xs flex flex-row align-middle justify-items-center text-blue-500 hover:text-blue-600 transition-colors duration-200">
               <span className="my-auto">details</span>
 
-              <ChevronRightIcon className="my-auto w-3 h-3 -mr-1" />
+              <ChevronRightIcon className="my-auto w-4 h-4 " />
             </div>
           </Link>
         </div>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 62d2254..22299f5 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -3,6 +3,6 @@
 @tailwind utilities;
 
 :root {
-  @apply text-slate-700;
+  @apply text-slate-700 bg-slate-50;
   font-family: -apple-system, SF Pro Text, SF UI Text, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif;
 }
diff --git a/frontend/src/pages/ShortDetails.tsx b/frontend/src/pages/ShortDetails.tsx
index f245833..dd9e73c 100644
--- a/frontend/src/pages/ShortDetails.tsx
+++ b/frontend/src/pages/ShortDetails.tsx
@@ -1,5 +1,6 @@
 import { LoaderFunction, redirect, useLoaderData } from "react-router-dom"
 
+import BackButton from "../components/BackButton"
 import Header from "../components/Header"
 import { protectedLoader } from "../hooks/useAuth"
 import { Short } from "../types"
@@ -10,6 +11,7 @@ export function Component() {
 
   return (
     <>
+      <BackButton className="absolute mt-10" />
       <Header title={short.name} />
       {short.url}
     </>