feat(clerk-js): Move sandbox nav to a sidebar (#4617)

clerk · Nov 20, 2024 · 860edfd · 860edfd
1 parent 7c63110
commit 860edfd
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 71 deletions.
diff --git a/.changeset/unlucky-teachers-joke.md b/.changeset/unlucky-teachers-joke.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/sandbox/app.js b/packages/clerk-js/sandbox/app.js
@@ -163,8 +163,8 @@ function addCurrentRouteIndicator(currentRoute) {
   if (!link) {
     return;
   }
-  link.classList.remove('text-gray-400', 'hover:bg-[#1D1D21]', 'hover:text-white');
-  link.classList.add('bg-[#1D1D21]', 'text-white');
+  link.removeAttribute('aria-current');
+  link.setAttribute('aria-current', 'page');
 }
 
 (async () => {

diff --git a/packages/clerk-js/sandbox/template.html b/packages/clerk-js/sandbox/template.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html>
+<html class="h-full">
   <head>
     <title>clerk-js Sandbox</title>
     <script src="https://cdn.tailwindcss.com"></script>
@@ -126,77 +126,124 @@
       };
     </script>
   </head>
-  <body class="bg-gray-100">
-    <nav class="bg-gray-950">
-      <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-        <div class="flex h-16 items-center justify-between">
-          <div class="flex items-center">
-            <div class="md:block">
-              <div class="flex items-baseline space-x-2">
-                <a
-                  href="/"
-                  class="rounded-md px-3 py-2 text-sm font-medium text-gray-400 transition-colors hover:bg-[#1D1D21] hover:text-white"
-                  >/</a
-                >
-                <a
-                  href="/sign-in"
-                  class="rounded-md px-3 py-2 text-sm font-medium text-gray-400 transition-colors hover:bg-[#1D1D21] hover:text-white"
-                  >Sign In</a
-                >
-                <a
-                  href="/sign-up"
-                  class="rounded-md px-3 py-2 text-sm font-medium text-gray-400 transition-colors hover:bg-[#1D1D21] hover:text-white"
-                  >Sign Up</a
-                >
-                <a
-                  href="/user-button"
-                  class="rounded-md px-3 py-2 text-sm font-medium text-gray-400 transition-colors hover:bg-[#1D1D21] hover:text-white"
-                  >User Button</a
-                >
-                <a
-                  href="/user-profile"
-                  class="rounded-md px-3 py-2 text-sm font-medium text-gray-400 transition-colors hover:bg-[#1D1D21] hover:text-white"
-                  >User Profile</a
-                >
-                <a
-                  href="/create-organization"
-                  class="rounded-md px-3 py-2 text-sm font-medium text-gray-400 transition-colors hover:bg-[#1D1D21] hover:text-white"
-                  >Create Organization</a
-                >
-                <a
-                  href="/organization-list"
-                  class="rounded-md px-3 py-2 text-sm font-medium text-gray-400 transition-colors hover:bg-[#1D1D21] hover:text-white"
-                  >Organization List</a
-                >
-                <a
-                  href="/organization-profile"
-                  class="rounded-md px-3 py-2 text-sm font-medium text-gray-400 transition-colors hover:bg-[#1D1D21] hover:text-white"
-                  >Organization Profile</a
-                >
-                <a
-                  href="/organization-switcher"
-                  class="rounded-md px-3 py-2 text-sm font-medium text-gray-400 transition-colors hover:bg-[#1D1D21] hover:text-white"
-                  >Organization Switcher</a
-                >
-                <a
-                  href="/waitlist"
-                  class="rounded-md px-3 py-2 text-sm font-medium text-gray-400 transition-colors hover:bg-[#1D1D21] hover:text-white"
-                  >Waitlist</a
-                >
-              </div>
-            </div>
-          </div>
+  <body class="flex min-h-full flex-col overflow-x-hidden bg-gray-50">
+    <div class="fixed inset-y-0 left-0 w-72 overflow-y-auto border-r border-gray-100 bg-white px-2 py-4">
+      <header class="mb-2 flex items-center justify-center gap-x-2 border-b border-gray-100 pb-4">
+        <svg
+          viewBox="0 0 62 18"
+          fill="none"
+          aria-hidden="true"
+          class="h-[1.125rem] text-gray-950 dark:text-white"
+        >
+          <ellipse
+            cx="8.99999"
+            cy="9"
+            rx="2.81249"
+            ry="2.8125"
+            class="fill-current"
+          ></ellipse>
+          <path
+            d="M14.0674 15.6591C14.3067 15.8984 14.2827 16.2945 14.0015 16.4829C12.571 17.4411 10.8504 17.9999 8.9993 17.9999C7.14818 17.9999 5.42758 17.4411 3.99704 16.4829C3.71589 16.2945 3.69186 15.8984 3.93115 15.6591L5.98648 13.6037C6.17225 13.418 6.46042 13.3886 6.69424 13.5084C7.3856 13.8626 8.16911 14.0624 8.9993 14.0624C9.82948 14.0624 10.613 13.8626 11.3044 13.5084C11.5382 13.3886 11.8263 13.418 12.0121 13.6037L14.0674 15.6591Z"
+            class="fill-current"
+          ></path>
+          <path
+            d="M14.0022 1.51706C14.2834 1.70539 14.3074 2.10155 14.0681 2.34084L12.0128 4.39619C11.827 4.58195 11.5388 4.61129 11.305 4.49151C10.6136 4.13733 9.83014 3.9375 8.99996 3.9375C6.20403 3.9375 3.93748 6.20406 3.93748 9C3.93748 9.83018 4.13731 10.6137 4.49149 11.3051C4.61127 11.5389 4.58193 11.827 4.39617 12.0128L2.34083 14.0682C2.10154 14.3074 1.70538 14.2834 1.51705 14.0023C0.558857 12.5717 0 10.8511 0 9C0 4.02944 4.02942 0 8.99996 0C10.8511 0 12.5717 0.55886 14.0022 1.51706Z"
+            fill-opacity="0.5"
+            class="fill-current"
+          ></path>
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M29.3906 1.82813C29.3906 1.75046 29.4535 1.6875 29.5312 1.6875H31.6406C31.7182 1.6875 31.7812 1.75046 31.7812 1.82813V16.1719C31.7812 16.2495 31.7182 16.3125 31.6406 16.3125H29.5312C29.4535 16.3125 29.3906 16.2495 29.3906 16.1719V1.82813ZM26.4137 13.2701C26.3577 13.2217 26.2739 13.2253 26.2201 13.2761C25.8913 13.5864 25.5063 13.8347 25.0843 14.0078C24.6215 14.1979 24.1239 14.2936 23.622 14.2891C23.1982 14.3016 22.7762 14.2291 22.3821 14.076C21.988 13.9229 21.63 13.6925 21.3303 13.3989C20.7859 12.8431 20.4726 12.0496 20.4726 11.1037C20.4726 9.2101 21.7324 7.91491 23.622 7.91491C24.1289 7.90793 24.631 8.01058 25.0926 8.21543C25.5111 8.40122 25.8869 8.66683 26.1982 8.99629C26.2514 9.05264 26.3398 9.05916 26.3985 9.00842L27.8225 7.7762C27.8807 7.72586 27.8877 7.63797 27.8364 7.58065C26.7653 6.38368 25.0872 5.76563 23.4914 5.76563C20.2783 5.76563 18 7.93299 18 11.1217C18 12.6988 18.5662 14.0268 19.5211 14.9645C20.476 15.9023 21.8363 16.4531 23.4059 16.4531C25.3741 16.4531 26.9582 15.6984 27.8869 14.7302C27.9414 14.6734 27.9354 14.583 27.8758 14.5315L26.4137 13.2701ZM43.401 11.8056C43.3931 11.876 43.3332 11.9287 43.2623 11.9287H35.8731C35.7833 11.9287 35.7164 12.012 35.7398 12.0986C36.1074 13.4614 37.2035 14.286 38.6995 14.286C39.2038 14.2966 39.7037 14.1928 40.1605 13.9827C40.5862 13.787 40.9639 13.5038 41.2682 13.1528C41.305 13.1104 41.3691 13.1041 41.4122 13.1401L42.8978 14.4335C42.9547 14.483 42.9626 14.5687 42.9138 14.6262C42.0169 15.6843 40.5637 16.4531 38.5695 16.4531C35.5016 16.4531 33.1874 14.3286 33.1874 11.1009C33.1874 9.51732 33.7326 8.18944 34.6412 7.25179C35.1209 6.76963 35.6959 6.38911 36.3307 6.13368C36.9656 5.87826 37.6469 5.75332 38.3327 5.76658C41.4422 5.76658 43.453 7.95343 43.453 10.973C43.4491 11.2512 43.4317 11.5291 43.401 11.8056ZM35.7842 9.84589C35.7581 9.93268 35.8251 10.0172 35.9158 10.0172H40.829C40.9198 10.0172 40.9869 9.93217 40.9617 9.84491C40.6268 8.68592 39.7772 7.91244 38.4577 7.91244C38.0696 7.90013 37.6834 7.97039 37.3254 8.11832C36.9675 8.26633 36.6462 8.48856 36.3836 8.76977C36.1075 9.08283 35.9034 9.44988 35.7842 9.84589ZM50.7639 5.76717C50.8422 5.76632 50.9061 5.82952 50.9061 5.90779V8.26951C50.9061 8.35135 50.8365 8.41586 50.7548 8.40981C50.5269 8.39291 50.3114 8.37856 50.1701 8.37856C48.3301 8.37856 47.2499 9.67359 47.2499 11.3735V16.1719C47.2499 16.2495 47.1869 16.3125 47.1092 16.3125H44.9999C44.9222 16.3125 44.8592 16.2495 44.8592 16.1719V6.05379C44.8592 5.97613 44.9222 5.91317 44.9999 5.91317H47.1092C47.1869 5.91317 47.2499 5.97613 47.2499 6.05379V7.47394C47.2499 7.48196 47.2563 7.48845 47.2644 7.48845C47.2689 7.48845 47.2733 7.48627 47.276 7.48261C48.1006 6.38146 49.3176 5.76892 50.6033 5.76892L50.7639 5.76717ZM56.4778 11.9525C56.4864 11.9432 56.4985 11.938 56.5112 11.938C56.5269 11.938 56.5415 11.9461 56.5498 11.9595L59.217 16.2462C59.2426 16.2874 59.2878 16.3125 59.3364 16.3125L61.7342 16.3125C61.8445 16.3125 61.9118 16.1915 61.8538 16.0978L58.1947 10.1939C58.1616 10.1406 58.1679 10.0719 58.21 10.0254L61.7355 6.13573C61.8174 6.04534 61.7533 5.90066 61.6313 5.90066H59.1298C59.0904 5.90066 59.0528 5.91719 59.0261 5.94622L54.9472 10.3925C54.8605 10.487 54.7029 10.4257 54.7029 10.2974V1.82812C54.7029 1.75046 54.64 1.6875 54.5623 1.6875H52.453C52.3753 1.6875 52.3123 1.75046 52.3123 1.82812V16.1719C52.3123 16.2495 52.3753 16.3125 52.453 16.3125L54.5623 16.3125C54.64 16.3125 54.7029 16.2495 54.7029 16.1719V13.9147C54.7029 13.8792 54.7164 13.8449 54.7406 13.8189L56.4778 11.9525Z"
+            class="fill-current"
+          ></path>
+        </svg>
+        <div
+          class="bg-gray-25 mt-0.5 rounded-full px-2 py-1 text-[0.625rem]/3 font-medium text-gray-600 ring-1 ring-inset ring-gray-100 dark:bg-gray-900 dark:text-gray-400 dark:ring-gray-700"
+        >
+          Sandbox
         </div>
-      </div>
-    </nav>
-
-    <div class="flex justify-center p-8">
-      <div
-        id="app"
-        class="overflow-x-auto"
-      ></div>
+      </header>
+      <nav>
+        <ul role="list">
+          <li class="relative">
+            <a
+              class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
+              href="/"
+              >Home</a
+            >
+          </li>
+          <li class="relative">
+            <a
+              class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
+              href="/sign-in"
+              >Sign In</a
+            >
+          </li>
+          <li class="relative">
+            <a
+              class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
+              href="/sign-up"
+              >Sign Up</a
+            >
+          </li>
+          <li class="relative">
+            <a
+              class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
+              href="/user-button"
+              >User Button</a
+            >
+          </li>
+          <li class="relative">
+            <a
+              class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
+              href="/user-profile"
+              >User Profile</a
+            >
+          </li>
+          <li class="relative">
+            <a
+              class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
+              href="/create-organization"
+              >Create Organization</a
+            >
+          </li>
+          <li class="relative">
+            <a
+              class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
+              href="/organization-list"
+              >Organization List</a
+            >
+          </li>
+          <li class="relative">
+            <a
+              class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
+              href="/organization-profile"
+              >Organization Profile</a
+            >
+          </li>
+          <li class="relative">
+            <a
+              class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
+              href="/organization-switcher"
+              >Organization Switcher</a
+            >
+          </li>
+          <li class="relative">
+            <a
+              class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
+              href="/waitlist"
+              >Waitlist</a
+            >
+          </li>
+        </ul>
+      </nav>
     </div>
 
+    <main class="bg-gray-25 flex h-full flex-1 items-center justify-center overflow-y-auto overflow-x-hidden pl-72">
+      <div id="app"></div>
+    </main>
+
     <!-- This app is in the Team SDK organization. -->
     <script
       type="text/javascript"

diff --git a/packages/clerk-js/vercel.json b/packages/clerk-js/vercel.json
@@ -0,0 +1,3 @@
+{
+  "rewrites": [{ "source": "/(.*)", "destination": "/" }]
+}