Skip to content

Commit 62efba0

Browse files
author
shleewhite
committed
fix: move where logic is
1 parent 7b88347 commit 62efba0

File tree

2 files changed

+127
-122
lines changed

2 files changed

+127
-122
lines changed

‎showcase/app/components/mock/app/sidebar/app-side-nav.gts‎

Lines changed: 105 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export interface MockAppSidebarAppSideNavSignature {
2424
isResponsive?: HdsAppSideNavSignature['Args']['isResponsive'];
2525
isCollapsible?: HdsAppSideNavSignature['Args']['isCollapsible'];
2626
showDevToggle?: boolean;
27-
shouldRemoveFromDomOnCollapse?: boolean;
27+
onToggleMinimizedStatus?: HdsAppSideNavSignature['Args']['onToggleMinimizedStatus'];
2828
};
2929
Element: HdsAppSideNavSignature['Element'];
3030
}
@@ -33,7 +33,6 @@ export default class MockAppSidebarAppSideNav extends Component<MockAppSidebarAp
3333
isResponsive;
3434
isCollapsible;
3535
@tracked showMockInteractionState = false;
36-
@tracked isRendered = true;
3736

3837
constructor(owner: Owner, args: MockAppSidebarAppSideNavSignature['Args']) {
3938
super(owner, args);
@@ -45,118 +44,111 @@ export default class MockAppSidebarAppSideNav extends Component<MockAppSidebarAp
4544
this.showMockInteractionState = !this.showMockInteractionState;
4645
};
4746

