more menu show hide updates
MODIFY
src/components/docs/menu.svelte
src/components/docs/menu.svelte
<script lang="ts">
import MenuSection from "./menu-section.svelte";
-
- // This file is used to define entries in the side menu
- interface MenuEntry {
- title: string;
- path: string;
- subMenu?: MenuEntry[];
- }
-
- function M(title: string, path: string, subMenu?: MenuEntry[]): MenuEntry {
- return {
- title,
- path: "/docs/" + (path ? path + "/" : ""),
- subMenu,
- };
- }
-
- const MENU: MenuEntry[] = [
- M("Introduction", ""),
- M("Getting Started", "getting-started", [
- M("Example Projects", "examples"),
- ]),
- M("Workspaces", "workspaces", [
- M("Context URLs", "context-urls"),
- M("Life of a Workspace", "life-of-workspace"),
- M("Collaboration & Sharing", "sharing-and-collaboration"),
- M("Command Line Interface", "command-line-interface"),
- ]),
- M("Configure Your Project", "configuration", [
- M(".gitpod.yml", "config-gitpod-file"),
- M("Docker Configuration", "config-docker"),
- M("Start Tasks", "config-start-tasks"),
- M("VS Code Extensions", "vscode-extensions"),
- M("Exposing Ports", "config-ports"),
- M("Prebuilt Workspaces", "prebuilds"),
- M("Environment Variables", "environment-variables"),
- M("Workspace Location", "checkout-location"),
- M("Editor Configuration", "config-editor"),
- ]),
- M("Integrations", "integrations", [
- M("GitLab Integration", "gitlab-integration"),
- M("GitHub Integration", "github-integration"),
- M("Bitbucket Integration", "bitbucket-integration"),
- M("Browser Extension", "browser-extension"),
- ]),
- M("Languages & Frameworks", "languages-and-frameworks", [
- M("JavaScript", "languages/javascript"),
- M("Python", "languages/python"),
- M("HTML/CSS", "languages/html"),
- M("Java", "languages/java"),
- M("C++", "languages/cpp"),
- M("Go", "languages/go"),
- M("Bash", "languages/bash"),
- M("Ruby", "languages/ruby"),
- M("PHP", "languages/php"),
- M("Vue", "languages/vue"),
- M("Svelte", "languages/svelte"),
- M("Scala", "languages/scala"),
- M("Rust", "languages/rust"),
- M(".NET", "languages/dotnet"),
- M("Dart", "languages/dart"),
- M("Julia", "languages/julia"),
- M("LaTeX", "languages/latex"),
- M("R", "languages/r"),
- M("Kotlin", "languages/kotlin"),
- M("Pandas", "languages/python/#pandas"),
- M("Deno", "languages/deno"),
- ]),
- // M("Feature Preview", "feature-preview"),
- M("Gitpod Self-Hosted", "self-hosted/latest/self-hosted", [
- M(
- "Install on Google Cloud Platform",
- "self-hosted/latest/install/install-on-gcp-script"
- ),
- M(
- "Install on Amazon Web Services",
- "self-hosted/latest/install/install-on-aws-script"
- ),
- M(
- "Install on self-managed Kubernetes",
- "self-hosted/latest/install/install-on-kubernetes"
- ),
- M("Configure Ingress", "self-hosted/latest/install/configure-ingress"),
- M("Configure OAuth", "self-hosted/latest/install/oauth"),
- M("Configure a Database", "self-hosted/latest/install/database"),
- M(
- "Configure a Docker Registry",
- "self-hosted/latest/install/docker-registry"
- ),
- M("Configure Storage", "self-hosted/latest/install/storage"),
- M("Configure Nodes", "self-hosted/latest/install/nodes"),
- M("Configure Workspaces", "self-hosted/latest/install/workspaces"),
- ]),
- M("Subscriptions", "subscriptions", [
- M("Professional Open Source", "professional-open-source"),
- M("Create a Team", "teams"),
- ]),
- M("Changelog", "changelog"),
- ];
+ export let MENU;
</script>
<ul class="space-y-8">

