动手练一练，做一个响应式的后台管理面板

作为一名前端开发者，我们或多或少都会接触后台管理系统的制作，你是否会亲自纯手工制作做还是从网上找源码改一个呢？今天我们将从零开始纯手工制作一个后台管理面板的首页，通过这个案例你将会学习到如何制作一个响应式后台管理页面的思路，本篇文章内容比较长，请大家多多包涵，希望你能看下去，????????????。

这篇文章的内容是基于我阅读国外一篇博文内容的整理，并亲自实践无误，内容非完全直接翻译，由于水平有限，难免有些疏漏，欢迎大家指正

一、 首先明确下界面需求

1、屏幕宽度 >767px 时，界面交互如下视频所示：

界面的菜单可以通过点击左下角的按钮进行折叠，右边的空白内容，用来示意需要填充的内容。

2、当屏幕宽度 < 767px 时，界面交互如下视频所示：

由于屏幕宽度有限，菜单被隐藏，通过点击按钮展开或隐藏菜单。

二、接下来思考一下，如何分解制作需求

1. 响应式布局需要用到哪些知识点。

2. 如何解决菜单左右折叠的问题。

3. 如何处理菜单在小屏设备的展示问题。

4. 如何规划页面的布局，建议现在纸上画出来。

关于响应式需要用到 flexbox 拿到界面需求后，我们做的第一件事，并不是赶紧写代码，而是需要静下心来分解需求，完成这个需求你需要考虑：flex布局、 grid 布局，rem单位、vw和vh视口单位、媒介查询等响应式相关的知识点；菜单折叠的问题，这里需要通过JS脚本来触发菜单文本和logo的隐藏；小屏设备菜单的按钮，我们默认隐藏在左边的菜单里，通过媒介查询器触发显示，并需要在按钮上添加JS事件，触发菜单的打开与隐藏。

需求分解完后，我们开始动手制作吧！

三、首先建立基本HTML结构

1、分析完需求后，我们先建立基础的 HTML 结构，整个页面布局分为了左右两大块，示例代码如下：

<svg style="display:none;">...</svg>
<header class="page-header">...</header>
<p class="page-content">...</p>

你可能注意到，我添加了 svg 部分，并且设置了隐藏，这里我们使用 SVG Sprites（雪碧图）技术，方便我们在菜单里添加菜单图标，这里我从 Envato 网站下载了后台管理相关的图标，如下图所示，喜欢的可以在文章下方留言索取。

2、雪碧图示例代码如下，就是一堆SVG图标的集合，并确保 id 属性的唯一性，方便后面的代码调用：

<svg style="display:none;">
  <symbol id="down" viewBox="0 0 16 16">
    <polygon points="3.81 4.38 8 8.57 12.19 4.38 13.71 5.91 8 11.62 2.29 5.91 3.81 4.38" />
  </symbol>
  <symbol id="users" viewBox="0 0 16 16">
    <path d="M8,0a8,8,0,1,0,8,8A8,8,0,0,0,8,0ZM8,15a7,7,0,0,1-5.19-2.32,2.71,2.71,0,0,1,1.7-1,13.11,13.11,0,0,0,1.29-.28,2.32,2.32,0,0,0,.94-.34,1.17,1.17,0,0,0-.27-.7h0A3.61,3.61,0,0,1,5.15,7.49,3.18,3.18,0,0,1,8,4.07a3.18,3.18,0,0,1,2.86,3.42,3.6,3.6,0,0,1-1.32,2.88h0a1.13,1.13,0,0,0-.27.69,2.68,2.68,0,0,0,.93.31,10.81,10.81,0,0,0,1.28.23,2.63,2.63,0,0,1,1.78,1A7,7,0,0,1,8,15Z" /> 
  </symbol>
   
  <!-- more symbols here -->
</svg>

3、 Header 部分的代码

Header部分代码，我们用 nav 标签包裹 logo 部分、 菜单链接部分、同时添加了一个隐藏的菜单按钮 .toggle-mob-menu（小屏设备才会显示），手机端设备将会显示这个按钮用于 打开/隐藏 菜单。

<header class="page-header">
  <nav>
    <a href="#0">
      <img class="logo" src="logo.svg" alt="forecastr logo">
    </a>
    <button class="toggle-mob-menu" aria-expanded="false" aria-label="open menu">
      <svg width="20" height="20" aria-hidden="true">
        <use xlink:href="#down"></use>
      </svg>
    </button>
    <ul class="admin-menu">
      <li class="menu-heading">
        <h3>Admin</h3>
      </li>
      <li>
        <a href="#0">
          <svg>
            <u