【軟體】徹底關閉 Notion 網頁版側邊欄 Stop Notion Sidebar from Auto-Showing

有時會需要隱藏 Notion 的 sidebar​，例如：

• 分享螢幕時，不希望其他人看到自己的 sidebar
• 想專注在頁面上，並不需要透過 sidebar 切換頁面
• database 欄位較多、版面較寬，要隱藏 sidebar 來顯示較多內容

但 Notion sidebar 只要滑鼠一靠近邊界就會馬上跑出來，在上述情境中會讓人非常困擾。本文將介紹三種關閉 Notion 網頁版 sidebar 的方法：

1. 以 Stylus 自訂 Styles：這個方法比較簡單，但需要安裝 Stylus 擴充元件。
2. 以 DevTools 修改。
3. 以 DevTools 修改，再藉由 Overrides 儲存設定；但容易失效，需重新抓取。

（本文皆以 Chrome 英文版的操作為例）

方法 1：​以 Stylus 自訂 Styles

1. 安裝 Stylus 擴充元件。
2. 點擊 Stylus 圖示，點擊「Write style for: www.notion.so」。
3. 貼上以下內容並儲存即可：

/* 隱藏 sidebar 和 lock sidebar open 的按鈕 */

.notion-sidebar-container,
.notion-open-sidebar {
    display: none;
}

方法 2：​以 DevTools 修改

打開任一 Notion 頁面，右鍵 Inspect，此時瀏覽器會打開一個 DevTools 的視窗，並自動進入 Elements 的頁籤。​

• 搜尋「notion-sidebar-container」。
• 點一下「notion-sidebar-container」，此時會自動選取整個「​<nav aria-label="Sidebar" class="notion-sidebar-container">」元件，刪除即可。
• （可選）建議也搜尋「notion-open-sidebar」並刪除該元件，這樣可以避免誤觸「lock sidebar open」的按鈕。

​

方法 3：​以 DevTools 修改，再藉由 Overrides 儲存設定

打開任一 Notion 頁面，右鍵 Inspect，此時瀏覽器會打開一個 DevTools 的視窗，並自動進入 Elements 的頁籤。​

• 搜尋「notion-sidebar-container」。
• 從右側 Styles 找到 CSS 的來源檔案，會是「app-亂數」開頭的 .css 檔案。
• 點擊連結打開檔案，頁面會自動跳到 Sources 頁籤底下，Page 子頁籤的目標檔案。
• 在檔案開頭新增：

/* 隱藏 sidebar 和 lock sidebar open 的按鈕 */

.notion-sidebar-container,
.notion-open-sidebar {
    display: none;
}

• 切換到頁面到 Sources 頁籤底下的 Overrides 子頁籤。
• 點擊 Select folder for overrides，選擇儲存設定的資料夾。

這樣就能徹底關閉 Notion 的 sidebar​，需要使用 sidebar 時則回到 Overrides 將新增的部分刪除即可。

失效的處理方式：

• 如果重新整理後失效的話，再按一次右鍵點 Inspect 出來，瀏覽器就會自己去抓 Overrides。
• 如果 Inspect 無效的話，可能是 Notion 變更了 CSS 的來源，再一次從 Styles 找到「app-」開頭的 CSS 檔修改即可。

延伸工具：Notion Sidebar Controller

參考資料：

• https://www.reddit.com/r/Notion/comments/fjyafc/is_there_a_way_to_turn_off_autoshowing_the/
• https://miloserdov.org/?p=4672