Cannot read properties of undefined (reading 'classList') at HTMLButtonElement.eval

前提・実現したいこと

.toogle-btnをクリックした際の動作（ハンバーガーメニュー）が正常に行われず、困っています。

index.js
-/module/spMenu.js

上記のようにファイルを置いています。
大枠は変えず（classを使い）、ファイルが動作するようにしたいと思っています。
また、不要な書き方をしている部分は教えていただきたいです。

発生している問題・エラーメッセージ

Uncaught TypeError: Cannot read properties of undefined (reading 'classList')
    at HTMLButtonElement.eval (spMenu.js:21)

<button class="toggle-btn"></button>をクリックした際に、上記エラーがコンソールに表示されます。
cLassListがうまく働いていないようです。

該当のソースコード

html
//index.html
<nav class="gnavi">
 <ul>
  <li>menu1</li>
  <li>menu2</li>
  <li>menu3</li>
  <li>menu4</li>
 </ul>
</nav>
<button class="toggle-btn"></button>
//ボタンクリック時
<nav class="gnavi open">
<button class="toggle-btn open"></button>

javascript
//index.js
import spMenu from "./module/spMenu.js";
const spMenuDo = new spMenu(".toggle-btn");
spMenuDo.init();

javascript
//spMenu.js
export default class spMenu {
  constructor(root, options = {}) {
    const defaultOptions = {
      root: document.querySelector(root),
      nav: document.querySelector("nav"),
      open: document.querySelector(".open"),
      elementOpen: ".open",
    };
    this.o = Object.assign(defaultOptions, options);
    this.root = this.o.root;
    this.nav = this.o.nav;
    this.open = this.o.open;
    this.elementOpen = this.o.elementOpen;
  }
  spMenu() {
    this.root.addEventListener("click", function () {
      this.nav.classList.toggle(elementOpen);
      this.open.classList.toggle(elementOpen);
    });
  }
  init() {
    this.spMenu();
  }
}