hide search in mobile view when not viewing all topics list
MODIFY
src/components/docs/mobile-menu/index.svelte
src/components/docs/mobile-menu/index.svelte
import MobileMenuSubMenu from "./sub-menu.svelte";
// States
- import topicsState from "./topics-state";
+ import topicsState from "../states/topics-state";
export let MENU;
</script>

MODIFY
src/components/docs/mobile-menu/menu-item.svelte
src/components/docs/mobile-menu/menu-item.svelte
<script lang="ts">
import { page } from "$app/stores";
- import topicsState from "./topics-state";
+ import topicsState from "../states/topics-state";
export let href: string;
export let onClick;

MODIFY
src/components/docs/mobile-menu/sub-menu.svelte
src/components/docs/mobile-menu/sub-menu.svelte
-<script>
+<script lang="ts">
// Components
import MenuItem from "./menu-item.svelte";
// States
- import topicsState from "./topics-state";
- import subMenuState from "./sub-menu-state";
+ import topicsState from "../states/topics-state";
+ import subMenuState from "../states/sub-menu-state";
+
+ import docsCurrentSectionStore from "../../../stores/docs-current-section";
export let MENU;
+
+ $: currentSection = MENU.find(({ path }) =>
+ $docsCurrentSectionStore
+ ? path.indexOf($docsCurrentSectionStore) >= 0
+ : /\/docs\/$/.test(path)
+ );
</script>
<style lang="scss">
All topics
</button>
+{#if currentSection.subMenu}
<div class="sub-menu-container bg-white">
<button
class="toggle-button w-full"
type="button"
on:click={() => ($subMenuState = !$subMenuState)}
>
- <div class="toggle-button__label">NAME</div>
+ <div class="toggle-button__label">{currentSection.title}</div>
<div class="toggle-button__icon">
<img
class={`toggle-button__icon-arrow ${$subMenuState ? "open" : ""}`}
{#if $subMenuState}
<ul class="sub-menu px-4">
- <MenuItem onClick={() => ($subMenuState = false)}>TEST</MenuItem>
+ {#each currentSection.subMenu as sub}
+ <MenuItem href={sub.path} onClick={() => ($subMenuState = false)}>
+ {sub.title}
+ </MenuItem>
+ {/each}
</ul>
{/if}
</div>
+{/if}

MODIFY
src/components/docs/mobile-menu/topics.svelte
src/components/docs/mobile-menu/topics.svelte
import MenuItem from "./menu-item.svelte";
// States
- import topicsState from "./topics-state";
+ import topicsState from "../states/topics-state";
export let MENU;
</script>

MODIFY
src/components/docs/search.svelte
src/components/docs/search.svelte
<script>
import { onMount } from "svelte";
+ import topicsState from "./states/topics-state";
const docSearchJSVersion = "2.6.3";
const docSearchInputSelector = "search-doc-input";
@media (max-width: 768px) {
@apply mb-4;
+
+ &:not(.topics-active) {
+ display: none;
+ }
}
}
src="https://cdn.jsdelivr.net/npm/docsearch.js@{docSearchJSVersion}/dist/cdn/docsearch.min.js"></script>
</svelte:head>
-<div class="input-container">
+<div class={`input-container ${$topicsState ? "topics-active" : ""}`}>
<label for={docSearchInputSelector} class="sr-only">Search</label>
<div class="relative">
<input

RENAME
src/components/docs/mobile-menu/sub-menu-state.ts
src/components/docs/states/sub-menu-state.ts
RENAME
src/components/docs/mobile-menu/topics-state.ts
src/components/docs/states/topics-state.ts
hide search in mobile view when not viewing all topics list