Update app layout (#78)

closes #75

frontend/src/index.ts

@@ -195,42 +195,54 @@ export class App extends LiteElement {
 
   renderNavBar() {
     return html`
-      <nav
+      <div class="bg-gray-900 text-gray-50">
-        class="flex items-center justify-between p-2 bg-gray-900 text-gray-50"
+        <nav
-      >
+          class="max-w-screen-xl mx-auto p-2 box-border flex items-center justify-between"
-        <div>
+        >
-          <a href="/" @click="${this.navLink}"
+          <div>
-            ><h1 class="text-base px-2">${msg("Browsertrix Cloud")}</h1></a
+            <a href="/archives" @click="${this.navLink}"
-          >
+              ><h1 class="text-base">${msg("Browsertrix Cloud")}</h1></a
-        </div>
+            >
-        <div class="grid grid-flow-col gap-5 items-center">
+          </div>
-          ${this.authService.authState
+          <div class="grid grid-flow-col gap-5 items-center">
-            ? html` <sl-dropdown>
+            ${this.authService.authState
-                <div class="p-2" role="button" slot="trigger">
+              ? html` <sl-dropdown>
-                  ${this.userInfo?.name || this.userInfo?.email}
+                  <div class="p-2" role="button" slot="trigger">
-                  <span class="text-xs"
+                    ${this.userInfo?.name || this.userInfo?.email}
-                    ><sl-icon name="chevron-down"></sl-icon
+                    <span class="text-xs"
-                  ></span>
+                      ><sl-icon name="chevron-down"></sl-icon
-                </div>
+                    ></span>
-                <sl-menu>
+                  </div>
-                  <sl-menu-item
+                  <sl-menu>
-                    @click=${() => this.navigate(ROUTES.accountSettings)}
+                    <sl-menu-item
+                      @click=${() => this.navigate(ROUTES.accountSettings)}
+                    >
+                      ${msg("Your account")}
+                    </sl-menu-item>
+                    ${this.userInfo?.isAdmin
+                      ? html` <sl-menu-item
+                          @click=${() => this.navigate(ROUTES.usersInvite)}
+                        >
+                          ${msg("Invite Users")}
+                        </sl-menu-item>`
+                      : ""}
+                    <sl-menu-item @click="${this.onLogOut}"
+                      >${msg("Log Out")}</sl-menu-item
+                    >
+                  </sl-menu>
+                </sl-dropdown>`
+              : html`
+                  <a href="/log-in"> ${msg("Log In")} </a>
+                  <sl-button
+                    outline
+                    @click="${() => this.navigate("/sign-up")}"
                   >
-                    ${msg("Your account")}
+                    <span class="text-white">${msg("Sign up")}</span>
-                  </sl-menu-item>
+                  </sl-button>
-                  <sl-menu-item @click="${this.onLogOut}"
+                `}
-                    >${msg("Log Out")}</sl-menu-item
+          </div>
-                  >
+        </nav>
-                </sl-menu>
+      </div>
-              </sl-dropdown>`
-            : html`
-                <a href="/log-in"> ${msg("Log In")} </a>
-                <sl-button outline @click="${() => this.navigate("/sign-up")}">
-                  <span class="text-white">${msg("Sign up")}</span>
-                </sl-button>
-              `}
-        </div>
-      </nav>
     `;
   }
 
@@ -256,32 +268,8 @@ export class App extends LiteElement {
       </li>
     `;
     const appLayout = (template: TemplateResult) => html`
-      <div class="w-full flex flex-col md:flex-row">
+      <div class="w-full max-w-screen-xl mx-auto p-2 md:py-8 box-border">
-        <nav class="md:w-80 md:p-4 md:border-r">
+        ${template}
-          <ul class="flex md:flex-col">
-            ${navLink({
-              activeRoutes: ["archives", "archive"],
-              href: DASHBOARD_ROUTE,
-              label: msg("Archives"),
-            })}
-          </ul>
-          ${this.userInfo?.isAdmin
-            ? html` <span class="uppercase text-sm font-medium"
-                  >${msg("Admin", {
-                    desc: "Heading for links to administrative pages",
-                  })}</span
-                >
-                <ul class="flex md:flex-col">
-                  ${navLink({
-                    // activeRoutes: ["users", "usersInvite"],
-                    activeRoutes: ["usersInvite"],
-                    href: ROUTES.usersInvite,
-                    label: msg("Invite Users"),
-                  })}
-                </ul>`
-            : ""}
-        </nav>
-        <div class="p-4 md:p-8 flex-1">${template}</div>
       </div>
     `;
 

frontend/src/pages/archive.ts

@@ -68,9 +68,16 @@ export class Archive extends LiteElement {
     const showMembers = Boolean(this.archive.users);
 
     return html`<article class="grid gap-4">
-      <header>
+      <nav class="font-medium text-sm text-gray-500">
-        <h1 class="text-2xl font-bold">${this.archive.name}</h1>
+        <a
-      </header>
+          class="text-primary hover:underline"
+          href="/archives"
+          @click="${this.navLink}"
+          >${msg("Archives")}</a
+        >
+        <span class="font-mono">/</span>
+        <span>${this.archive.name}</span>
+      </nav>
 
       <main>
         <sl-tab-group @sl-tab-show=${this.updateUrl}>