Sidebar Presets

Installation

pnpm add @notion-kit/sidebar

Components

Workspace Switcher

A WorkspaceSwitcher is a dropdown menu that controls workspaces and user's login state.

<WorkspaceSwitcher
  user={user}
  workspaces={workspaces}
  activeWorkspace={activeWorkspace}
/>

API Reference

Prop	Type	Default	Description
`user`*	`User`	-	Current user.
`activeWorkspace`*	`Workspace`	-	Current user.
`workspaces`*	`Workspace[]`	-	Current user.
`onSelect`	`(id: string) => void`	-	Handler that is called when a workspace is selected.
`onCreateAccount`	`() => void`	-	Handler that is called when the "Create Account" button is clicked.
`onCreateWorkspace`	`() => void`	-	Handler that is called when the "Create or Join Workspace" button is clicked.
`onLogout`	`() => void`	-	Handler that is called when the "Logout" button is clicked.

Page List

A page list is a component DocList showing a group of pages.

Korean

Study list

My secret document

System flowchart

<DocList
  group="document"
  title="Document"
  pages={pages}
/>

API Reference

Prop	Type	Default	Description
`group`*	`string`	-	The identifier of the group.
`title`*	`string`	-	The group title.
`pages`*	`Page[]`	-	Pages in this group.
`activePage`	`string \| null`	-	The active page in this group.
`defaultIcon`	`IconData`	`{ type: "lucide", src: "file" }`	The default icon of the page within this group. This is useful when a page has no icon selected.
`isLoading`	`boolean`	-	The loading state of this group. It will show a skeleton if the group is loading.
`onSelect`	`(id: string) => void`	-	Handler that is called when a page is active.
`onCreate`	`(group: string, parentId?: string) => void`	-	Handler that is called when the "Create" button is triggered in this group.
`onDuplicate`	`(id: string) => void`	-	Handler that is called when the "Duplicate" action is triggered.
`onUpdate`	`(id: string, data: UpdatePageParams) => void`	-	Handler that is called when the page data or page state is updated.

Favorite List

A FavoriteList is a group of pages that are marked as your Favorite.

Note

The FavoriteList only shows your Favorite pages that are not archived.

Study list

<FavoriteList pages={pages} />

API Reference

Prop	Type	Default	Description
`pages`*	`Page[]`	-	Pages in this group.
`activePage`	`string \| null`	-	The active page in this group.
`isLoading`	`boolean`	-	The loading state of this group. It will show a skeleton if the group is loading.
`onSelect`	`(id: string) => void`	-	Handler that is called when a page is active.
`onCreate`	`(group: string, parentId?: string) => void`	-	Handler that is called when the "Create" button is triggered in this group.
`onDuplicate`	`(id: string) => void`	-	Handler that is called when the "Duplicate" action is triggered.
`onUpdate`	`(id: string, data: UpdatePageParams) => void`	-	Handler that is called when the page data or page state is updated.

Search Command

A SearchCommand is a command menu for searching all non-archived pages.

"use client";
 
import { useHotkeys } from "react-hotkeys-hook";
 
import { ModalProvider, useModal } from "@notion-kit/modal";
import { Page } from "@notion-kit/schemas";
import { Button } from "@notion-kit/shadcn";
import { SearchCommand } from "@notion-kit/sidebar";
import { randomInt } from "@notion-kit/utils";
 
const getRandomTs = () =>
  randomInt(Date.UTC(2024, 1, 1), Date.UTC(2024, 10, 31));
 
