Changed design menu to only show one open section at a time

no issue

- we want the menu to feel more like a typical navigation sidebar
This commit is contained in:
Kevin Ansfield 2021-10-13 09:11:46 +01:00
parent 852732b232
commit f9a2626ae4
2 changed files with 10 additions and 7 deletions

View File

@ -5,10 +5,10 @@
<div class="gh-nav-top" {{on "click" this.transitionBackToIndex}}>
<div class="gh-nav-list gh-nav-main">
<button class="gh-nav-design-tab" type="button" {{on "click" (fn this.toggleSection "brand")}}>
<span class="gh-nav-button-expand">{{svg-jar (if (set-has this.openSections "brand") "arrow-down-stroke" "arrow-right-stroke")}}</span>
<span class="gh-nav-button-expand">{{svg-jar (if (eq this.openSection "brand") "arrow-down-stroke" "arrow-right-stroke")}}</span>
{{svg-jar "paintbrush"}}Brand
</button>
{{#if (set-has this.openSections "brand")}}
{{#if (eq this.openSection "brand")}}
<div class="gh-nav-design-settings">
<Settings::Design::GeneralSettingsForm
@updatePreview={{perform this.themeManagement.updatePreviewHtmlTask}}
@ -19,11 +19,11 @@
{{#if this.themeSettings}}
{{#each this.settingGroups as |group|}}
<button class="gh-nav-design-tab" type="button" {{on "click" (fn this.toggleSection group.key)}}>
<span class="gh-nav-button-expand">{{svg-jar (if (set-has this.openSections group.key) "arrow-down-stroke" "arrow-right-stroke")}}</span>
<span class="gh-nav-button-expand">{{svg-jar (if (eq this.openSection group.key) "arrow-down-stroke" "arrow-right-stroke")}}</span>
{{svg-jar group.icon}} {{group.name}}
</button>
{{#if (set-has this.openSections group.key)}}
{{#if (eq this.openSection group.key)}}
<div class="gh-nav-design-settings">
<Settings::Design::ThemeSettingsForm
@themeSettings={{group.settings}}

View File

@ -1,5 +1,4 @@
import Component from '@glimmer/component';
import {TrackedSet} from 'tracked-built-ins';
import {action} from '@ember/object';
import {inject as service} from '@ember/service';
import {task} from 'ember-concurrency-decorators';
@ -12,7 +11,7 @@ export default class DesignMenuComponent extends Component {
@service settings;
@service themeManagement;
@tracked openSections = new TrackedSet();
@tracked openSection = null;
KNOWN_GROUPS = [{
key: 'homepage',
@ -61,7 +60,11 @@ export default class DesignMenuComponent extends Component {
@action
toggleSection(section) {
this.openSections.has(section) ? this.openSections.delete(section) : this.openSections.add(section);
if (this.openSection === section) {
this.openSection = null;
} else {
this.openSection = section;
}
}
@task