nextjs-notion-starter-kit Mobile Support Table of Contents

1 Background

I saw an issue on GitHub: How to add TOC in the mobile phone · Issue #586 · transitive-bullshit/nextjs-notion-starter-kit, coincidentally I solved this problem. Although my code isn’t great (that must be the fault of GPT, haha)… but if it can help someone in need, that would be the best! Of course, if you have better suggestions, please feel free to provide feedback!

However, I still want to mention that based on the design of this project, my modification can only be considered a workaround. I believe a more thorough solution would require optimizations in react-notion-x. Until the author makes optimizations, you might consider using this method to handle it~

2 Demonstration of Effects

2.1 Day Mode

2.2 Night Mode

3 Show you the code

The code is relatively simple, and only two files need to be modified.

Note that the ... in the code blocks represents the original code, which I have omitted; simply insert the corresponding code below in the positions indicated by the ....

3.1 `components/NotionPage.tsx`

You can adjust max-width: 1300px to your desired size, indicating the width at which the original PC directory will be hidden and a mobile version of the directory button will be displayed.



...

.aside-toggle-button {
  display: none;
}

.notion-table-of-contents-item {
  white-space: inherit;
}

@media (max-width:1300px) and (min-height:300px) {
  .notion-aside {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    max-width: 80vw;
    overflow: hidden;
    z-index: 9999;
    background: hsla(0, 0%, 100%, 0.8);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: translateX(100%);
    opacity: 0;
  }

  .dark-mode .notion-aside {
    background: var(--bg-color);
  }

  .notion-aside-table-of-contents {
    background: transparent;
    margin: calc(var(--notion-header-height) + 16px) 16px 0 16px;
  }
  
  .aside-toggle-button {
    display: flex;
    position: fixed;
    right: 0;
    top: calc(var(--notion-header-height) + 16px);
    padding: 12px;
    border-radius: 16px 0 0 16px;
    box-shadow: 2px 2px 8px 4px var(--bg-color-0);
    background: var(--bg-color);
    color: var(--fg-color);
    border: 1px solid var(--bg-color-0);
    border-right: 0;
    z-index: 9998;
  }

  .dark-mode .aside-toggle-button {
    box-shadow: none;
    border: 1px solid var(--bg-color-0);
    border-right: 0;
  }

  .aside-overlay {
    z-index: 9997;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: all;
    background: rgba(0, 0, 0, 0.1);
  }
}

3.2 `styles/notion.css`

Keep max-width: 1300px consistent with the settings in 3.1.



...

.aside-toggle-button {
  display: none;
}

.notion-table-of-contents-item {
  white-space: inherit;
}

@media (max-width:1300px) and (min-height:300px) {
  .notion-aside {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    max-width: 80vw;
    overflow: hidden;
    z-index: 9999;
    background: hsla(0, 0%, 100%, 0.8);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: translateX(100%);
    opacity: 0;
  }

  .dark-mode .notion-aside {
    background: var(--bg-color);
  }

  .notion-aside-table-of-contents {
    background: transparent;
    margin: calc(var(--notion-header-height) + 16px) 16px 0 16px;
  }
  
  .aside-toggle-button {
    display: flex;
    position: fixed;
    right: 0;
    top: calc(var(--notion-header-height) + 16px);
    padding: 12px;
    border-radius: 16px 0 0 16px;
    box-shadow: 2px 2px 8px 4px var(--bg-color-0);
    background: var(--bg-color);
    color: var(--fg-color);
    border: 1px solid var(--bg-color-0);
    border-right: 0;
    z-index: 9998;
  }

  .dark-mode .aside-toggle-button {
    box-shadow: none;
    border: 1px solid var(--bg-color-0);
    border-right: 0;
  }

  .aside-overlay {
    z-index: 9997;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: all;
    background: rgba(0, 0, 0, 0.1);
  }
}

The code has plenty of room for optimization, so feel free to give constructive feedback…

I have tested it under various scenarios, and theoretically, there are no bugs (theoretically speaking, haha). If anyone finds any issues, please let me know, and I will update the code promptly. You are also welcome to subscribe to my blog for the latest updates.

After Modification

If you don’t know what to do after making changes, and you built it according to the methods described in the series How to build your own blog for free using Notion + Vercel, you can check the tips here.

Simply save the modified files and execute the command below in the root directory of your code to commit the changes.


git add .
git commit -m "feat: improve mobile aside"
git push