Skip to content

Commit ac4a234

Browse files
daniellrgndaniellrgn
committedMar 4, 2025·
Fix navbar collapse and language menu click event
1 parent 622dd46 commit ac4a234

File tree

2 files changed

+76
-70
lines changed

2 files changed

+76
-70
lines changed
 

‎src/lib/components/layout/Header.svelte

+75-69
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,12 @@
121121
navOpening = false;
122122
}, 100);
123123
return;
124+
} else if (event.target?.parentElement?.className?.includes('nav-link') && event.target?.parentElement?.className?.includes('dropdown-toggle')) {
125+
navOpening = true;
126+
setTimeout(() => {
127+
navOpening = false;
128+
}, 100);
129+
return;
124130
}
125131
closeNav();
126132
});
@@ -133,6 +139,7 @@
133139
$isOpen = event.detail.isOpen;
134140
}
135141
</script>
142+
<div>
136143
<Row>
137144
<Navbar sticky="top"color="light" light expand="sm" style="border-bottom: 1px solid rgb(204, 204, 204);">
138145
<NavbarBrand href="https://doh.wa.gov/" target="_blank">
@@ -142,84 +149,83 @@
142149
</Col>
143150
</Row>
144151
</NavbarBrand>
145-
<div>
146152
<NavbarToggler class="me-2" on:click={() => ($isOpen = !$isOpen)} />
147153
<Collapse class="flex-column ms-2" isOpen={$isOpen} navbar expand="sm" on:update={handleUpdate}>
148154
<Nav class="ms-auto" navbar>
149-
<LanguageMenu />
150-
</Nav>
151-
<Nav class="ms-auto" navbar>
152-
<NavItem>
153-
<NavLink href={"/"} active={ activeItem === "home" }>Home</NavLink>
154-
</NavItem>
155-
{#if haveUser}
156-
{#await authService.getProfile() then profile}
157-
{#if profile}
158-
<NavItem>
159-
<NavLink href="/summaries" active={ activeItem === "summaries" }>Summaries</NavLink>
160-
</NavItem>
161-
<NavItem>
162-
<NavLink href="/create" active={ activeItem === "create" }>Create</NavLink>
163-
</NavItem>
164-
<Dropdown nav inNavbar class="navbar-dropdown" size="sm" direction="down">
165-
<DropdownToggle color="primary" nav caret><Icon name="person-circle"/> Account</DropdownToggle>
166-
<DropdownMenu end style="max-height: 500px; overflow:auto">
167-
<DropdownItem header>Welcome, {profile.given_name ?? profile.preferred_username}</DropdownItem>
155+
<LanguageMenu />
156+
</Nav>
157+
<Nav class="ms-auto" navbar>
158+
<NavItem>
159+
<NavLink href={"/"} active={ activeItem === "home" }>Home</NavLink>
160+
</NavItem>
161+
{#if haveUser}
162+
{#await authService.getProfile() then profile}
163+
{#if profile}
164+
<NavItem>
165+
<NavLink href="/summaries" active={ activeItem === "summaries" }>Summaries</NavLink>
166+
</NavItem>
167+
<NavItem>
168+
<NavLink href="/create" active={ activeItem === "create" }>Create</NavLink>
169+
</NavItem>
170+
<Dropdown nav inNavbar class="navbar-dropdown" size="sm" direction="down">
171+
<DropdownToggle color="primary" nav caret><Icon name="person-circle"/> Account</DropdownToggle>
172+
<DropdownMenu end style="max-height: 500px; overflow:auto">
173+
<DropdownItem header>Welcome, {profile.given_name ?? profile.preferred_username}</DropdownItem>
174+
<DropdownItem
175+
on:click={() => {
176+
authService.logout();
177+
}}><Icon name="box-arrow-right"/> Sign Out</DropdownItem>
178+
<DropdownItem divider />
179+
<DropdownItem header>Demo Options</DropdownItem>
168180
<DropdownItem
169181
on:click={() => {
170-
authService.logout();
171-
}}><Icon name="box-arrow-right"/> Sign Out</DropdownItem>
172-
<DropdownItem divider />
173-
<DropdownItem header>Demo Options</DropdownItem>
174-
<DropdownItem
175-
on:click={() => {
176-
$mode = ($mode === 'advanced' ? 'normal' : 'advanced');
177-
}}>
178-
<Row class="mr-0" style="min-width:240px">
179-
<Col class="d-flex justify-content-start align-items-center pe-0">
180-
Show Advanced Features
181-
</Col>
182-
<Col class="d-flex justify-content-end ps-0">
183-
{#if $mode == 'advanced'}
184-
<Icon class="text-primary" name="toggle-on"></Icon>
185-
{:else}
186-
<Icon class="text-secondary" name="toggle-off"></Icon>
187-
{/if}
188-
</Col>
189-
</Row>
190-
</DropdownItem>
191-
<DropdownItem divider />
192-
<DropdownItem header>Your Summaries</DropdownItem>
193-
<DropdownItem on:click={() => { goto("/create") }}>
194-
<Icon name="plus-lg" /> Create New Summary
195-
</DropdownItem>
196-
{#if $shlStore.length > 0}
197-
{#each $shlStore as shl, i}
198-
<DropdownItem
199-
on:click={() => {
200-
goto('/view/' + shl.id);
201-
}}>{shl.label || `Summary ${i + 1}`}</DropdownItem>
202-
{/each}
203-
{/if}
204-
</DropdownMenu>
205-
</Dropdown>
206-
{:else}
207-
<NavItem>
208-
<NavLink on:click={() => authService.login()}><Icon name="person-circle"/> Sign In</NavLink>
209-
</NavItem>
210-
{/if}
211-
{/await}
212-
{:else}
213-
<NavItem>
214-
<NavLink on:click={() => authService.login()}><Icon name="person-circle"/> Sign In</NavLink>
215-
</NavItem>
216-
{/if}
217-
</Nav>
182+
$mode = ($mode === 'advanced' ? 'normal' : 'advanced');
183+
}}>
184+
<Row class="mr-0" style="min-width:240px">
185+
<Col class="d-flex justify-content-start align-items-center pe-0">
186+
Show Advanced Features
187+
</Col>
188+
<Col class="d-flex justify-content-end ps-0">
189+
{#if $mode == 'advanced'}
190+
<Icon class="text-primary" name="toggle-on"></Icon>
191+
{:else}
192+
<Icon class="text-secondary" name="toggle-off"></Icon>
193+
{/if}
194+
</Col>
195+
</Row>
196+
</DropdownItem>
197+
<DropdownItem divider />
198+
<DropdownItem header>Your Summaries</DropdownItem>
199+
<DropdownItem on:click={() => { goto("/create") }}>
200+
<Icon name="plus-lg" /> Create New Summary
201+
</DropdownItem>
202+
{#if $shlStore.length > 0}
203+
{#each $shlStore as shl, i}
204+
<DropdownItem
205+
on:click={() => {
206+
goto('/view/' + shl.id);
207+
}}>{shl.label || `Summary ${i + 1}`}</DropdownItem>
208+
{/each}
209+
{/if}
210+
</DropdownMenu>
211+
</Dropdown>
212+
{:else}
213+
<NavItem>
214+
<NavLink on:click={() => authService.login()}><Icon name="person-circle"/> Sign In</NavLink>
215+
</NavItem>
216+
{/if}
217+
{/await}
218+
{:else}
219+
<NavItem>
220+
<NavLink on:click={() => authService.login()}><Icon name="person-circle"/> Sign In</NavLink>
221+
</NavItem>
222+
{/if}
223+
</Nav>
218224
</Collapse>
219-
</div>
220225
</Navbar>
221226
<Banner title="Using the International Patient Summary"/>
222227
</Row>
228+
</div>
223229
<style>
224230
:global(#nav-image) {
225231
width: 240px;

‎src/lib/components/layout/LanguageMenu.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
</script>
1111

1212
<Dropdown nav inNavbar class="navbar-dropdown" size="sm" direction="down">
13-
<DropdownToggle color="primary" class="pt-0" nav>
13+
<DropdownToggle color="primary" class="pt-0" nav caret>
1414
<span style="font-size:small">
1515
{$locales[$locale].lang} <Icon name="globe2" />
1616
</span>

0 commit comments

Comments
 (0)
Please sign in to comment.