feat(sidebar): add right-click context menu to settings nav item (#3715)

* feat(sidebar): add right-click context menu to settings nav item

* fix(sidebar): revert settings active highlight

* fix(sidebar): allow modifier-key clicks to open in new tab, make InfisicalIcon black

* update icons

apps/docs/components/icons.tsx

@@ -4143,7 +4143,7 @@ export function InfisicalIcon(props: SVGProps<SVGSVGElement>) {
     <svg {...props} viewBox='20 25 233 132' xmlns='http://www.w3.org/2000/svg'>
       <path
         d='m191.6 39.4c-20.3 0-37.15 13.21-52.9 30.61-12.99-16.4-29.8-30.61-51.06-30.61-27.74 0-50.44 23.86-50.44 51.33 0 26.68 21.43 51.8 48.98 51.8 20.55 0 37.07-13.86 51.32-31.81 12.69 16.97 29.1 31.41 53.2 31.41 27.13 0 49.85-22.96 49.85-51.4 0-27.12-20.44-51.33-48.95-51.33zm-104.3 77.94c-14.56 0-25.51-12.84-25.51-26.07 0-13.7 10.95-28.29 25.51-28.29 14.93 0 25.71 11.6 37.6 27.34-11.31 15.21-22.23 27.02-37.6 27.02zm104.4 0.25c-15 0-25.28-11.13-37.97-27.37 12.69-16.4 22.01-27.24 37.59-27.24 14.97 0 24.79 13.25 24.79 27.26 0 13-10.17 27.35-24.41 27.35z'
-        fill='currentColor'
+        fill='#000000'
       />
     </svg>
   )

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx

@@ -199,27 +199,41 @@ const SidebarNavItem = memo(function SidebarNavItem({
     'group flex h-[30px] items-center gap-[8px] rounded-[8px] mx-[2px] px-[8px] text-[14px] hover:bg-[var(--surface-active)]'
   const activeClasses = active ? 'bg-[var(--surface-active)]' : ''
 
-  const element = item.onClick ? (
+  const content = (
+    <>
+      <Icon className='h-[16px] w-[16px] flex-shrink-0 text-[var(--text-icon)]' />
+      <span className='truncate font-base text-[var(--text-body)]'>{item.label}</span>
+    </>
+  )
+
+  const element = item.href ? (
+    <Link
+      href={item.href}
+      data-item-id={item.id}
+      className={`${baseClasses} ${activeClasses}`}
+      onClick={
+        item.onClick
+          ? (e) => {
+              if (e.ctrlKey || e.metaKey || e.shiftKey) return
+              e.preventDefault()
+              item.onClick!()
+            }
+          : undefined
+      }
+      onContextMenu={onContextMenu ? (e) => onContextMenu(e, item.href!) : undefined}
+    >
+      {content}
+    </Link>
+  ) : item.onClick ? (
     <button
       type='button'
       data-item-id={item.id}
       className={`${baseClasses} ${activeClasses}`}
       onClick={item.onClick}
     >
-      <Icon className='h-[16px] w-[16px] flex-shrink-0 text-[var(--text-icon)]' />
-      <span className='truncate font-base text-[var(--text-body)]'>{item.label}</span>
+      {content}
     </button>
-  ) : (
-    <Link
-      href={item.href!}
-      data-item-id={item.id}
-      className={`${baseClasses} ${activeClasses}`}
-      onContextMenu={onContextMenu ? (e) => onContextMenu(e, item.href!) : undefined}
-    >
-      <Icon className='h-[16px] w-[16px] flex-shrink-0 text-[var(--text-icon)]' />
-      <span className='truncate font-base text-[var(--text-body)]'>{item.label}</span>
-    </Link>
-  )
+  ) : null
 
   return (
     <Tooltip.Root>
@@ -263,7 +277,7 @@ export const Sidebar = memo(function Sidebar() {
   const { data: sessionData, isPending: sessionLoading } = useSession()
   const { canEdit } = useUserPermissionsContext()
   const { config: permissionConfig, filterBlocks } = usePermissionConfig()
-  const { navigateToSettings } = useSettingsNavigation()
+  const { navigateToSettings, getSettingsHref } = useSettingsNavigation()
   const initializeSearchData = useSearchModalStore((state) => state.initializeData)
 
   useEffect(() => {
@@ -592,6 +606,7 @@ export const Sidebar = memo(function Sidebar() {
         id: 'settings',
         label: 'Settings',
         icon: Settings,
+        href: getSettingsHref(),
         onClick: () => {
           if (!isCollapsed) {
             setSidebarWidth(SIDEBAR_WIDTH.MIN)
@@ -600,7 +615,7 @@ export const Sidebar = memo(function Sidebar() {
         },
       },
     ],
-    [workspaceId, navigateToSettings, isCollapsed, setSidebarWidth]
+    [workspaceId, navigateToSettings, getSettingsHref, isCollapsed, setSidebarWidth]
   )
 
   const { data: fetchedTasks = [], isLoading: tasksLoading } = useTasks(workspaceId)
@@ -1381,6 +1396,7 @@ export const Sidebar = memo(function Sidebar() {
                     item={item}
                     active={false}
                     showCollapsedContent={showCollapsedContent}
+                    onContextMenu={item.href ? handleNavItemContextMenu : undefined}
                   />
                 ))}
               </div>

apps/sim/components/icons.tsx

@@ -4143,7 +4143,7 @@ export function InfisicalIcon(props: SVGProps<SVGSVGElement>) {
     <svg {...props} viewBox='20 25 233 132' xmlns='http://www.w3.org/2000/svg'>
       <path
         d='m191.6 39.4c-20.3 0-37.15 13.21-52.9 30.61-12.99-16.4-29.8-30.61-51.06-30.61-27.74 0-50.44 23.86-50.44 51.33 0 26.68 21.43 51.8 48.98 51.8 20.55 0 37.07-13.86 51.32-31.81 12.69 16.97 29.1 31.41 53.2 31.41 27.13 0 49.85-22.96 49.85-51.4 0-27.12-20.44-51.33-48.95-51.33zm-104.3 77.94c-14.56 0-25.51-12.84-25.51-26.07 0-13.7 10.95-28.29 25.51-28.29 14.93 0 25.71 11.6 37.6 27.34-11.31 15.21-22.23 27.02-37.6 27.02zm104.4 0.25c-15 0-25.28-11.13-37.97-27.37 12.69-16.4 22.01-27.24 37.59-27.24 14.97 0 24.79 13.25 24.79 27.26 0 13-10.17 27.35-24.41 27.35z'
-        fill='currentColor'
+        fill='#000000'
       />
     </svg>
   )