From 63bf5bdc87c9aecf17c27d99a1298d7331f3423a Mon Sep 17 00:00:00 2001
From: Shaheer Sarfaraz <53654735+DaKheera47@users.noreply.github.com>
Date: Wed, 18 Feb 2026 13:36:16 +0000
Subject: [PATCH] fix: move docs button to sidebar footer and open in new tab
 (#184)

* fix(ui): move docs to sidebar footer button with new-tab icon

* sidebar documentation
---
 docs-site/docs/features/orchestrator.md       |  5 +
 orchestrator/src/client/components/layout.tsx | 99 ++++++++++---------
 .../src/client/components/navigation.ts       | 15 ---
 3 files changed, 56 insertions(+), 63 deletions(-)

diff --git a/docs-site/docs/features/orchestrator.md b/docs-site/docs/features/orchestrator.md
index 0126206..34d62f6 100644
--- a/docs-site/docs/features/orchestrator.md
+++ b/docs-site/docs/features/orchestrator.md
@@ -57,6 +57,11 @@ Ghostwriter is available in `discovered` and `ready` job views.
 
 For details, see [Ghostwriter](/docs/next/features/ghostwriter).
 
+### Opening documentation from the sidebar
+
+1. Open the sidebar menu.
+2. In the footer section under `Version <build>`, click **Documentation**, which opens the locally hosted docs in a new tab.
+
 ### Generating PDFs
 
 PDF generation uses:
diff --git a/orchestrator/src/client/components/layout.tsx b/orchestrator/src/client/components/layout.tsx
index 3b86cb5..d95c572 100644
--- a/orchestrator/src/client/components/layout.tsx
+++ b/orchestrator/src/client/components/layout.tsx
@@ -2,7 +2,7 @@
  * Shared layout components for consistent page structure.
  */
 
-import { type LucideIcon, Menu } from "lucide-react";
+import { ExternalLink, type LucideIcon, Menu } from "lucide-react";
 import type React from "react";
 import { useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
@@ -60,22 +60,12 @@ export const PageHeader: React.FC<PageHeaderProps> = ({
   const setNavOpen = onNavOpenChange ?? setInternalNavOpen;
   const { version, updateAvailable } = useVersionCheck();
 
-  const handleNavClick = (
-    to: string,
-    activePaths?: string[],
-    external?: boolean,
-  ) => {
+  const handleNavClick = (to: string, activePaths?: string[]) => {
     if (isNavActive(location.pathname, to, activePaths)) {
       setNavOpen(false);
       return;
     }
     setNavOpen(false);
-    if (external) {
-      setTimeout(() => {
-        window.location.href = to;
-      }, 150);
-      return;
-    }
     setTimeout(() => navigate(to), 150);
   };
 
@@ -95,46 +85,59 @@ export const PageHeader: React.FC<PageHeaderProps> = ({
                 <SheetTitle>JobOps</SheetTitle>
               </SheetHeader>
               <nav className="mt-6 flex flex-col gap-2">
-                {NAV_LINKS.map(
-                  ({ to, label, icon: NavIcon, activePaths, external }) => (
-                    <button
-                      key={to}
-                      type="button"
-                      onClick={() => handleNavClick(to, activePaths, external)}
-                      className={cn(
-                        "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground text-left",
-                        isNavActive(location.pathname, to, activePaths)
-                          ? "bg-accent text-accent-foreground"
-                          : "text-muted-foreground",
-                      )}
-                    >
-                      <NavIcon className="h-4 w-4" />
-                      {label}
-                    </button>
-                  ),
-                )}
+                {NAV_LINKS.map(({ to, label, icon: NavIcon, activePaths }) => (
+                  <button
+                    key={to}
+                    type="button"
+                    onClick={() => handleNavClick(to, activePaths)}
+                    className={cn(
+                      "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground text-left",
+                      isNavActive(location.pathname, to, activePaths)
+                        ? "bg-accent text-accent-foreground"
+                        : "text-muted-foreground",
+                    )}
+                  >
+                    <NavIcon className="h-4 w-4" />
+                    {label}
+                  </button>
+                ))}
               </nav>
               {showVersionFooter && (
                 <div className="mt-auto pt-6 pb-2">
                   <TooltipProvider>
-                    <a
-                      href="https://github.com/DaKheera47/job-ops/releases"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="flex items-center gap-2 text-xs text-muted-foreground hover:text-foreground transition-colors"
-                    >
-                      <span>Version {version}</span>
-                      {updateAvailable && (
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <span className="h-2 w-2 rounded-full bg-emerald-500 cursor-pointer" />
-                          </TooltipTrigger>
-                          <TooltipContent>
-                            <p>Update available</p>
-                          </TooltipContent>
-                        </Tooltip>
-                      )}
-                    </a>
+                    <div className="flex flex-col items-start gap-2">
+                      <a
+                        href="https://github.com/DaKheera47/job-ops/releases"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="flex min-w-0 items-center gap-2 text-xs text-muted-foreground transition-colors hover:text-foreground"
+                      >
+                        <span className="truncate">Version {version}</span>
+                        {updateAvailable && (
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <span className="h-2 w-2 shrink-0 cursor-pointer rounded-full bg-emerald-500" />
+                            </TooltipTrigger>
+                            <TooltipContent>
+                              <p>Update available</p>
+                            </TooltipContent>
+                          </Tooltip>
+                        )}
+                      </a>
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        onClick={() => {
+                          setNavOpen(false);
+                          window.open("/docs", "_blank", "noopener,noreferrer");
+                        }}
+                        className="h-7 gap-1.5 px-2 text-xs"
+                      >
+                        <span>Documentation</span>
+                        <ExternalLink className="h-3.5 w-3.5" />
+                      </Button>
+                    </div>
                   </TooltipProvider>
                 </div>
               )}
diff --git a/orchestrator/src/client/components/navigation.ts b/orchestrator/src/client/components/navigation.ts
index 5e4f840..ad6ea30 100644
--- a/orchestrator/src/client/components/navigation.ts
+++ b/orchestrator/src/client/components/navigation.ts
@@ -1,5 +1,4 @@
 import {
-  BookOpen,
   Columns3,
   Home,
   Inbox,
@@ -8,26 +7,13 @@ import {
   Shield,
 } from "lucide-react";
 
-declare const __APP_VERSION__: string;
-
 export type NavLink = {
   to: string;
   label: string;
   icon: typeof Home;
   activePaths?: string[];
-  external?: boolean;
 };
 
-const releaseVersion = (() => {
-  if (typeof __APP_VERSION__ !== "string") return null;
-  const match = __APP_VERSION__.match(/^v\d+\.\d+\.\d+/);
-  return match ? match[0] : null;
-})();
-
-const docsLabel = releaseVersion
-  ? `Documentation (${releaseVersion})`
-  : "Documentation";
-
 export const NAV_LINKS: NavLink[] = [
   { to: "/overview", label: "Overview", icon: Home },
   {
@@ -48,7 +34,6 @@ export const NAV_LINKS: NavLink[] = [
     activePaths: ["/applications/in-progress"],
   },
   { to: "/tracking-inbox", label: "Tracking Inbox", icon: Inbox },
-  { to: "/docs", label: docsLabel, icon: BookOpen, external: true },
   { to: "/visa-sponsors", label: "Visa Sponsors", icon: Shield },
   { to: "/settings", label: "Settings", icon: Settings },
 ];