Allow to disable nav header and specials (#2707)

Signed-off-by: Denis Bunakalya <denis.bunakalya@xored.com>

packages/theme/styles/common.scss

@@ -184,6 +184,18 @@
     height: auto;
     margin-bottom: .5rem;
   }
+
+  &.disabled {
+    cursor: not-allowed;
+
+    .an-element__icon {
+      opacity: 0.5;
+    }
+
+    .an-element__label {
+      color: rgb(var(--caption-color) / 40%);
+    }
+  }
 }
 .antiNav-divider {
   flex-shrink: 0;

packages/ui/src/components/NavLink.svelte

@@ -20,6 +20,7 @@
   export let app: string | undefined = undefined
   export let space: string | undefined = undefined
   export let special: string | undefined = undefined
+  export let disabled = false
 
   let loc = createLocation(getCurrentLocation(), app, space, special)
 
@@ -62,6 +63,10 @@
   }
 </script>
 
+{#if disabled}
+  <slot />
+{:else}
   <a {href} on:click={clickHandler}>
     <slot />
   </a>
+{/if}

plugins/workbench-resources/src/components/Navigator.svelte

@@ -130,6 +130,10 @@
 
     return [result, requestIndex]
   }
+
+  async function checkIsDisabled (special: SpecialNavModel) {
+    return special.checkIsDisabled && (await (await getResource(special.checkIsDisabled))())
+  }
 </script>
 
 {#if model}
@@ -139,14 +143,17 @@
         {#if row > 0 && specials[row].position !== specials[row - 1].position}
           <TreeSeparator />
         {/if}
-        <NavLink space={special.id}>
+        {#await checkIsDisabled(special) then disabled}
+          <NavLink space={special.id} {disabled}>
             <SpecialElement
               label={special.label}
               icon={special.icon}
               selected={special.id === currentSpecial}
               indent={'ml-2'}
+              {disabled}
             />
           </NavLink>
+        {/await}
       {/each}
     {/if}
 

plugins/workbench-resources/src/components/Workbench.svelte

@@ -392,6 +392,15 @@
       currentApplication?.checkIsHeaderHidden && (await (await getResource(currentApplication.checkIsHeaderHidden))())
     )
   }
+
+  async function checkIsHeaderDisabled () {
+    return (
+      currentApplication?.checkIsHeaderDisabled &&
+      (await (
+        await getResource(currentApplication.checkIsHeaderDisabled)
+      )())
+    )
+  }
 </script>
 
 {#if employee?.active === true}
@@ -495,7 +504,9 @@
             {#if currentApplication.navHeaderComponent}
               {#await checkIsHeaderHidden() then isHidden}
                 {#if !isHidden}
-                  <Component is={currentApplication.navHeaderComponent} props={{ currentSpace }} shrink />
+                  {#await checkIsHeaderDisabled() then disabled}
+                    <Component is={currentApplication.navHeaderComponent} props={{ currentSpace, disabled }} shrink />
+                  {/await}
                 {/if}
               {/await}
             {/if}

plugins/workbench-resources/src/components/navigator/SpecialElement.svelte

@@ -22,6 +22,7 @@
   export let notifications = 0
   export let actions: Action[] = []
   export let selected: boolean = false
+  export let disabled: boolean = false
   export let indent: 'default' | 'ml-2' | 'ml-4' | 'ml-8' = 'default'
 </script>
 
@@ -30,6 +31,7 @@
 <div
   class="antiNav-element"
   class:selected
+  class:disabled
   class:ml-2={indent === 'ml-2'}
   class:ml-4={indent === 'ml-4'}
   class:ml-8={indent === 'ml-8'}

plugins/workbench/src/index.ts

@@ -36,6 +36,7 @@ export interface Application extends Doc {
 
   navHeaderComponent?: AnyComponent
   checkIsHeaderHidden?: Resource<() => Promise<boolean>>
+  checkIsHeaderDisabled?: Resource<() => Promise<boolean>>
   navFooterComponent?: AnyComponent
 }
 
@@ -83,6 +84,7 @@ export interface SpecialNavModel {
   visibleIf?: Resource<(spaces: Space[]) => Promise<boolean>>
   // If defined, will be used to find spaces for visibleIf
   spaceClass?: Ref<Class<Space>>
+  checkIsDisabled?: Resource<() => Promise<boolean>>
 }
 
 /**