mirror of
https://github.com/status-im/consul.git
synced 2025-01-09 21:35:52 +00:00
0afb8a1074
This exposes an api for <ToggleButton /> so you can call it from elsewhere, specifically here we use the api.click to close the dropdown menus which is required is the DOM containing the toggle button isn't redrawn as is the case with external links in a dropdown menu
127 lines
7.5 KiB
Handlebars
127 lines
7.5 KiB
Handlebars
<header role="banner" data-test-navigation>
|
|
<a data-test-main-nav-logo href={{href-to 'index'}}><svg width="28" height="27" xmlns="http://www.w3.org/2000/svg"><title>Consul</title><path d="M13.284 16.178a2.876 2.876 0 1 1-.008-5.751 2.876 2.876 0 0 1 .008 5.75zm5.596-1.547a1.333 1.333 0 1 1 0-2.667 1.333 1.333 0 0 1 0 2.667zm4.853 1.249a1.271 1.271 0 1 1 .027-.107c0 .031 0 .067-.027.107zm-.937-3.436a1.333 1.333 0 1 1 .986-1.595c.033.172.033.348 0 .52-.07.53-.465.96-.986 1.075zm4.72 3.29a1.333 1.333 0 1 1-1.076-1.538 1.333 1.333 0 0 1 1.116 1.417.342.342 0 0 0-.027.12h-.013zm-1.08-3.33a1.333 1.333 0 1 1 1.088-1.524c.014.114.014.229 0 .342a1.333 1.333 0 0 1-1.102 1.182h.014zm-.925 7.925a1.333 1.333 0 1 1 .165-.547c-.01.193-.067.38-.165.547zm-.48-12.191a1.333 1.333 0 1 1 .507-1.814c.14.237.198.514.164.787-.038.438-.289.828-.67 1.045v-.018zM13.333 26.667C5.97 26.667 0 20.697 0 13.333 0 5.97 5.97 0 13.333 0c2.929-.01 5.778.955 8.098 2.742L19.8 4.89a10.667 10.667 0 0 0-17.133 8.444 10.667 10.667 0 0 0 17.137 8.471l1.627 2.13a13.218 13.218 0 0 1-8.098 2.733z" fill="#FFF"/></svg></a>
|
|
<input type="checkbox" name="menu" id="main-nav-toggle" onchange={{action 'change'}} />
|
|
<label for="main-nav-toggle">
|
|
Toggle Menu
|
|
</label>
|
|
<div>
|
|
<label for="main-nav-toggle">
|
|
<span>Close</span>
|
|
</label>
|
|
<nav aria-label="Main">
|
|
{{#if dc}}
|
|
<ul>
|
|
{{#if (and (env 'CONSUL_NSPACES_ENABLED') (gt nspaces.length 0))}}
|
|
<li data-test-nspace-menu>
|
|
{{#if (and (eq nspaces.length 1) (not canManageNspaces)) }}
|
|
<span data-test-nspace-selected={{nspace.Name}}>{{nspace.Name}}</span>
|
|
{{ else }}
|
|
<PopoverMenu @position="left">
|
|
<BlockSlot @name="trigger">
|
|
{{nspace.Name}}
|
|
</BlockSlot>
|
|
{{#if (is-href 'dc.nspaces')}}
|
|
<BlockSlot @name="header">
|
|
<p>
|
|
Namespaces themselves are not namespaced, so switching will not change the current view.
|
|
</p>
|
|
</BlockSlot>
|
|
{{/if}}
|
|
<BlockSlot @name="menu">
|
|
<li role="separator">
|
|
Namespaces
|
|
</li>
|
|
{{#each (reject-by 'DeletedAt' nspaces) as |item|}}
|
|
<li role="none" class={{if (eq nspace.Name item.Name) 'is-active'}}>
|
|
<a tabindex="-1" role="menuitem" href={{href-mut (hash nspace=(concat '~' item.Name))}}>{{item.Name}}</a>
|
|
</li>
|
|
{{/each}}
|
|
{{#if canManageNspaces }}
|
|
<li role="separator"></li>
|
|
<li role="none" data-test-main-nav-nspaces>
|
|
<a tabindex="-1" role="menuitem" href={{href-to 'dc.nspaces' dc.Name}}>Manage namespaces</a>
|
|
</li>
|
|
{{/if}}
|
|
</BlockSlot>
|
|
</PopoverMenu>
|
|
{{/if}}
|
|
</li>
|
|
{{/if}}
|
|
<li data-test-datacenter-menu>
|
|
{{#if (or (not dcs) (eq dcs.length 1)) }}
|
|
<span data-test-datacenter-selected={{dc.Name}}>{{dc.Name}}</span>
|
|
{{ else }}
|
|
<PopoverMenu @position="left">
|
|
<BlockSlot @name="trigger">
|
|
{{dc.Name}}
|
|
</BlockSlot>
|
|
<BlockSlot @name="menu">
|
|
<li role="separator">
|
|
Datacenters
|
|
</li>
|
|
{{#each dcs as |item|}}
|
|
<li role="none" data-test-datacenter-picker class={{if (eq dc.Name item.Name) 'is-active'}}>
|
|
<a tabindex="-1" role="menuitem" href={{href-mut (hash dc=item.Name)}}>{{item.Name}}</a>
|
|
</li>
|
|
{{/each}}
|
|
</BlockSlot>
|
|
</PopoverMenu>
|
|
|
|
{{/if}}
|
|
</li>
|
|
<li data-test-main-nav-services class={{if (is-href 'dc.services' dc.Name) 'is-active'}}>
|
|
<a href={{href-to 'dc.services' dc.Name}}>Services</a>
|
|
</li>
|
|
<li data-test-main-nav-nodes class={{if (is-href 'dc.nodes' dc.Name) 'is-active'}}>
|
|
<a href={{href-to 'dc.nodes' dc.Name}}>Nodes</a>
|
|
</li>
|
|
<li data-test-main-nav-kvs class={{if (is-href 'dc.kv' dc.Name) 'is-active'}}>
|
|
<a href={{href-to 'dc.kv' dc.Name}}>Key/Value</a>
|
|
</li>
|
|
<li data-test-main-nav-acls class={{if (or (is-href 'dc.acls' dc.Name) (is-href 'dc.aclsdisabled') (is-href 'dc.unauthorized')) 'is-active'}}>
|
|
<a href={{href-to 'dc.acls.tokens' dc.Name}}>ACL</a>
|
|
</li>
|
|
<li data-test-main-nav-intentions class={{if (is-href 'dc.intentions' dc.Name) 'is-active'}}>
|
|
<a href={{href-to 'dc.intentions' dc.Name}}>Intentions</a>
|
|
</li>
|
|
</ul>
|
|
{{/if}}
|
|
</nav>
|
|
<nav>
|
|
<ul>
|
|
<li data-test-main-nav-docs>
|
|
<PopoverMenu @position="right">
|
|
<BlockSlot @name="trigger">
|
|
Help
|
|
</BlockSlot>
|
|
<BlockSlot @name="menu" as |id send keypressClick change|>
|
|
<li role="none" class="docs-link">
|
|
<a tabindex="-1" role="menuitem" href={{env 'CONSUL_DOCS_URL'}} rel="noopener noreferrer" target="_blank" onclick={{change}}>Documentation</a>
|
|
</li>
|
|
<li role="none" class="learn-link">
|
|
<a tabindex="-1" role="menuitem" href={{env 'CONSUL_DOCS_LEARN_URL'}} rel="noopener noreferrer" target="_blank" onclick={{change}}>HashiCorp Learn</a>
|
|
</li>
|
|
<li role="separator"></li>
|
|
<li role="none" class="feedback-link">
|
|
<a tabindex="-1" role="menuitem" href={{env 'CONSUL_REPO_ISSUES_URL'}} target="_blank" rel="noopener noreferrer" onclick={{change}}>Provide Feedback</a>
|
|
</li>
|
|
</BlockSlot>
|
|
</PopoverMenu>
|
|
</li>
|
|
<li data-test-main-nav-settings class={{if (is-href 'settings') 'is-active'}}>
|
|
<a href={{href-to 'settings'}}>Settings</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
<main>
|
|
{{yield}}
|
|
</main>
|
|
<footer role="contentinfo" data-test-footer>
|
|
<a data-test-footer-copyright href="{{env 'CONSUL_COPYRIGHT_URL'}}/" rel="noopener noreferrer" target="_blank">© {{env 'CONSUL_COPYRIGHT_YEAR'}} HashiCorp</a>
|
|
<p data-test-footer-version>Consul {{env 'CONSUL_VERSION'}}</p>
|
|
<a data-test-footer-docs href="{{env 'CONSUL_DOCS_URL'}}" rel="help noopener noreferrer" target="_blank">Documentation</a>
|
|
{{{concat '<!-- ' (env 'CONSUL_GIT_SHA') '-->'}}}
|
|
</footer>
|
|
<ModalLayer /> |