Skip to content

Commit be2db8a

Browse files
lohanidamodarlohanidamodar
committed
Merge remote-tracking branch 'origin/main' into feat-project-changes
2 parents 53c1a54 + 3f3af27 commit be2db8a

File tree

1 file changed

+151
-142
lines changed

1 file changed

+151
-142
lines changed

‎src/lib/components/breadcrumbs.svelte

Lines changed: 151 additions & 142 deletions
Original file line numberDiff line numberDiff line change
@@ -190,83 +190,107 @@
190190
$currentPlan?.name.toLocaleLowerCase() !== selectedOrg?.tierName.toLocaleLowerCase()
191191
? $currentPlan.name
192192
: selectedOrg?.tierName; // fallback
193+
194+
$: derivedKey = `${selectedOrg?.$id}-${selectedProject?.$id}`;
193195
</script>
194196

195197
<svelte:window on:resize={onResize} />
196-
<div use:melt={$menubar}>
197-
{#if !$isSmallViewport}
198-
<span class="breadcrumb-separator">/</span>
199-
<button
200-
type="button"
201-
class="trigger"
202-
use:melt={$triggerOrganizations}
203-
aria-label="Open organizations tab">
204-
<span class="orgName">{selectedOrg?.name ?? 'Organization'}</span>
205-
<span class="not-mobile"
206-
>{#if correctPlanName}<Badge
207-
variant="secondary"
208-
content={correctPlanName} />{/if}</span>
209-
<Icon icon={IconChevronDown} size="s" color="--fgcolor-neutral-secondary" />
210-
</button>
211-
{:else}
212-
<button
213-
type="button"
214-
class="trigger"
215-
on:click={() => {
216-
organisationBottomSheetOpen = true;
217-
}}
218-
aria-label="Open organizations tab">
219-
<span class="orgName" class:noProjects={!selectedProject}
220-
>{selectedOrg?.name ?? 'Organization'}</span>
221-
<span class="not-mobile"
222-
><Badge variant="secondary" content={correctPlanName ?? ''} /></span>
223-
<Icon icon={IconChevronDown} size="s" color="--fgcolor-neutral-secondary" />
224-
</button>
225-
{/if}
226-
227-
<div class="menu" use:melt={$menuOrganizations}>
228-
<Card.Base padding="xxxs" shadow={true}>
229-
{#if selectedOrg}
230-
<div use:melt={$itemOrganizations}>
231-
<ActionMenu.Root>
232-
<ActionMenu.Item.Anchor href={`${base}/organization-${selectedOrg?.$id}`}
233-
>Organization overview</ActionMenu.Item.Anchor
234-
></ActionMenu.Root>
235-
</div>
236-
{#if organizations.length > 1}
237-
<div class="separator" use:melt={$separatorOrganizations}></div>
238198

239-
<div use:melt={$subTriggerOrganizations}>
199+
{#key derivedKey}
200+
<div use:melt={$menubar}>
201+
{#if !$isSmallViewport}
202+
<span class="breadcrumb-separator">/</span>
203+
<button
204+
type="button"
205+
class="trigger"
206+
use:melt={$triggerOrganizations}
207+
aria-label="Open organizations tab">
208+
<span class="orgName">{selectedOrg?.name ?? 'Organization'}</span>
209+
<span class="not-mobile"
210+
>{#if correctPlanName}<Badge
211+
variant="secondary"
212+
content={correctPlanName} />{/if}</span>
213+
<Icon icon={IconChevronDown} size="s" color="--fgcolor-neutral-secondary" />
214+
</button>
215+
{:else}
216+
<button
217+
type="button"
218+
class="trigger"
219+
on:click={() => {
220+
organisationBottomSheetOpen = true;
221+
}}
222+
aria-label="Open organizations tab">
223+
<span class="orgName" class:noProjects={!selectedProject}
224+
>{selectedOrg?.name ?? 'Organization'}</span>
225+
<span class="not-mobile"
226+
><Badge variant="secondary" content={correctPlanName ?? ''} /></span>
227+
<Icon icon={IconChevronDown} size="s" color="--fgcolor-neutral-secondary" />
228+
</button>
229+
{/if}
230+
231+
<div class="menu" use:melt={$menuOrganizations}>
232+
<Card.Base padding="xxxs" shadow={true}>
233+
{#if selectedOrg}
234+
<div use:melt={$itemOrganizations}>
240235
<ActionMenu.Root>
241-
<ActionMenu.Item.Button trailingIcon={IconChevronRight}
242-
>Switch organization</ActionMenu.Item.Button>
243-
</ActionMenu.Root>
236+
<ActionMenu.Item.Anchor
237+
href={`${base}/organization-${selectedOrg?.$id}`}
238+
>Organization overview</ActionMenu.Item.Anchor
239+
></ActionMenu.Root>
244240
</div>
245-
<div class="menu subMenu" use:melt={$subMenuOrganizations}>
246-
<Card.Base padding="xxxs" shadow={true}>
247-
<div use:melt={$radioGroupOrganizations}>
248-
{#each organizations as organization}
241+
{#if organizations.length > 1}
242+
<div class="separator" use:melt={$separatorOrganizations}></div>
243+
244+
<div use:melt={$subTriggerOrganizations}>
245+
<ActionMenu.Root>
246+
<ActionMenu.Item.Button trailingIcon={IconChevronRight}
247+
>Switch organization</ActionMenu.Item.Button>
248+
</ActionMenu.Root>
249+
</div>
250+
<div class="menu subMenu" use:melt={$subMenuOrganizations}>
251+
<Card.Base padding="xxxs" shadow={true}>
252+
<div use:melt={$radioGroupOrganizations}>
253+
{#each organizations as organization}
254+
<div use:melt={$itemOrganizations}>
255+
<ActionMenu.Root>
256+
<ActionMenu.Item.Anchor
257+
href={`${base}/organization-${organization?.$id}`}
258+
>{organization.name}</ActionMenu.Item.Anchor>
259+
</ActionMenu.Root>
260+
</div>
261+
{/each}
262+
<div class="separator" use:melt={$separatorOrganizations}></div>
249263
<div use:melt={$itemOrganizations}>
250264
<ActionMenu.Root>
251-
<ActionMenu.Item.Anchor
252-
href={`${base}/organization-${organization?.$id}`}
253-
>{organization.name}</ActionMenu.Item.Anchor>
254-
</ActionMenu.Root>
265+
<ActionMenu.Item.Button
266+
leadingIcon={IconPlusSm}
267+
on:click={createOrg}
268+
>Create organization</ActionMenu.Item.Button
269+
></ActionMenu.Root>
255270
</div>
256-
{/each}
257-
<div class="separator" use:melt={$separatorOrganizations}></div>
258-
<div use:melt={$itemOrganizations}>
259-
<ActionMenu.Root>
260-
<ActionMenu.Item.Button
261-
leadingIcon={IconPlusSm}
262-
on:click={createOrg}
263-
>Create organization</ActionMenu.Item.Button
264-
></ActionMenu.Root>
265271
</div>
266-
</div>
267-
</Card.Base>
268-
</div>
272+
</Card.Base>
273+
</div>
274+
{:else}
275+
<div class="separator" use:melt={$separatorOrganizations}></div>
276+
<div use:melt={$itemOrganizations}>
277+
<ActionMenu.Root>
278+
<ActionMenu.Item.Button
279+
leadingIcon={IconPlusSm}
280+
on:click={createOrg}>Create organization</ActionMenu.Item.Button
281+
></ActionMenu.Root>
282+
</div>
283+
{/if}
269284
{:else}
285+
{#each organizations as organization}
286+
<div use:melt={$itemOrganizations}>
287+
<ActionMenu.Root>
288+
<ActionMenu.Item.Anchor
289+
href={`${base}/organization-${organization?.$id}`}
290+
>{organization.name}</ActionMenu.Item.Anchor
291+
></ActionMenu.Root>
292+
</div>
293+
{/each}
270294
<div class="separator" use:melt={$separatorOrganizations}></div>
271295
<div use:melt={$itemOrganizations}>
272296
<ActionMenu.Root>
@@ -275,89 +299,74 @@
275299
></ActionMenu.Root>
276300
</div>
277301
{/if}
302+
</Card.Base>
303+
</div>
304+
305+
{#if selectedOrg && selectedProject}
306+
<span class="breadcrumb-separator">/</span>
307+
{#if !$isSmallViewport}
308+
<button
309+
type="button"
310+
class="trigger"
311+
use:melt={$triggerProjects}
312+
aria-label="Open projects tab">
313+
<span class="projectName">{selectedProject.name}</span>
314+
<Icon icon={IconChevronDown} size="s" />
315+
</button>
278316
{:else}
279-
{#each organizations as organization}
280-
<div use:melt={$itemOrganizations}>
317+
<button
318+
type="button"
319+
class="trigger"
320+
on:click={() => (projectsBottomSheetOpen = true)}
321+
aria-label="Open projects tab">
322+
<span class="projectName">{selectedProject.name}</span>
323+
<Icon icon={IconChevronDown} size="s" />
324+
</button>
325+
{/if}
326+
327+
<div class="menu" use:melt={$menuProjects}>
328+
<Card.Base padding="xxxs" shadow={true}>
329+
{#if selectedOrg.projects.length > 1}
330+
{#each selectedOrg.projects as project, index}
331+
{#if index < 4}
332+
<div use:melt={$itemProjects}>
333+
<ActionMenu.Root>
334+
<ActionMenu.Item.Anchor
335+
href={`${base}/project-${project.region}-${project.$id}`}>
336+
{project.name}
337+
</ActionMenu.Item.Anchor>
338+
</ActionMenu.Root>
339+
</div>
340+
{:else if index === 4}
341+
<div use:melt={$itemProjects}>
342+
<ActionMenu.Root>
343+
<ActionMenu.Item.Anchor
344+
href={`${base}/organization-${selectedOrg.$id}`}>
345+
All projects
346+
</ActionMenu.Item.Anchor>
347+
</ActionMenu.Root>
348+
</div>
349+
{/if}
350+
{/each}
351+
<div class="separator" use:melt={$separatorProjects}></div>
352+
{/if}
353+
<div use:melt={$itemProjects}>
281354
<ActionMenu.Root>
282355
<ActionMenu.Item.Anchor
283-
href={`${base}/organization-${organization?.$id}`}
284-
>{organization.name}</ActionMenu.Item.Anchor
285-
></ActionMenu.Root>
356+
leadingIcon={IconPlusSm}
357+
href={`${base}/organization-${selectedOrg?.$id}?create-project`}>
358+
Create project
359+
</ActionMenu.Item.Anchor></ActionMenu.Root>
286360
</div>
287-
{/each}
288-
<div class="separator" use:melt={$separatorOrganizations}></div>
289-
<div use:melt={$itemOrganizations}>
290-
<ActionMenu.Root>
291-
<ActionMenu.Item.Button leadingIcon={IconPlusSm} on:click={createOrg}
292-
>Create organization</ActionMenu.Item.Button
293-
></ActionMenu.Root>
294-
</div>
295-
{/if}
296-
</Card.Base>
361+
</Card.Base>
362+
</div>
363+
{/if}
297364
</div>
298365

299-
{#if selectedOrg && selectedProject}
300-
<span class="breadcrumb-separator">/</span>
301-
{#if !$isSmallViewport}
302-
<button
303-
type="button"
304-
class="trigger"
305-
use:melt={$triggerProjects}
306-
aria-label="Open projects tab">
307-
<span class="projectName">{selectedProject.name}</span>
308-
<Icon icon={IconChevronDown} size="s" />
309-
</button>
310-
{:else}
311-
<button
312-
type="button"
313-
class="trigger"
314-
on:click={() => (projectsBottomSheetOpen = true)}
315-
aria-label="Open projects tab">
316-
<span class="projectName">{selectedProject.name}</span>
317-
<Icon icon={IconChevronDown} size="s" />
318-
</button>
319-
{/if}
366+
<BottomSheet.Menu bind:isOpen={organisationBottomSheetOpen} menu={organizationsBottomSheet} />
320367

321-
<div class="menu" use:melt={$menuProjects}>
322-
<Card.Base padding="xxxs" shadow={true}>
323-
{#if selectedOrg.projects.length > 1}
324-
{#each selectedOrg.projects as project, index}
325-
{#if index < 4}
326-
<div use:melt={$itemProjects}>
327-
<ActionMenu.Root>
328-
<ActionMenu.Item.Anchor
329-
href={`${base}/project-${project.region}-${project.$id}`}>
330-
{project.name}
331-
</ActionMenu.Item.Anchor>
332-
</ActionMenu.Root>
333-
</div>
334-
{:else if index === 4}
335-
<div use:melt={$itemProjects}>
336-
<ActionMenu.Root>
337-
<ActionMenu.Item.Anchor
338-
href={`${base}/organization-${selectedOrg.$id}`}>
339-
All projects
340-
</ActionMenu.Item.Anchor>
341-
</ActionMenu.Root>
342-
</div>
343-
{/if}
344-
{/each}
345-
<div class="separator" use:melt={$separatorProjects}></div>
346-
{/if}
347-
<div use:melt={$itemProjects}>
348-
<ActionMenu.Root>
349-
<ActionMenu.Item.Anchor
350-
leadingIcon={IconPlusSm}
351-
href={`${base}/organization-${selectedOrg?.$id}?create-project`}>
352-
Create project
353-
</ActionMenu.Item.Anchor></ActionMenu.Root>
354-
</div>
355-
</Card.Base>
356-
</div>
357-
{/if}
358-
</div>
359-
<BottomSheet.Menu bind:isOpen={organisationBottomSheetOpen} menu={organizationsBottomSheet} />
360-
<BottomSheet.Menu bind:isOpen={projectsBottomSheetOpen} menu={projectsBottomSheet} />
368+
<BottomSheet.Menu bind:isOpen={projectsBottomSheetOpen} menu={projectsBottomSheet} />
369+
{/key}
361370

362371
<style lang="scss">
363372
.menu {

0 commit comments

Comments
 (0)