Sanity.io - Desk Structure Section (menu) Example

deskBlog.js

import React from 'react';
import S from '@sanity/desk-tool/structure-builder';
import sanityClient from 'part:@sanity/base/client';
import { IntentLink, Link } from 'part:@sanity/base/router';

import { Card, Stack, Text, Table } from '@sanity/ui';
import { Article, Browser } from 'phosphor-react';
import { standardViews } from '../previews/standard';

const i1 = Article;
const i2 = Browser;
const docType = 'Blog'; //Capitalized
const docSchemaType = 'site.post';
const archiveSchemaType = 'site.page';
const pageRef = 'pageBlog';
const EmptyNotice = ({ title, type, link, linkTitle }) => {
  if (!title || !type || !link || !linkTitle) return null;

  return (
    <Card padding={4}>
      <Card padding={[5]} radius={2} shadow={1} tone="critical">
        <Stack space={[3]}>
          <Text align="center" size={[2]} weight="semibold">
            The {title} has not been set.
          </Text>
          <Text align="center" size={[2]}>
            Set your {title} from the <Link href={link}>{linkTitle}</Link>
          </Text>
        </Stack>
      </Card>

      <Stack padding={3} space={[3]}>
        <Text align="center" muted size={[1]}>
          Don't have a {type} yet?{' '}
          <IntentLink intent="create" params={{ type }}>
            Create one now
          </IntentLink>
        </Text>
      </Stack>
    </Card>
  );
};

// Extract our Archive Page
const extract = S.listItem()
  .title(`${docType} Archive Page`)
  .icon(i1)
  .child(async () => {
    const data = await sanityClient.fetch(`
      *[_type == "settings.general"][0]{
        page${docType}->{_id}
      }
    `);

    if (!data?.[pageRef])
      return S.component(() => (
        <EmptyNotice
          title={docType + ' Archive Page'}
          type={archiveSchemaType}
          link="settings;general"
          linkTitle="General Settings"
        />
      )).title(`${docType} Archive Page`);

    return S.document()
      .id(data[pageRef]._id)
      .schemaType(archiveSchemaType)
      .views(standardViews);
  });

export const ListItem = S.listItem()
  .title(docType)
  .id(docType.toLowerCase())
  .child(
    S.list()
      .title(docType)
      .items([
        extract,
        S.listItem()
          .title(docType)
          .schemaType(docSchemaType)
          .child(
            S.documentTypeList(docSchemaType)
              .title(docType)
              .filter(
                `_type == ${docSchemaType} && !(_id in [
                  *[_type == "settings.general"][0].page${docType}._ref,
                ]) && !(_id in path("drafts.**"))`
              )
              .child((documentId) =>
                S.document()
                  .documentId(documentId)
                  .schemaType(docSchemaType)
                  .views(standardViews)
              )
              .canHandleIntent(
                (intent, { type }) =>
                  ['create', 'edit'].includes(intent) && type === docSchemaType
              )
          ),
        S.listItem()
          .title(`${docType} Categories`)
          .schemaType(`taxonomy.${docType.toLowerCase()}.category`)
          .icon(Table)
          .child(
            S.documentTypeList(`taxonomy.${docType.toLowerCase()}.category`)
          ),
      ])
  )
  .icon(i2);