From e4a178ff74c8a91ed8595151c12be2b1d10bedc4 Mon Sep 17 00:00:00 2001
From: Henry Wilkinson <henry@wilkinson.graphics>
Date: Thu, 2 Mar 2023 16:23:37 -0500
Subject: [PATCH] Updates crawl details navigation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Adds icons to details nav items
- Adds replay glyph icon
- Hides "Replay" & "Files" pages if the crawl is running
- Updates border radius 3px → 4px
- Updates colour values, aligns with mockups
- Replaces `margin` from menu items with `gap` values
- Removes animation

Prettier made some spacing adjustments, I also moved some lines around so they're all in the same spot now. :grimacing:
---
 frontend/src/assets/icons/link-replay.svg |  6 +++
 frontend/src/pages/org/crawl-detail.ts    | 65 +++++++++++++++++++----
 2 files changed, 60 insertions(+), 11 deletions(-)
 create mode 100644 frontend/src/assets/icons/link-replay.svg

diff --git a/frontend/src/assets/icons/link-replay.svg b/frontend/src/assets/icons/link-replay.svg
new file mode 100644
index 00000000..b1500792
--- /dev/null
+++ b/frontend/src/assets/icons/link-replay.svg
@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.5 5.5H4C2.34315 5.5 1 6.84315 1 8.5C1 10.1569 2.34315 11.5 4 11.5H7C8.65685 11.5 10 10.1569 10 8.5C10 8.14936 9.93985 7.81278 9.82929 7.5C9.46961 7.5 9.10993 7.5 8.75024 7.5C8.90938 7.78696 9 8.14862 9 8.5C9 9.60457 8.10457 10.5 7 10.5H4C2.89543 10.5 2 9.60457 2 8.5C2 7.39543 2.89543 6.5 4 6.5H5.5C5.5 6 5.5 6 5.5 5.5Z" fill="currentColor"/>
+<path d="M9 5.5C7.34315 5.5 6 6.84315 6 8.5C6 8.85064 6.06015 9.18722 6.17071 9.5H7.26756C7.09739 9.20583 7 8.86429 7 8.5C7 7.39543 7.89543 6.5 9 6.5H12C13.1046 6.5 14 7.39543 14 8.5C14 9.60457 13.1046 10.5 12 10.5H10.5C10.5 11 10.5 11 10.5 11.5H12C13.6569 11.5 15 10.1569 15 8.5C15 6.84315 13.6569 5.5 12 5.5H9Z" fill="currentColor"/>
+<path d="M6.5 6L4 7.73205L4 4.26795L6.5 6Z" fill="currentColor"/>
+<path d="M9.5 11L12 9.26795L12 12.732L9.5 11Z" fill="currentColor"/>
+</svg>
diff --git a/frontend/src/pages/org/crawl-detail.ts b/frontend/src/pages/org/crawl-detail.ts
index bcdf1aae..4f4f8b67 100644
--- a/frontend/src/pages/org/crawl-detail.ts
+++ b/frontend/src/pages/org/crawl-detail.ts
@@ -297,47 +297,90 @@ export class CrawlDetail extends LiteElement {
     const renderNavItem = ({
       section,
       label,
+      iconLibrary,
+      icon,
     }: {
       section: SectionName;
       label: any;
+      iconLibrary: any;
+      icon: any;
     }) => {
       const isActive = section === this.sectionName;
       return html`
         <li
-          class="relative"
+          class="relative grow"
           role="menuitem"
           aria-selected=${isActive.toString()}
         >
           <a
-            class="block font-medium rounded-sm mb-2 mr-2 p-2 transition-all ${isActive
-              ? "text-blue-600 bg-blue-50 shadow-sm"
-              : "text-neutral-600 hover:bg-neutral-50"}"
+            class="flex gap-4 flex-col md:flex-row items-center gap-2 font-semibold rounded-md h-full p-2 ${isActive
+              ? "text-blue-600 bg-blue-100 shadow-sm"
+              : "text-neutral-600 hover:bg-blue-50"}"
             href=${`${this.crawlsBaseUrl}/crawl/${this.crawlId}#${section}`}
             @click=${() => (this.sectionName = section)}
           >
+            <sl-icon
+              class="w-4 h-4 shrink-0"
+              name=${icon}
+              aria-hidden="true"
+              library=${iconLibrary}
+            ></sl-icon>
             ${label}
           </a>
         </li>
       `;
     };
     return html`
-      <nav class="border-b md:border-b-0 md:mt-10">
-        <ul class="flex flex-row md:flex-col" role="menu">
-          ${renderNavItem({ section: "overview", label: msg("Overview") })}
+      <nav class="border-b md:border-b-0 pb-4 md:mt-10">
+        <ul
+          class="flex flex-row md:flex-col gap-2 text-center md:text-start"
+          role="menu"
+        >
+          ${renderNavItem({
+            section: "overview",
+            iconLibrary: "default",
+            icon: "info-circle-fill",
+            label: msg("Overview"),
+          })}
           ${renderNavItem({
             section: "exclusions",
+            iconLibrary: "default",
+            icon: "list-ul",
             label: msg("Crawl Queue & Exclusions"),
           })}
           ${this.isActive
             ? renderNavItem({
                 section: "watch",
+                iconLibrary: "default",
+                icon: "eye-fill",
                 label: msg("Watch Crawl"),
               })
             : ""}
-          ${renderNavItem({ section: "replay", label: msg("Replay") })}
-          ${renderNavItem({ section: "files", label: msg("Files") })}
-          ${renderNavItem({ section: "config", label: msg("Config") })}
-          ${/* renderNavItem({ section: "logs", label: msg("Logs") }) */ ""}
+          ${!this.isActive
+            ? renderNavItem({
+                section: "replay",
+                iconLibrary: "app",
+                icon: "link-replay",
+                label: msg("Replay"),
+              })
+            : ""}
+          ${!this.isActive
+            ? renderNavItem({
+                section: "files",
+                iconLibrary: "default",
+                icon: "folder-fill",
+                label: msg("Files"),
+              })
+            : ""}
+          ${renderNavItem({
+            section: "config",
+            iconLibrary: "default",
+            icon: "file-code-fill",
+            label: msg("Config"),
+          })}
+          ${
+            /* renderNavItem({ section: "logs", iconLibrary:"default", icon: "terminal-fill", label: msg("Logs") }) */ ""
+          }
         </ul>
       </nav>
     `;