From 11a8ff364a90cd41fe4464c95945fe3789b40116 Mon Sep 17 00:00:00 2001
From: Toufic Batache <taffou2a@gmail.com>
Date: Wed, 9 Aug 2017 22:51:52 +0300
Subject: [PATCH] fix(toolbar): Wrong placement of last icon when there is a
 menu (#1068)

Resolved #1026
---
 demos/toolbar/index.html              |  6 ++
 demos/toolbar/menu-toolbar.html       | 93 +++++++++++++++++++++++++++
 packages/mdc-toolbar/mdc-toolbar.scss |  2 +-
 3 files changed, 100 insertions(+), 1 deletion(-)
 create mode 100644 demos/toolbar/menu-toolbar.html
diff --git a/demos/toolbar/index.html b/demos/toolbar/index.html
index de9f0b4ee5c..b6d5ca017fe 100644
--- a/demos/toolbar/index.html
+++ b/demos/toolbar/index.html
@@ -127,6 +127,12 @@ <h2>Fixed Toolbar<button type="button" onclick="toggleRTL(1)">Toggle RTL</button
           <iframe class="demo-container" src="./fixed-toolbar.html" width="320" height="600"></iframe>
         </div>
 
+        <div class="example">
+          <h2>Fixed Toolbar with Menu<button type="button" onclick="toggleRTL(1)">Toggle RTL</button></h2>
+          <p><a href="./menu-toolbar.html" target="_blank">View in separate window</a></p>
+          <iframe class="demo-container" src="./menu-toolbar.html" width="320" height="600"></iframe>
+        </div>
+
         <div class="example">
           <h2>Waterfall Toolbar<button type="button" onclick="toggleRTL(2)">Toggle RTL</button></h2>
           <p><a href="./waterfall-toolbar.html" target="_blank">View in separate window</a></p>
diff --git a/demos/toolbar/menu-toolbar.html b/demos/toolbar/menu-toolbar.html
new file mode 100644
index 00000000000..4b34fa85e99
--- /dev/null
+++ b/demos/toolbar/menu-toolbar.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<!--
+  Copyright 2016 Google Inc. All rights reserved.
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+      https://www.apache.org/licenses/LICENSE-2.0
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>MDC Toolbar Demo</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/png" href="/images/logo_components_color_2x_web_48dp.png" />
+	<script src="../assets/material-components-web.css.js" charset="utf-8"></script>
+    <script src="../assets/demo-styles.css.js" charset="utf-8"></script>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    <style>
+      .mdc-toolbar-demo {
+        margin: 0px;
+      }
+      .demo-paragraph {
+        margin: 0px;
+        padding: 20px 28px;
+      }
+      @media (max-width: 599px) {
+        .demo-paragraph {
+          padding: 16px;
+        }
+      }
+      #demo-menu {
+        margin-top: 8px;
+	margin-right: 8px;
+      }
+    </style>
+  </head>
+  <body class="mdc-typography mdc-toolbar-demo">
+    <header class="mdc-toolbar mdc-toolbar--fixed">
+	  <div class="mdc-toolbar__row">
+		<section class="mdc-toolbar__section mdc-toolbar__section--align-start">
+		  <a href="#" class="material-icons mdc-toolbar__icon--menu">menu</a>
+		  <span class="mdc-toolbar__title">Title</span>
+		</section>
+		<section class="mdc-toolbar__section mdc-toolbar__section--align-end" role="toolbar">
+		  <a href="#" class="material-icons mdc-toolbar__icon" aria-label="Download" alt="Download">file_download</a>
+		  <a href="#" class="material-icons mdc-toolbar__icon" aria-label="Print this page" alt="Print this page">print</a>
+		  <div class="mdc-menu-anchor">
+			<a href="#" class="material-icons mdc-toolbar__icon toggle" aria-label="Bookmark this page" alt="Bookmark this page">more_vert</a>
+			<div class="mdc-simple-menu" tabindex="-1" id="demo-menu">
+			  <ul class="mdc-simple-menu__items mdc-list" role="menu" aria-hidden="true" style="transform: scale(1, 1);">
+				<li class="mdc-list-item" role="menuitem" tabindex="0" style="transition-delay: 0.069s;">Back</li>
+				<li class="mdc-list-item" role="menuitem" tabindex="0" style="transition-delay: 0.124s;">Forward</li>
+				<li class="mdc-list-item" role="menuitem" tabindex="0" style="transition-delay: 0.179s;">Reload</li>
+				<li class="mdc-list-divider" role="separator"></li>
+
+				<li class="mdc-list-item" role="menuitem" tabindex="0" style="transition-delay: 0.236s;">Save As...</li>
+			  </ul>
+			</div>
+		  </div>
+		</section>
+	  </div>
+	</header>
+    <main>
+
+      <div class="mdc-toolbar-fixed-adjust">
+        <p class="demo-paragraph">
+          Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
+        </p>
+        <p class="demo-paragraph">
+          Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
+        </p>
+        <p class="demo-paragraph">
+          Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
+        </p>
+      </div>
+    </main>
+	
+	<script src="../assets/material-components-web.js" charset="utf-8"></script>
+	<script>
+      var menuEl = document.querySelector('#demo-menu');
+      var menu = new mdc.menu.MDCSimpleMenu(menuEl);
+      var toggle = document.querySelector('.toggle');
+      toggle.addEventListener('click', function() {
+        menu.open = !menu.open;
+      });
+    </script>
+  </body>
+</html>
diff --git a/packages/mdc-toolbar/mdc-toolbar.scss b/packages/mdc-toolbar/mdc-toolbar.scss
index b46950b0379..97006801edc 100644
--- a/packages/mdc-toolbar/mdc-toolbar.scss
+++ b/packages/mdc-toolbar/mdc-toolbar.scss
@@ -93,7 +93,7 @@
     cursor: pointer;
   }
 
-  &__icon:last-child {
+  &__icon:last-of-type {
     padding-right: 16px;
   }
 
