Update app layout (#78)

closes #75

frontend/src/index.ts

@@ -195,12 +195,13 @@ export class App extends LiteElement {
 
   renderNavBar() {
     return html`
+      <div class="bg-gray-900 text-gray-50">
         <nav
-        class="flex items-center justify-between p-2 bg-gray-900 text-gray-50"
+          class="max-w-screen-xl mx-auto p-2 box-border flex items-center justify-between"
         >
           <div>
-          <a href="/" @click="${this.navLink}"
+            <a href="/archives" @click="${this.navLink}"
-            ><h1 class="text-base px-2">${msg("Browsertrix Cloud")}</h1></a
+              ><h1 class="text-base">${msg("Browsertrix Cloud")}</h1></a
             >
           </div>
           <div class="grid grid-flow-col gap-5 items-center">
@@ -218,6 +219,13 @@ export class App extends LiteElement {
                     >
                       ${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
                     >
@@ -225,12 +233,16 @@ export class App extends LiteElement {
                 </sl-dropdown>`
               : html`
                   <a href="/log-in"> ${msg("Log In")} </a>
-                <sl-button outline @click="${() => this.navigate("/sign-up")}">
+                  <sl-button
+                    outline
+                    @click="${() => this.navigate("/sign-up")}"
+                  >
                     <span class="text-white">${msg("Sign up")}</span>
                   </sl-button>
                 `}
           </div>
         </nav>
+      </div>
     `;
   }
 
@@ -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}>