Use ember-mobile-menu for mobile nav

ember-learn/rfcs-app#5 Co-authored-by: Chris Manson <[email protected]>
empress · Jul 8, 2022 · 6a013d2 · 6a013d2
1 parent b4606e6
commit 6a013d2
Show file tree

Hide file tree

Showing 6 changed files with 20,581 additions and 18,221 deletions.
diff --git a/addon/components/grouped-toc.hbs b/addon/components/grouped-toc.hbs
@@ -9,7 +9,7 @@
   <ul class="chapter">
     {{#each group.links as |id|}}
       <li>
-        <LinkTo @route="rfc" @model={{id}}> {{id}} </LinkTo>
+        {{yield id}}
       </li>
     {{/each}}
   </ul>

diff --git a/addon/templates/application.hbs b/addon/templates/application.hbs
@@ -1,13 +1,31 @@
-<aside class="sidebar light">
-  <ul class="chapter">
-    <li>
-      <LinkTo @route="index">Introduction</LinkTo>
-    </li>
-  </ul>
+<MobileMenuWrapper as |mmw|>
+  <mmw.MobileMenu as |mm|>
+    <ul class="chapter">
+        <li>
+          <mm.LinkTo @route="index">Introduction</mm.LinkTo>
+        </li>
+      </ul>
+    <GroupedToc @model={{@model}} as |id|>
+      <mm.LinkTo @route="rfc" @model={{id}}> {{id}} </mm.LinkTo>
+    </GroupedToc>
+  </mmw.MobileMenu>
 
-  <GroupedToc @model={{@model}} />
-</aside>
+  <mmw.Content>
+    <mmw.Toggle class="reset"><FaIcon class="p2" @icon="bars" /></mmw.Toggle>
+    <aside class="sidebar light">
+      <ul class="chapter">
+        <li>
+          <LinkTo @route="index">Introduction</LinkTo>
+        </li>
+      </ul>
+
+      <GroupedToc @model={{@model}} as |id|>
+        <LinkTo @route="rfc" @model={{id}}> {{id}} </LinkTo>
+      </GroupedToc>
+    </aside>
+    <main class="page-wrapper light">
+      {{outlet}}
+    </main>
+  </mmw.Content>
+</MobileMenuWrapper>
 
-<main class="page-wrapper light">
-  {{outlet}}
-</main>
diff --git a/addon/templates/index.hbs b/addon/templates/index.hbs
@@ -1,11 +1,4 @@
 <div class="page">
-  <div class="menu-bar">
-    <div class="left-buttons">
-      <button class="reset" type="button" {{on "click" this.toggleSidebar}}>
-        <FaIcon class="p2" @icon="bars" />
-      </button>
-    </div>
-  </div>
   <div class="content">
     {{markdown-to-html @model.content tagName=""}}
   </div>

diff --git a/addon/templates/rfc.hbs b/addon/templates/rfc.hbs
@@ -1,11 +1,4 @@
 <div class="page">
-  <div class="menu-bar">
-    <div class="left-buttons">
-      <button class="reset" type="button" {{on "click" this.toggleSidebar}}>
-        <FaIcon class="p2" @icon="bars" />
-      </button>
-    </div>
-  </div>
   <table class="rfc-data-table">
     <thead>
       <tr>