Getting Started

Make sidebar swipeable on mobile devices like Discord Mobile.

Prerequisites

You will need to have a Starlight website set up. If you don’t have one yet, you can follow the “Getting Started” guide in the Starlight docs to create one.

Installation

1. starlight-sidebar-swipe is a Starlight plugin. Install it by running the following command in your terminal:

   npm

   npm install starlight-sidebar-swipe

   pnpm

   pnpm add starlight-sidebar-swipe

   Yarn

   yarn add starlight-sidebar-swipe

2. Configure the plugin in your Starlight configuration in the astro.config.mjs file.

   astro.config.mjs

   import starlight from '@astrojs/starlight'
   import { defineConfig } from 'astro/config'
   import starlightSidebarSwipe from 'starlight-sidebar-swipe'
   
   export default defineConfig({
     integrations: [
       starlight({
         plugins: [starlightSidebarSwipe()],
         title: 'My Docs',
       }),
     ],
   })

3. Start the development server to preview the plugin in action.

Component overrides

The Starlight Sidebar Swipe plugin uses a Starlight component override for the MobileMenuToggle component to replace the default mobile menu toggle with one that slides the page content aside to reveal the sidebar and supports swipe gestures.

If you have a custom MobileMenuToggle override in your Starlight project, you will need to manually render the MobileMenuToggle component from the Starlight Sidebar Swipe plugin in your custom component instead of the default Starlight component:

src/components/overrides/MobileMenuToggle.astro

---
import Default from '@astrojs/starlight/components/MobileMenuToggle.astro'
import StarlightSidebarSwipeMobileMenuToggle from 'starlight-sidebar-swipe/components/MobileMenuToggle.astro'
---

<p>Custom content in the MobileMenuToggle override</p>
<Default />
<StarlightSidebarSwipeMobileMenuToggle />