Best way to create mobile menu? I have a template that I am trying to convert into a custom theme and it contains a mobile menu that is a duplicate of the main menu.  

What is the best way to tackle this with the least amount of duplication?  

I tried to create a menu--main.html.twig file and repeated 2 menus in one file.  It looked liked it worked at first until my menu contains submenus and then some weird behavior where it nested both menus into the below menu.  I would like to avoid creating a separate mobile menu in the admin dashboard and manually adding new links if created, but if that is the best way then I can handle it.  Just looking for other opinions.

Thanks
Are you familiar with Boostrap or Zurb Foundation framework? I suggest you research either of these 2 frameworks and you will find that you can accomplish your goal using either one. 

Here is a little background. Basically they are just a javascript file and css file. The javascript file has code for a ton of common/widely used features and built to be mobile responsive.
All you have to do is assign your divs a specific class name and they will get a certain functionality. You can find the class names that you need to use on their documentation page.

In Drupal, you can use the Boostrap theme or Zurb Foundation theme to build on top off. These themes have done some of the work for you. Ex: assign all the buttons the proper button classes using a preprocess function.

Here are specific tutorials regarding your question:

Bootstrap 3 Tutorials - #2 - Responsive Collapsing Navbar

Zurb Foundation | Top-Bar Tutorial