more menu WIP
DELETE
src/components/docs/mobile-menu/button.svelte
-<style>
- .back-button {
- display: inline-flex;
- align-items: center;
- color: black;
- line-height: 138%;
- }
-
- .back-button__icon {
- flex: 0 0 auto;
- margin-right: 1rem;
- color: black;
- }
-
- .back-button__icon-arrow {
- transform: rotate(90deg);
- }
-</style>
-
-<button class="back-button" type="button" on:click={() => console.log("click")}>
- <div class="back-button__icon">
- <img
- class="back-button__icon-arrow"
- src="/arrow.svg"
- alt="See all topics"
- width="12"
- height="7"
- />
- </div>
- All topics
-</button>

MODIFY
src/components/docs/mobile-menu/index.svelte
src/components/docs/mobile-menu/index.svelte
<script>
import MobileMenuTopics from "./topics.svelte";
- import MobileMenuButton from "./button.svelte";
import MobileMenuSubMenu from "./sub-menu.svelte";
+
+ import topicsState from "./topics-state";
</script>
+<style lang="scss">
+ .mobile-menu {
+ margin-bottom: 2.5rem;
+
+ @media (min-width: 769px) {
+ display: none;
+ }
+ }
+</style>
+
+<div class="mobile-menu">
+ {#if $topicsState}
<MobileMenuTopics />
-<MobileMenuButton />
+ {:else}
<MobileMenuSubMenu />
+ {/if}
+</div>

MODIFY
src/components/docs/mobile-menu/menu-item.svelte
src/components/docs/mobile-menu/menu-item.svelte
.menu-item {
margin-bottom: 0;
- + .menu-item {
- border-top: var(--border-light);
+ &:not(:last-child) {
+ border-bottom: var(--border-light);
}
}

ADD
src/components/docs/mobile-menu/sub-menu-state.ts
+import { writable } from "svelte/store";
+
+// true: sub menu open
+// false: sub menu closed
+export default writable(false);

MODIFY
src/components/docs/mobile-menu/sub-menu.svelte
src/components/docs/mobile-menu/sub-menu.svelte
<script>
+ // Components
import MenuItem from "./menu-item.svelte";
+
+ // States
+ import topicsState from "./topics-state";
+ import subMenuState from "./sub-menu-state";
</script>
<style lang="scss">
- .container {
+ .back-button {
+ display: inline-flex;
+ align-items: center;
+ color: black;
+ line-height: 138%;
+ }
+
+ .back-button__icon {
+ flex: 0 0 auto;
+ margin-right: 1rem;
+ color: black;
+ }
+
+ .back-button__icon-arrow {
+ transform: rotate(90deg);
+ }
+
+ .sub-menu-container {
margin-top: 1rem;
border-radius: 0.75rem;
box-shadow: var(--shadow);
.toggle-button__icon {
flex: 0 0 auto;
}
+
+ .toggle-button__icon-arrow.open {
+ transform: rotate(180deg);
+ }
</style>
-<div class="container bg-white">
+<button
+ class="back-button"
+ type="button"
+ on:click={() => ($topicsState = !$topicsState)}
+>
+ <div class="back-button__icon">
+ <img
+ class="back-button__icon-arrow"
+ src="/arrow.svg"
+ alt="See all topics"
+ width="12"
+ height="7"
+ />
+ </div>
+ All topics
+</button>
+
+<div class="sub-menu-container bg-white">
<button
class="toggle-button w-full"
type="button"
- on:click={() => console.log("click")}
+ on:click={() => ($subMenuState = !$subMenuState)}
>
<div class="toggle-button__label">NAME</div>
<div class="toggle-button__icon">
<img
- class="toggle-button__icon-arrow"
+ class={`toggle-button__icon-arrow ${$subMenuState ? "open" : ""}`}
src="/arrow.svg"
- alt="See/hide list"
+ alt="Toggle sub menu"
width="12"
height="7"
/>
</div>
</button>
+
+ {#if $subMenuState}
<ul class="sub-menu px-4">
<MenuItem />
<MenuItem />
<MenuItem />
<MenuItem />
</ul>
+ {/if}
</div>

ADD
src/components/docs/mobile-menu/topics-state.ts
+import { writable } from "svelte/store";
+
+// true: topics open
+// false: topics closed
+export default writable(false);

MODIFY
src/components/docs/mobile-menu/topics.svelte
src/components/docs/mobile-menu/topics.svelte
</script>
<style lang="scss">
- .mobile-menu {
- @media (min-width: 769px) {
- display: none;
- }
- }
-
// override _forms.scss
.menu-item {
margin-bottom: 0;
}
</style>
-<ul class="mobile-menu">
+<ul>
{#each MENU as menuItem}
<li class="menu-item">
<a href={menuItem.path} class="menu-item__link">

more menu WIP