Skip to content

[Feature]: A shortcut to toggle sidebar visibility #2143

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Sepush opened this issue May 10, 2025 · 3 comments
Open

[Feature]: A shortcut to toggle sidebar visibility #2143

Sepush opened this issue May 10, 2025 · 3 comments

Comments

@Sepush
Copy link

Sepush commented May 10, 2025

What problem does this feature solve?

I want a shortcut to toggle sidebar visibility
I know we can use search query sidebar=0 to toggle
A short cut could provides a better user experience

I did some prototype in #2142 but still have a lot detail to discuss

What does the proposed API look like?

  • If we need a config flag to opt-in looks like
export default defineConfig({
  themeConfig: {
    sidebar: {
      collapsible:true,// as default
      ...otherConfig,
    },
  },
});
@JounQin
Copy link
Collaborator

JounQin commented May 10, 2025

collapsible could also mean y-order expanding/collapsing.

@Sepush
Copy link
Author

Sepush commented May 11, 2025

collapsible could also mean y-order expanding/collapsing.

sidebar.collapsed collapsed or collapsible prop is a common to control the whole sider

the y-order is control by sidebar.path.collapsible

comment if there is a better naming

// current
interface SidebarGroup {
  text: string;
  link?: string;
  items: SidebarItem[];
  // whether to be collapsible
  collapsible?: boolean;
  // Whether to be collapsed by default
  collapsed?: boolean;
  // svg tag string or image URL(optional)
  tag?: string;
}

export interface Sidebar  {
  [path: string]: (
    | SidebarGroup
    | SidebarItem
    | SidebarDivider
    | SidebarSectionHeader
  )[];
}
// after
export interface SidebarBase {
  collapsible?: boolean;
}

export type Sidebar = SidebarBase & {
  [path: string]: (
    | SidebarGroup
    | SidebarItem
    | SidebarDivider
    | SidebarSectionHeader
  )[];
};

then user config could be

const sidebar: Sidebar = {
  collapsible: true,
  "/docs": [
    collapsible:true,
    { type: "sectionHeader", title: "Introduction" },
    { type: "item", text: "Getting Started", link: "/start" },
    { type: "divider" },
    // ... more items
  ],
  "/api": [
    // different configuration for API section
  ]
};

@JounQin
Copy link
Collaborator

JounQin commented May 11, 2025

I'm saying these two options naming could be confusing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants