编写你的第一个浏览器脚本

让我们在移动屏幕上添加一个汉堡菜单（Hamburger Menus）以打开和关闭你的导航链接，这需要一些客户端的交互！

创建一个 <Hamburger /> 组件，用于打开和关闭移动端菜单。

1. 在 src/components/ 中创建一个名为 Hamburger.astro 的文件。

2. 将以下代码复制到你的组件中。这将表示你的三行「汉堡」菜单，在移动设备上打开和关闭导航链接菜单。（稍后你将把新的 CSS 样式添加到 global.css 中。）

   ---
   ---
   <div class="hamburger">
     <span class="line"></span>
     <span class="line"></span>
     <span class="line"></span>
   </div>

3. 将这个新的 <Hamburger /> 组件放置在 Header.astro 的 <Navigation /> 组件之前。

---
import Hamburger from './Hamburger.astro';
import Navigation from './Navigation.astro';
---
<header>
  <nav>
    <Hamburger />
    <Navigation />
  </nav>
</header>

4. 为你的 Hamburger 组件添加以下样式：

/* 导航样式 */
.hamburger {
  padding-right: 20px;
  cursor: pointer;
}

.hamburger .line {
  display: block;
  width: 40px;
  height: 5px;
  margin-bottom: 10px;
  background-color: #ff9776;
}

.nav-links {
  width: 100%;
  top: 5rem;
  left: 48px;
  background-color: #ff9776;
  display: none;
  margin: 0;
}

.nav-links a {
  display: block;
  text-align: center;
  padding: 10px 0;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: bold;
  text-transform: uppercase;
}

.nav-links a:hover, a:focus {
  background-color: #ff9776;
}

.expanded {
  display: unset;
}

@media screen and (min-width: 636px) {
  .nav-links {
    margin-left: 5em;
    display: block;
    position: static;
    width: auto;
    background: none;
  }

  .nav-links a {
    display: inline-block;
    padding: 15px 20px;
  }

  .hamburger {
    display: none;
  }
}

你的页眉还不具有交互性，因为它无法响应用户输入，比如点击汉堡菜单来显示或隐藏导航链接菜单。

添加一个 <script> 标签提供客户端 JavaScript，以「监听」用户事件并做出相应的响应。

1. 将以下 <script> 标签添加到 index.astro，就在结束的 </body> 标签之前。

     <Footer />
     <script>
       document.querySelector('.hamburger').addEventListener('click', () => {
         document.querySelector('.nav-links').classList.toggle('expanded');
       });
     </script>
   </body>

2. 再次在各种尺寸下检查你的浏览器预览，并验证你是否在这个页面上拥有一个能够根据屏幕尺寸响应并对用户输入作出响应的正常运作的汉堡菜单。

你可以将你的 JavaScript 直接写在每个页面上，也可以将你的 <script> 标签的内容移动到项目中自己的 .js 文件中。

1. 创建 src/scripts/menu.js（你将不得不创建一个新的 /scripts/ 文件夹），并将你的 JavaScript 移动到其中。

   document.querySelector('.hamburger').addEventListener('click', () => {
     document.querySelector('.nav-links').classList.toggle('expanded');
   });

2. 用以下文件导入替换 index.astro 中的 <script> 标签的内容：

     <Footer />
     <script>
       document.querySelector('.hamburger').addEventListener('click', () => {
         document.querySelector('.nav-links').classList.toggle('expanded');
       });
   
       import "../scripts/menu.js";
     </script>
   </body>

3. 再次在较小的尺寸下检查你的浏览器预览，验证汉堡菜单是否仍然可以打开和关闭导航链接菜单。

4. 在你的其他两个页面 about.astro 和 blog.astro 中添加相同的带有导入的 <script>，并验证每个页面上是否有一个响应式、交互式的页眉。

    <Footer />
    <script>
      import "../scripts/menu.js";
    </script>
   </body>

Astro 中的客户端脚本