export const pages: Page[] = [
  {
    type: "document",
    id: "page1",
    title: "Korean",
    parentId: null,
    icon: {
      type: "url",
      src: "https://img.freepik.com/premium-vector/line-art-flag-language-korean-illustration-vector_490632-422.jpg",
    },
    lastEditedBy: "",
    lastEditedAt: getRandomTs(),
    isArchived: false,
    isFavorite: false,
    isPublished: false,
    createdAt: Date.UTC(2023, 3, 5),
    createdBy: "",
  },
  {
    type: "document",
    id: "page2",
    title: "Pronunciation",
    parentId: "page1",
    lastEditedBy: "",
    lastEditedAt: getRandomTs(),
    isFavorite: false,
    isArchived: false,
    isPublished: false,
    createdAt: Date.UTC(2023, 3, 5),
    createdBy: "",
  },
  {
    type: "document",
    id: "page3",
    title: "Study list",
    parentId: null,
    icon: { type: "lucide", src: "book", color: "#CB912F" },
    lastEditedBy: "",
    lastEditedAt: getRandomTs(),
    isFavorite: true,
    isArchived: false,
    isPublished: false,
    createdAt: Date.UTC(2023, 3, 5),
    createdBy: "",
  },
  {
    type: "document",
    id: "page4",
    title: "My secret document",
    icon: { type: "lucide", src: "book-check", color: "#CB912F" },
    parentId: null,
    lastEditedBy: "",
    lastEditedAt: getRandomTs(),
    isFavorite: false,
    isArchived: false,
    isPublished: false,
    createdAt: Date.UTC(2023, 3, 5),
    createdBy: "",
  },
  {
    type: "document",
    id: "page5",
    title: "System flowchart",
    parentId: null,
    lastEditedBy: "",
    lastEditedAt: getRandomTs(),
    isFavorite: false,
    isArchived: false,
    isPublished: false,
    createdAt: Date.UTC(2023, 3, 5),
    createdBy: "",
  },
  {
    type: "document",
    id: "page6",
    title: "Deprecated documents",
    parentId: null,
    icon: { type: "lucide", src: "book", color: "#337EA9" },
    lastEditedBy: "",
    lastEditedAt: getRandomTs(),
    isFavorite: false,
    isArchived: true,
    isPublished: false,
    createdAt: Date.UTC(2023, 3, 5),
    createdBy: "",
  },
  {
    type: "private",
    id: "page7",
    title: "TODO List",
    parentId: null,
    lastEditedBy: "",
    lastEditedAt: getRandomTs(),
    isFavorite: false,
    isArchived: false,
    isPublished: false,
    createdAt: Date.UTC(2023, 3, 5),
    createdBy: "",
  },
  {
    type: "shared",
    id: "page8",
    title: "System flowchart",
    parentId: null,
    lastEditedBy: "",
    lastEditedAt: getRandomTs(),
    isFavorite: false,
    isArchived: false,
    isPublished: false,
    createdAt: Date.UTC(2023, 3, 5),
    createdBy: "",
  },
  {
    type: "document",
    id: "page9",
    parentId: "page3",
    title: "The High Table",
    icon: {
      type: "url",
      src: "https://cdn.iconscout.com/icon/premium/png-256-thumb/bar-table-1447763-1224177.png",
    },
    lastEditedBy: "",
    lastEditedAt: getRandomTs(),
    isFavorite: false,
    isArchived: false,
    isPublished: false,
    createdAt: Date.UTC(2023, 3, 5),
    createdBy: "",
  },
  {
    type: "document",
    id: "page10",
    parentId: "page3",
    title: "The Continental",
    icon: { type: "emoji", src: "🏠" },
    lastEditedBy: "",
    lastEditedAt: getRandomTs(),
    isFavorite: false,
    isArchived: false,
    isPublished: false,
    createdAt: Date.UTC(2023, 3, 5),
    createdBy: "",
  },
];
 
export default function Demo() {
  return (
    <ModalProvider>
      <Trigger />
    </ModalProvider>
  );
}
 
function Trigger() {
  const { openModal } = useModal();
  const openSearch = () =>
    openModal(<SearchCommand workspaceName="Workspace" pages={pages} />);
  /** Keyboard shortcut */
  useHotkeys(["meta+k", "shift+meta+k"], openSearch, { preventDefault: true });
 
  return (
    <Button size="md" onClick={openSearch}>
      ⌘K
    </Button>
  );
}

Note

It must be used within <ModalProvider>.
It searches only for non-archived pages.

API Reference

Prop	Type	Default	Description
`workspaceName`*	`string`	-	The name of current workspace.
`pages`*	`Page[]`	-	All your pages. But it searches only for non-archived pages.
`onSelect`	`(page: Page) => void`	-	Handler that is called when a page is selected.
`onOpenTrash`	`() => void`	-	Handler that is called when the "Open in Trash" button is clicked.

Trash Box

A TrashBox is a popover menu for searching archived pages.

<ModalProvider>
  <div className="w-[200px]">
    <TrashBox pages={pages} />
  </div>
</ModalProvider>

Note

It must be used within <ModalProvider>.
It searches only for archived pages.

API Reference

Prop	Type	Default	Description
`pages`*	`Page[]`	-	All your pages. But it searches only for archived pages.
`isOpen`	`boolean`	-	The (controlled) open state of the trash box. Must be used in conjunction with `onOpenChange`.
`onOpenChange`	`(open: boolean) => void`	-	Handler that is called when the open state of the trash box changes.
`onSelect`	`(page: Page) => void`	-	Handler that is called when a page is selected.
`onRestore`	`(id: string) => void`	-	Handler that is called when the "Restore" button of the page is clicked.
`onDelete`	`(page: Page) => void`	-	Handler that is called when the "Delete" button of the page is clicked.

Sidebar Presets

On this page