Skip to content

Commit

Permalink
feat: expose a prop to allow hiding SideMenu
Browse files Browse the repository at this point in the history
  • Loading branch information
@DarknessKiller
DarknessKiller committed Feb 7, 2023
1 parent 478d5e6 commit 5a989f6
Show file tree
Hide file tree
Showing 2 changed files with 110 additions and 102 deletions.
211 changes: 109 additions & 102 deletions components/app-bar/src/AppBar.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
export let leadingItems: NavItem[] = [];
export let trailingItems: NavItem[] = [];
export let currentPath: string = "/";
export let hideSideMenu = false;
let openSideMenu = false;
let subMenus: SubNavItem[] = [];
Expand Down Expand Up @@ -55,12 +56,14 @@
>
<div class="resp-app-bar__box">
<div class="resp-app-bar__main" style={`max-width: ${maxWidth}`}>
<div
class="resp-app-bar__icon-menu"
on:click={() => (openSideMenu = !openSideMenu)}
>
{@html `<svg width="24" height="24" viewBox="0 0 24 24" role="img"><path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z" /></svg>`}
</div>
{#if !hideSideMenu}
<div
class="resp-app-bar__icon-menu"
on:click={() => (openSideMenu = !openSideMenu)}
>
{@html `<svg width="24" height="24" viewBox="0 0 24 24" role="img"><path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z" /></svg>`}
</div>
{/if}
<div class="resp-app-bar__logo">
<slot name="logo" />
</div>
Expand Down Expand Up @@ -121,105 +124,109 @@
{/if}
</header>

{#if openSideMenu}
<div class="resp-app-bar__overlay" on:click={() => (openSideMenu = false)} />
{/if}
<!-- SIDE MENU -->
<aside
on:click={handleClickSideMenu}
class="resp-app-bar__sidemenu"
class:resp-app-bar__sidemenu--close={!openSideMenu}
>
<header class="resp-app-bar__sidemenu-header">
<slot name="logo" />
<i class="resp-app-bar__sidemenu-icon" on:click={() => (openSideMenu = false)}>
{@html `<svg viewBox="64 64 896 896" focusable="false" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" /></svg>`}
</i>
</header>
<div class="resp-app-bar__sidemenu-body">
<slot name="menu-body">
<ul>
{#each leadingItems as { key, href, label, icon, ...otherProps }, index (key)}
<!-- menu leading items -->
<li class="resp-app-bar__sidemenu-item">
<slot name="menu-item" item={leadingItems[index]}>
<input type="checkbox" id="check_{key}" checked />
<label for="check_{key}">
{#if (otherProps.subItems || []).length > 0}
<div class="resp-app-bar__sidemenu-item__dropdown">
<span style="width: 100%;" class="item-label">
<Icon useHref={icon} style="width: 16px; height: 16px;" />
<span>{label}</span>
</span>
<svg
class="drop-icon"
style="width: 20px; height: 20px;"
viewBox="-14 -25 70 70"
>
<defs />
<g>
<path
d="M 2 2 L 22 22 L 42 2"
fill="none"
stroke="#fc4451"
stroke-width="5"
stroke-miterlimit="10"
pointer-events="stroke"
/>
</g>
</svg>
</div>
{:else}
<a
class:resp-app-bar__sidemenu-item--selected={isActivePath(href || "")}
{href}
{...otherProps}
>
<span class="item-label" style="height: 100%;">
<Icon useHref={icon} style="width: 16px; height: 16px;" />
<span>{label}</span>
</span>
</a>
{/if}
</label>
</slot>
{#if (otherProps.subItems || []).length > 0}
<!-- menu subnav items -->
<div class="resp-app-bar__sidemenu-sub">
<ul>
{#each otherProps.subItems || [] as sub, subIndex}
<li class="resp-app-bar__sidemenu-sub__item">
<slot
name="menu-subitem"
item={leadingItems[index].subMenus[subIndex]}
{#if !hideSideMenu}
{#if openSideMenu}
<div class="resp-app-bar__overlay" on:click={() => (openSideMenu = false)} />
{/if}
<!-- SIDE MENU -->
<aside
on:click={handleClickSideMenu}
class="resp-app-bar__sidemenu"
class:resp-app-bar__sidemenu--close={!openSideMenu}
>
<header class="resp-app-bar__sidemenu-header">
<slot name="logo" />
<i class="resp-app-bar__sidemenu-icon" on:click={() => (openSideMenu = false)}>
{@html `<svg viewBox="64 64 896 896" focusable="false" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" /></svg>`}
</i>
</header>
<div class="resp-app-bar__sidemenu-body">
<slot name="menu-body">
<ul>
{#each leadingItems as { key, href, label, icon, ...otherProps }, index (key)}
<!-- menu leading items -->
<li class="resp-app-bar__sidemenu-item">
<slot name="menu-item" item={leadingItems[index]}>
<input type="checkbox" id="check_{key}" checked />
<label for="check_{key}">
{#if (otherProps.subItems || []).length > 0}
<div class="resp-app-bar__sidemenu-item__dropdown">
<span style="width: 100%;" class="item-label">
<Icon useHref={icon} style="width: 16px; height: 16px;" />
<span>{label}</span>
</span>
<svg
class="drop-icon"
style="width: 20px; height: 20px;"
viewBox="-14 -25 70 70"
>
<a
class:resp-app-bar__sidemenu-sub__item__selected={isActivePath(
sub.href || "",
true
)}
href={sub.href}
{...otherProps}
<defs />
<g>
<path
d="M 2 2 L 22 22 L 42 2"
fill="none"
stroke="#fc4451"
stroke-width="5"
stroke-miterlimit="10"
pointer-events="stroke"
/>
</g>
</svg>
</div>
{:else}
<a
class:resp-app-bar__sidemenu-item--selected={isActivePath(
href || ""
)}
{href}
{...otherProps}
>
<span class="item-label" style="height: 100%;">
<Icon useHref={icon} style="width: 16px; height: 16px;" />
<span>{label}</span>
</span>
</a>
{/if}
</label>
</slot>
{#if (otherProps.subItems || []).length > 0}
<!-- menu subnav items -->
<div class="resp-app-bar__sidemenu-sub">
<ul>
{#each otherProps.subItems || [] as sub, subIndex}
<li class="resp-app-bar__sidemenu-sub__item">
<slot
name="menu-subitem"
item={leadingItems[index].subMenus[subIndex]}
>
{sub.label}
</a>
</slot>
</li>
{/each}
</ul>
</div>
{/if}
</li>
{/each}
</ul>
</slot>
</div>
<div class="resp-app-bar__sidemenu-footer">
<div>
<slot name="footer" />
<a
class:resp-app-bar__sidemenu-sub__item__selected={isActivePath(
sub.href || "",
true
)}
href={sub.href}
{...otherProps}
>
{sub.label}
</a>
</slot>
</li>
{/each}
</ul>
</div>
{/if}
</li>
{/each}
</ul>
</slot>
</div>
</div>
</aside>
<div class="resp-app-bar__sidemenu-footer">
<div>
<slot name="footer" />
</div>
</div>
</aside>
{/if}

<style lang="scss" global>
$sm: 576px;
Expand Down
1 change: 1 addition & 0 deletions components/app-bar/types/index.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ export interface AppBarProps {
trailingItems: NavItem[];
style?: string;
currentPath?: string;
hideSideMenu?: boolean;
}

export interface AppBarEvents {
Expand Down

0 comments on commit 5a989f6

Please sign in to comment.