mono.works Design Components

Menu 

<nav class="menu_wrap" id="menu" popover="auto">
    <div class="container">
        <div class="row --center">
            <div class="d_grid-12 m_grid-4">
                <div class="menu">
                    <div class="link_list">
                        <legend>Our Apps</legend>
                        <a href="#groupmate"><strong>groupmate:</strong>
                            Combined Listings

                        </a>
                        <a href="#arise"><strong>ARise:</strong>
                            View in your Room

                        </a>
                    </div>
                    <div class="link_list">
                        <legend>Support</legend>
                        <a href="#docs"><strong></strong>

                            Documentation
                        </a>
                        <a href="#contact"><strong></strong>

                            Contact
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</nav>

<div class="fixed_action_buttons --no_desktop">
    <button type="button" class="btn btn--large btn--pink" popovertarget="menu" popovertargetaction="toggle">

        <span>Menu</span>
    </button>
</div>
 
<nav class="menu_wrap" id="menu" popover="auto">
	<div class="container">
		<div class="row --center">
			<div class="d_grid-12 m_grid-4">
				<div class="menu">
					{{#each menu}}
						{{> @link_list}}
					{{/each}}
				</div>
			</div>
		</div>
	</div>
</nav>

<div class="fixed_action_buttons --no_desktop">
	<button
		type="button"
		class="btn btn--large btn--pink"
		popovertarget="menu"
		popovertargetaction="toggle"
	>

		{{! <i class="ph-bold ph-eyes"></i> }}
		{{!-- <span>Open <i class="ph-bold ph-hamburger"></i> Menu</span> --}}
		<span>Menu</span>
	</button>
</div>
 
{
  "menu": [
    {
      "legend": "Our Apps",
      "links": [
        {
          "href": "#groupmate",
          "label": "groupmate:",
          "description": "Combined Listings"
        },
        {
          "href": "#arise",
          "label": "ARise:",
          "description": "View in your Room"
        }
      ]
    },
    {
      "legend": "Support",
      "links": [
        {
          "href": "#docs",
          "text": "Documentation"
        },
        {
          "href": "#contact",
          "text": "Contact"
        }
      ]
    }
  ]
}

No notes defined.