initial setup, ztdl-login, core

2025-12-12 07:24:51 +00:00 · 2023-04-03 13:39:51 +02:00
parent c1c9ccbf03
commit f9299ad990
100 changed files with 126387 additions and 81 deletions
--- a/apps/login/ui/GlobalNav.tsx
+++ b/apps/login/ui/GlobalNav.tsx
@@ -0,0 +1,101 @@
+'use client';
+
+import { demos, type Item } from '#/lib/demos';
+import '#/styles/globals.css';
+import { ZitadelLogo } from '#/ui/ZitadelLogo';
+import Link from 'next/link';
+import { useSelectedLayoutSegment } from 'next/navigation';
+import clsx from 'clsx';
+import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/solid';
+import { useState } from 'react';
+
+export function GlobalNav() {
+  const [isOpen, setIsOpen] = useState(false);
+  const close = () => setIsOpen(false);
+
+  return (
+    <div className="fixed top-0 z-10 flex w-full flex-col border-b border-gray-800 bg-background-dark-600 lg:bottom-0 lg:z-auto lg:w-72 lg:border-r lg:border-gray-800">
+      <div className="flex h-14 items-center py-4 px-4 lg:h-auto">
+        <Link
+          href="/"
+          className="group flex w-full items-center space-x-2.5"
+          onClick={close}
+        >
+          <div className="h-8 w-8">
+            <ZitadelLogo />
+          </div>
+
+          <h2 className="font-medium tracking-wide text-gray-300 group-hover:text-gray-50">
+            Login Playground <span className="Work in progress">(WIP)</span>
+          </h2>
+        </Link>
+      </div>
+      <button
+        type="button"
+        className="group absolute right-0 top-0 flex h-14 items-center space-x-2 px-4 lg:hidden"
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        <div className="font-medium text-gray-100 group-hover:text-gray-400">
+          Menu
+        </div>
+        {isOpen ? (
+          <XMarkIcon className="block w-6 text-gray-300" />
+        ) : (
+          <Bars3Icon className="block w-6 text-gray-300" />
+        )}
+      </button>
+
+      <div
+        className={clsx('overflow-y-auto lg:static lg:block', {
+          'fixed inset-x-0 bottom-0 top-14 mt-px bg-black': isOpen,
+          hidden: !isOpen,
+        })}
+      >
+        <nav className="space-y-6 px-2 py-5">
+          {demos.map((section) => {
+            return (
+              <div key={section.name}>
+                <div className="mb-2 px-3 text-xs font-semibold uppercase tracking-wider text-gray-600">
+                  <div>{section.name}</div>
+                </div>
+
+                <div className="space-y-1">
+                  {section.items.map((item) => (
+                    <GlobalNavItem key={item.slug} item={item} close={close} />
+                  ))}
+                </div>
+              </div>
+            );
+          })}
+        </nav>
+      </div>
+    </div>
+  );
+}
+
+function GlobalNavItem({
+  item,
+  close,
+}: {
+  item: Item;
+  close: () => false | void;
+}) {
+  const segment = useSelectedLayoutSegment();
+  const isActive = item.slug === segment;
+
+  return (
+    <Link
+      onClick={close}
+      href={`/${item.slug}`}
+      className={clsx(
+        'block rounded-md px-3 py-2 text-sm font-medium  hover:text-gray-300',
+        {
+          'text-gray-500 hover:bg-gray-800': !isActive,
+          'text-gray-200': isActive,
+        },
+      )}
+    >
+      {item.name}
+    </Link>
+  );
+}