48-
removeSideNavFromDOM = (isOpen: boolean) => {
49-
if (isOpen && this.args.shouldRemoveFromDomOnCollapse)
50-
this.isRendered = false;
51-
};
52-
5347
<template>
54-
{{#if this.isRendered}}
55-
<HdsAppSideNav
56-
@isResponsive={{this.isResponsive}}
57-
@isCollapsible={{this.isCollapsible}}
58-
@onToggleMinimizedStatus={{this.removeSideNavFromDOM}}
48+
<HdsAppSideNav
49+
@isResponsive={{this.isResponsive}}
50+
@isCollapsible={{this.isCollapsible}}
51+
@onToggleMinimizedStatus={{@onToggleMinimizedStatus}}
52+
>
53+
<HdsAppSideNavList
54+
class="hds-side-nav-hide-when-minimized"
55+
aria-label="Dashboard"
56+
as |SNL|
57+
>
58+
<SNL.Link @icon="dashboard" @text="Dashboard" @isActive={{true}} />
59+
</HdsAppSideNavList>
60+
<HdsAppSideNavList
61+
class="hds-side-nav-hide-when-minimized"
62+
aria-label="Services"
63+
as |SNL|
64+
>
65+
<SNL.Title>Services</SNL.Title>
66+
<SNL.Link
67+
@text={{if this.showMockInteractionState "isActive" "Boundary"}}
68+
@icon="boundary"
69+
@href="#"
70+
class="active"
71+
/>
72+
<SNL.Link
73+
@text={{if this.showMockInteractionState ":focus" "Consul"}}
74+
@icon="consul"
75+
@href="#"
76+
class="mock-focus"
77+
/>
78+
<SNL.Link
79+
@text={{if this.showMockInteractionState ":hover" "Packer"}}
80+
@icon="packer"
81+
@href="#"
82+
class="mock-hover"
83+
/>
84+
<SNL.Link
85+
@text={{if this.showMockInteractionState ":active" "Vault"}}
86+
@icon="vault"
87+
@href="#"
88+
class="mock-active"
89+
/>
90+
<SNL.Link
91+
@text="Vault Secrets"
92+
@icon="vault-secrets-square"
93+
@href="#"
94+
/>
95+
<SNL.Link @text="Terraform" @icon="terraform" @href="#" />
96+
<SNL.Link @text="Vagrant" @icon="vagrant" @badge="Alpha" @href="#" />
97+
<SNL.Link
98+
@text="Waypoint"
99+
@icon="waypoint"
100+
@badge="Alpha"
101+
@hasSubItems={{true}}
102+
/>
103+
</HdsAppSideNavList>
104+
<HdsAppSideNavList
105+
class="hds-side-nav-hide-when-minimized"
106+
aria-label="Organization"
107+
as |SNL|
59108
>
60-
<HdsAppSideNavList
61-
class="hds-side-nav-hide-when-minimized"
62-
aria-label="Dashboard"
63-
as |SNL|
64-
>
65-
<SNL.Link @icon="dashboard" @text="Dashboard" @isActive={{true}} />
66-
</HdsAppSideNavList>
67-
<HdsAppSideNavList
68-
class="hds-side-nav-hide-when-minimized"
69-
aria-label="Services"
70-
as |SNL|
71-
>
72-
<SNL.Title>Services</SNL.Title>
73-
<SNL.Link
74-
@text={{if this.showMockInteractionState "isActive" "Boundary"}}
75-
@icon="boundary"
76-
@href="#"
77-
class="active"
78-
/>
79-
<SNL.Link
80-
@text={{if this.showMockInteractionState ":focus" "Consul"}}
81-
@icon="consul"
82-
@href="#"
83-
class="mock-focus"
84-
/>
85-
<SNL.Link
86-
@text={{if this.showMockInteractionState ":hover" "Packer"}}
87-
@icon="packer"
88-
@href="#"
89-
class="mock-hover"
90-
/>
91-
<SNL.Link
92-
@text={{if this.showMockInteractionState ":active" "Vault"}}
93-
@icon="vault"
94-
@href="#"
95-
class="mock-active"
96-
/>
97-
<SNL.Link
98-
@text="Vault Secrets"
99-
@icon="vault-secrets-square"
100-
@href="#"
101-
/>
102-
<SNL.Link @text="Terraform" @icon="terraform" @href="#" />
103-
<SNL.Link @text="Vagrant" @icon="vagrant" @badge="Alpha" @href="#" />
104-
<SNL.Link
105-
@text="Waypoint"
106-
@icon="waypoint"
107-
@badge="Alpha"
108-
@hasSubItems={{true}}
109-
/>
110-
</HdsAppSideNavList>
111-
<HdsAppSideNavList
112-
class="hds-side-nav-hide-when-minimized"
113-
aria-label="Organization"
114-
as |SNL|
115-
>
116-
<SNL.Title>Default Org</SNL.Title>
117-
<SNL.Link
118-
@text="HashiCorp Virtual Networks"
119-
@icon="network"
120-
@href="#"
121-
/>
122-
<SNL.Link
123-
@text="Access control (IAM)"
124-
@icon="users"
125-
@href="#"
126-
@hasSubItems={{true}}
127-
/>
128-
<SNL.Link
129-
@text="Billing"
130-
@icon="credit-card"
131-
@href="#"
132-
@hasSubItems={{true}}
133-
/>
134-
<SNL.Link
135-
@text="Settings"
136-
@icon="settings"
137-
@href="#"
138-
@hasSubItems={{true}}
139-
/>
140-
<SNL.Link
141-
@href="#"
142-
@isHrefExternal={{true}}
143-
@icon="guide"
144-
@text="Documentation"
145-
/>
146-
{{#if @showDevToggle}}
147-
<SNL.ExtraAfter>
148-
<div {{style margin="32px 6px"}}>
149-
<HdsFormToggleField
150-
{{on "change" this.toggleMockInteractionState}}
151-
as |F|
152-
>
153-
<F.Label>Show mock states</F.Label>
154-
</HdsFormToggleField>
155-
</div>
156-
</SNL.ExtraAfter>
157-
{{/if}}
158-
</HdsAppSideNavList>
159-
</HdsAppSideNav>
160-
{{/if}}
109+
<SNL.Title>Default Org</SNL.Title>
110+
<SNL.Link
111+
@text="HashiCorp Virtual Networks"
112+
@icon="network"
113+
@href="#"
114+
/>
115+
<SNL.Link
116+
@text="Access control (IAM)"
117+
@icon="users"
118+
@href="#"
119+
@hasSubItems={{true}}
120+
/>
121+
<SNL.Link
122+
@text="Billing"
123+
@icon="credit-card"
124+
@href="#"
125+
@hasSubItems={{true}}
126+
/>
127+
<SNL.Link
128+
@text="Settings"
129+
@icon="settings"
130+
@href="#"
131+
@hasSubItems={{true}}
132+
/>
133+
<SNL.Link
134+
@href="#"
135+
@isHrefExternal={{true}}
136+
@icon="guide"
137+
@text="Documentation"
138+
/>
139+
{{#if @showDevToggle}}
140+
<SNL.ExtraAfter>
141+
<div {{style margin="32px 6px"}}>
142+
<HdsFormToggleField
143+
{{on "change" this.toggleMockInteractionState}}
144+
as |F|
145+
>
146+
<F.Label>Show mock states</F.Label>
147+
</HdsFormToggleField>
148+
</div>
149+
</SNL.ExtraAfter>
150+
{{/if}}
151+
</HdsAppSideNavList>
152+
</HdsAppSideNav>
161153
</template>
162154
}

‎showcase/app/templates/page-components/app-side-nav/frameless/demo-remove-from-dom.gts‎

Lines changed: 22 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,32 @@
1-
import type { TemplateOnlyComponent } from '@ember/component/template-only';
1+
/**
2+
* Copyright (c) HashiCorp, Inc.
3+
* SPDX-License-Identifier: MPL-2.0
4+
*/
5+
6+
import Component from '@glimmer/component';
27
import { pageTitle } from 'ember-page-title';
8+
import { tracked } from '@glimmer/tracking';
39

410
import MockApp from 'showcase/components/mock/app';
511

6-
const PageComponentsAppSideNavFramelessDemoRemoveFromDom: TemplateOnlyComponent =
12+
export default class PageComponentsAppSideNavFramelessDemoRemoveFromDom extends Component {
13+
@tracked isRendered = true;
14+
15+
removeSideNavFromDOM = (isOpen: boolean) => {
16+
if (isOpen) this.isRendered = false;
17+
};
18+
719
<template>
820
{{pageTitle "App SideNav remove from DOM demo - Frameless"}}
921

1022
<MockApp>
1123
<:sidebar as |S|>
12-
<S.SideNav
13-
@showDevToggle={{true}}
14-
@shouldRemoveFromDomOnCollapse={{true}}
15-
/>
24+
{{#if this.isRendered}}
25+
<S.SideNav
26+
@showDevToggle={{true}}
27+
@onToggleMinimizedStatus={{this.removeSideNavFromDOM}}
28+
/>
29+
{{/if}}
1630
</:sidebar>
1731
<:main as |M|>
1832
<M.PageHeader @showActionButton={{true}} />
@@ -22,6 +36,5 @@ const PageComponentsAppSideNavFramelessDemoRemoveFromDom: TemplateOnlyComponent
2236
<M.GenericTextContent />
2337
</:main>
2438
</MockApp>
25-
</template>;
26-
27-
export default PageComponentsAppSideNavFramelessDemoRemoveFromDom;
39+
</template>
40+
}

0 commit comments

Comments
 (0)