sync: canary cahnges to preview

apps/web/core/components/settings/sidebar/nav-item.tsx

@@ -6,7 +6,7 @@ import { Disclosure } from "@headlessui/react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 import { EUserWorkspaceRoles } from "@plane/types";
-import { cn } from "@plane/utils";
+import { cn, joinUrlPath } from "@plane/utils";
 // hooks
 import { useUserSettings } from "@/hooks/store";
 
@@ -72,7 +72,11 @@ const SettingsSidebarNavItem = observer((props: TSettingsSidebarNavItemProps) =>
         {renderChildren ? (
           <div className={buttonClass}>{titleElement}</div>
         ) : (
-          <Link href={`/${workspaceSlug}/${setting.href}`} className={buttonClass} onClick={() => toggleSidebar(true)}>
+          <Link
+            href={joinUrlPath(workspaceSlug, setting.href)}
+            className={buttonClass}
+            onClick={() => toggleSidebar(true)}
+          >
             {titleElement}
           </Link>
         )}

apps/web/core/components/settings/sidebar/root.tsx

@@ -46,10 +46,11 @@ export const SettingsSidebar = observer((props: SettingsSidebarProps) => {
       <SettingsSidebarHeader customHeader={customHeader} />
       {/* Navigation */}
       <div className="divide-y divide-custom-border-100 overflow-x-hidden w-full h-full overflow-y-scroll">
-        {categories.map((category) => (
-          <div key={category} className="py-3">
-            <span className="text-sm font-semibold text-custom-text-350 capitalize mb-2">{t(category)}</span>
-            {groupedSettings[category].length > 0 && (
+        {categories.map((category) => {
+          if (groupedSettings[category].length === 0) return null;
+          return (
+            <div key={category} className="py-3">
+              <span className="text-sm font-semibold text-custom-text-350 capitalize mb-2">{t(category)}</span>
               <div className="relative flex flex-col gap-0.5 h-full mt-2">
                 {groupedSettings[category].map(
                   (setting) =>
@@ -66,9 +67,9 @@ export const SettingsSidebar = observer((props: SettingsSidebarProps) => {
                     )
                 )}
               </div>
-            )}
-          </div>
-        ))}
+            </div>
+          );
+        })}
       </div>
     </div>
   );