MODIFY
src/components/docs/mobile-menu/index.svelte
src/components/docs/mobile-menu/index.svelte
<script>
+ // Components
import MobileMenuTopics from "./topics.svelte";
import MobileMenuSubMenu from "./sub-menu.svelte";
+ // States
import topicsState from "./topics-state";
+
+ export let MENU;
</script>
<style lang="scss">
<div class="mobile-menu">
{#if $topicsState}
- <MobileMenuTopics />
+ <MobileMenuTopics {MENU} />
{:else}
- <MobileMenuSubMenu />
+ <MobileMenuSubMenu {MENU} />
{/if}
</div>

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";
+
+ export let href: string;
+ export let onClick;
+</script>
+
<style lang="scss">
// override _forms.scss
.menu-item {
</style>
<li class="menu-item">
- <a href="#" class="menu-item__link">
- <div class="menu-item__label">TITLE</div>
+ <a {href} class="menu-item__link" {...$$props} on:click={onClick}>
+ <div class="menu-item__label"><slot /></div>
<div class="menu-item__icon" aria-hidden="true">
<img
class="menu-item__icon-arrow"

MODIFY
src/components/docs/mobile-menu/sub-menu.svelte
src/components/docs/mobile-menu/sub-menu.svelte
// States
import topicsState from "./topics-state";
import subMenuState from "./sub-menu-state";
+
+ export let MENU;
</script>
<style lang="scss">
<button
class="back-button"
type="button"
- on:click={() => ($topicsState = !$topicsState)}
+ on:click={() => {
+ $topicsState = true;
+ $subMenuState = false;
+ }}
>
<div class="back-button__icon">
<img
{#if $subMenuState}
<ul class="sub-menu px-4">
- <MenuItem />
- <MenuItem />
- <MenuItem />
- <MenuItem />
- <MenuItem />
+ <MenuItem onClick={() => ($subMenuState = false)}>TEST</MenuItem>
</ul>
{/if}
</div>

MODIFY
src/components/docs/mobile-menu/topics.svelte
src/components/docs/mobile-menu/topics.svelte
<script lang="ts">
- // This file is used to define entries in the side menu
- interface MenuEntry {
- title: string;
- path: string;
- subMenu?: MenuEntry[];
- }
+ // Components
+ import MenuItem from "./menu-item.svelte";
- function M(title: string, path: string, subMenu?: MenuEntry[]): MenuEntry {
- return {
- title,
- path: "/docs/" + (path ? path + "/" : ""),
- subMenu,
- };
- }
+ // States
+ import topicsState from "./topics-state";
- const MENU: MenuEntry[] = [
- M("Introduction", ""),
- M("Getting Started", "getting-started", [
- M("Example Projects", "examples"),
- ]),
- M("Workspaces", "workspaces", [
- M("Context URLs", "context-urls"),
- M("Life of a Workspace", "life-of-workspace"),
- M("Collaboration & Sharing", "sharing-and-collaboration"),
- M("Command Line Interface", "command-line-interface"),
- ]),
- M("Configure Your Project", "configuration", [
- M(".gitpod.yml", "config-gitpod-file"),
- M("Docker Configuration", "config-docker"),
- M("Start Tasks", "config-start-tasks"),
- M("VS Code Extensions", "vscode-extensions"),
- M("Exposing Ports", "config-ports"),
- M("Prebuilt Workspaces", "prebuilds"),
- M("Environment Variables", "environment-variables"),
- M("Workspace Location", "checkout-location"),
- M("Editor Configuration", "config-editor"),
- ]),
- M("Integrations", "integrations", [
- M("GitLab Integration", "gitlab-integration"),
- M("GitHub Integration", "github-integration"),
- M("Bitbucket Integration", "bitbucket-integration"),
- M("Browser Extension", "browser-extension"),
- ]),
- M("Languages & Frameworks", "languages-and-frameworks", [
- M("JavaScript", "languages/javascript"),
- M("Python", "languages/python"),
- M("HTML/CSS", "languages/html"),
- M("Java", "languages/java"),
- M("C++", "languages/cpp"),
- M("Go", "languages/go"),
- M("Bash", "languages/bash"),
- M("Ruby", "languages/ruby"),
- M("PHP", "languages/php"),
- M("Vue", "languages/vue"),
- M("Svelte", "languages/svelte"),
- M("Scala", "languages/scala"),
- M("Rust", "languages/rust"),
- M(".NET", "languages/dotnet"),
- M("Dart", "languages/dart"),
- M("Julia", "languages/julia"),
- M("LaTeX", "languages/latex"),
- M("R", "languages/r"),
- M("Kotlin", "languages/kotlin"),
- M("Pandas", "languages/python/#pandas"),
- M("Deno", "languages/deno"),
- ]),
- // M("Feature Preview", "feature-preview"),
- M("Gitpod Self-Hosted", "self-hosted/latest/self-hosted", [
- M(
- "Install on Google Cloud Platform",
- "self-hosted/latest/install/install-on-gcp-script"
- ),
- M(
- "Install on Amazon Web Services",
- "self-hosted/latest/install/install-on-aws-script"
- ),
- M(
- "Install on self-managed Kubernetes",
- "self-hosted/latest/install/install-on-kubernetes"
- ),
- M("Configure Ingress", "self-hosted/latest/install/configure-ingress"),
- M("Configure OAuth", "self-hosted/latest/install/oauth"),
- M("Configure a Database", "self-hosted/latest/install/database"),
- M(
- "Configure a Docker Registry",
- "self-hosted/latest/install/docker-registry"
- ),
- M("Configure Storage", "self-hosted/latest/install/storage"),
- M("Configure Nodes", "self-hosted/latest/install/nodes"),
- M("Configure Workspaces", "self-hosted/latest/install/workspaces"),
- ]),
- M("Subscriptions", "subscriptions", [
- M("Professional Open Source", "professional-open-source"),
- M("Create a Team", "teams"),
- ]),
- M("Changelog", "changelog"),
- ];
+ export let MENU;
</script>
-<style lang="scss">
- // override _forms.scss
- .menu-item {
- margin-bottom: 0;
- border-bottom: var(--border-light);
- }
-
- .menu-item__link {
- display: flex;
- align-items: center;
- min-height: 3.375rem;
- }
-
- .menu-item__link-text {
- flex: 1 1 auto;
- }
-
- .menu-item__link-arrow {
- @apply ml-4;
- flex: 0 0 auto;
- }
-
- .menu-item__arrow {
- transform: rotate(-90deg);
- }
-</style>
-
<ul>
{#each MENU as menuItem}
- <li class="menu-item">
- <a href={menuItem.path} class="menu-item__link">
- <div class="menu-item__link-text">{menuItem.title}</div>
- <div class="menu-item__link-arrow" aria-hidden="true">
- <img
- class="menu-item__arrow"
- src="/arrow.svg"
- alt={menuItem.title}
- width="12"
- height="7"
- />
- </div>
- </a>
- </li>
+ <MenuItem href={menuItem.path} onClick={() => ($topicsState = false)}>
+ {menuItem.title}
+ </MenuItem>
{/each}
</ul>

MODIFY
src/routes/docs/$layout.svelte
src/routes/docs/$layout.svelte
-<script>
+<script lang="ts">
import Menu from "../../components/docs/menu.svelte";
import MobileMenu from "../../components/docs/mobile-menu/index.svelte";
import Search from "../../components/docs/search.svelte";
import "../../assets/docs.scss";
+
+ // This file is used to define entries in the side menu
+ interface MenuEntry {
+ title: string;
+ path: string;
+ subMenu?: MenuEntry[];
+ }
+
+ function M(title: string, path: string, subMenu?: MenuEntry[]): MenuEntry {
+ return {
+ title,
+ path: "/docs/" + (path ? path + "/" : ""),
+ subMenu,
+ };
+ }
+
+ const MENU: MenuEntry[] = [
+ M("Introduction", ""),
+ M("Getting Started", "getting-started", [
+ M("Example Projects", "examples"),
+ ]),
+ M("Workspaces", "workspaces", [
+ M("Context URLs", "context-urls"),
+ M("Life of a Workspace", "life-of-workspace"),
+ M("Collaboration & Sharing", "sharing-and-collaboration"),
+ M("Command Line Interface", "command-line-interface"),
+ ]),
+ M("Configure Your Project", "configuration", [
+ M(".gitpod.yml", "config-gitpod-file"),
+ M("Docker Configuration", "config-docker"),
+ M("Start Tasks", "config-start-tasks"),
+ M("VS Code Extensions", "vscode-extensions"),
+ M("Exposing Ports", "config-ports"),
+ M("Prebuilt Workspaces", "prebuilds"),
+ M("Environment Variables", "environment-variables"),
+ M("Workspace Location", "checkout-location"),
+ M("Editor Configuration", "config-editor"),
+ ]),
+ M("Integrations", "integrations", [
+ M("GitLab Integration", "gitlab-integration"),
+ M("GitHub Integration", "github-integration"),
+ M("Bitbucket Integration", "bitbucket-integration"),
+ M("Browser Extension", "browser-extension"),
+ ]),
+ M("Languages & Frameworks", "languages-and-frameworks", [
+ M("JavaScript", "languages/javascript"),
+ M("Python", "languages/python"),
+ M("HTML/CSS", "languages/html"),
+ M("Java", "languages/java"),
+ M("C++", "languages/cpp"),
+ M("Go", "languages/go"),
+ M("Bash", "languages/bash"),
+ M("Ruby", "languages/ruby"),
+ M("PHP", "languages/php"),
+ M("Vue", "languages/vue"),
+ M("Svelte", "languages/svelte"),
+ M("Scala", "languages/scala"),
+ M("Rust", "languages/rust"),
+ M(".NET", "languages/dotnet"),
+ M("Dart", "languages/dart"),
+ M("Julia", "languages/julia"),
+ M("LaTeX", "languages/latex"),
+ M("R", "languages/r"),
+ M("Kotlin", "languages/kotlin"),
+ M("Pandas", "languages/python/#pandas"),
+ M("Deno", "languages/deno"),
+ ]),
+ // M("Feature Preview", "feature-preview"),
+ M("Gitpod Self-Hosted", "self-hosted/latest/self-hosted", [
+ M(
+ "Install on Google Cloud Platform",
+ "self-hosted/latest/install/install-on-gcp-script"
+ ),
+ M(
+ "Install on Amazon Web Services",
+ "self-hosted/latest/install/install-on-aws-script"
+ ),
+ M(
+ "Install on self-managed Kubernetes",
+ "self-hosted/latest/install/install-on-kubernetes"
+ ),
+ M("Configure Ingress", "self-hosted/latest/install/configure-ingress"),
+ M("Configure OAuth", "self-hosted/latest/install/oauth"),
+ M("Configure a Database", "self-hosted/latest/install/database"),
+ M(
+ "Configure a Docker Registry",
+ "self-hosted/latest/install/docker-registry"
+ ),
+ M("Configure Storage", "self-hosted/latest/install/storage"),
+ M("Configure Nodes", "self-hosted/latest/install/nodes"),
+ M("Configure Workspaces", "self-hosted/latest/install/workspaces"),
+ ]),
+ M("Subscriptions", "subscriptions", [
+ M("Professional Open Source", "professional-open-source"),
+ M("Create a Team", "teams"),
+ ]),
+ M("Changelog", "changelog"),
+ ];
</script>
<style>
<div class="docs-layout row">
<div class="menu">
- <Menu />
+ <Menu {MENU} />
</div>
<div class="doc-contents">
<Search />
- <MobileMenu />
+ <MobileMenu {MENU} />
<slot />
</div>
</div>

more menu show hide updates