fix active menu styling for index page and initial mobile layout wip
MODIFY
src/components/docs/menu-section.svelte
src/components/docs/menu-section.svelte
export let menuItem;
- $: isActiveSection = $docsCurrentSectionStore
- ? menuItem.path.endsWith(`${$docsCurrentSectionStore}/`)
- : false;
+ $: sectionPath = $docsCurrentSectionStore
+ ? `${$docsCurrentSectionStore}\/`
+ : "";
+ $: regex = new RegExp(`\/docs\/${sectionPath}$`);
+ $: isActiveSection = regex.test(menuItem.path);
</script>
<style>

MODIFY
src/components/docs/menu.svelte
src/components/docs/menu.svelte
];
</script>
-<style>
- .menu {
- @apply p-6;
- }
-</style>
-
-<div class="inline-block">
- <ul class="menu space-y-6">
+<ul class="space-y-6">
{#each MENU as menuItem}
<MenuSection {menuItem} />
{/each}
</ul>
-</div>

MODIFY
src/routes/docs/_layout.svelte
src/routes/docs/_layout.svelte
import Search from "../../components/docs/search.svelte";
</script>
-<div class="row flex mx-auto px-8 py-10 w-screen">
- <div class="w-2/5 pt-20">
+<style>
+ .docs-layout {
+ @apply py-10;
+
+ @media (min-width: 769px) {
+ @apply flex;
+ }
+ }
+
+ .menu {
+ @media (min-width: 769px) {
+ @apply w-2/5 pt-24 pr-8;
+ }
+ }
+
+ .doc-contents {
+ @media (min-width: 769px) {
+ @apply w-3/5;
+ }
+ }
+</style>
+
+<div class="docs-layout row">
+ <div class="menu">
<Menu />
</div>
- <div class="w-3/5">
+ <div class="doc-contents">
<Search />
<slot />
</div>

MODIFY
src/routes/docs/index.md
src/routes/docs/index.md
+---
+section: ""
+---
+
# Introduction to Gitpod
[Gitpod](https://www.gitpod.io) is an open source platform for automated and **ready-to-code development environments** that blends into your existing workflow. It enables developers to describe their dev environment as code and **start instant and fresh development environments for each new task** directly from your browser.

fix active menu styling for index page and initial mobile layout wip