shopping comment However, the following actions are shown on a screen greater than extra-small, that is, small and above Review highlighted code for responsive breakpoints add_a_photo favorite As the screen size increases, we could show more actions Two more toolbar buttons are shown on a medium and above screen size On a smaller screen (small and below) they are hidden under the menu Review boldface code for breakpoints Also see Figure 12-13 and Figure 12-14 182 CHAPTER 12 ■ RESPONSIVE DESIGN PATTERNS exit_to_app bookmark Figure 12-13 On a small screen size (breakpoint sm), two action buttons are hidden under the “more action” button Figure 12-14 Small screen size The menu shows only the two hidden menu options On the other hand, the menu for more options is shown on small and extra-small screens only Notice that the “more actions” menu needs to have inverse breakpoints compared to other buttons on the toolbar That is because if a button is already shown on the toolbar, it need not be shown under the “more” menu When it is hidden because of space constraints on the toolbar, it needs to be available on the more actions menu Review the following code: highlighted breakpoints for the menu It is hidden on a screen size greater than small (medium and larger) As you might have noticed in the preceding, medium and larger screen sizes have no toolbar action buttons hidden Hence, the more button is not necessary menu trigger, a button on the toolbar > more_vert 183 CHAPTER 12 ■ RESPONSIVE DESIGN PATTERNS Hide/Show Buttons on the Menu Now that we saw code to manage buttons on the toolbar, let us look at hiding and showing the same on menu When a button is hidden on the toolbar due to space constraints, it needs to be available under the menu Use Angular Material menu control to implement the “more” button The icon button is a trigger for the menu Consider the following code for buttons under the menu As learnt while discussing menu control in an earlier chapter, these buttons are coded under md-menu-content element/directive add_a_photo Add a photo favorite Loved it Each menu item is wrapped in md-menu-item Review breakpoints on the menu, which hide buttons on a screen size greater than extra-small (hide-gt-xs) This means that screen sizes of small and larger show these buttons on the toolbar Hence, the menu does not need to have “add photo” and “favorite” (Loved it) buttons The following is what remains of menu content These are hidden on a greater than small screen size (medium and above) If the menu button is shown, these buttons are also visible bookmark Tag it exit_to_app Exit App Here is the complete code 184 CHAPTER 12 ■ RESPONSIVE DESIGN PATTERNS