refactor: layout component

src/client/app/router.ts

@@ -170,7 +170,7 @@ export function useRoute(): Route {
 }
 
 function scrollTo(el: HTMLElement, hash: string, smooth = false) {
-  const pageOffset = (document.querySelector('.navbar') as HTMLElement)
+  const pageOffset = (document.querySelector('.nav-bar') as HTMLElement)
     .offsetHeight
   const target = el.classList.contains('.header-anchor')
     ? el

src/client/theme-default/Layout.vue

@@ -1,15 +1,13 @@
 <template>
   <div class="theme" :class="pageClasses">
-    <header class="navbar" v-if="showNavbar">
-      <NavBar>
-        <template #search>
-          <slot name="navbar-search">
-            <AlgoliaSearchBox v-if="theme.algolia" :options="theme.algolia" />
-          </slot>
-        </template>
-      </NavBar>
-      <ToggleSideBarButton @toggle="toggleSidebar" />
-    </header>
+    <NavBar v-if="showNavbar" @toggle="toggleSidebar">
+      <template #search>
+        <slot name="navbar-search">
+          <AlgoliaSearchBox v-if="theme.algolia" :options="theme.algolia" />
+        </slot>
+      </template>
+    </NavBar>
+
     <SideBar :open="openSideBar">
       <template #sidebar-top>
         <slot name="sidebar-top" />
@@ -20,46 +18,45 @@
     </SideBar>
     <!-- TODO: make this button accessible -->
     <div class="sidebar-mask" @click="toggleSidebar(false)" />
-    <main class="main-home" aria-labelledby="main-title" v-if="enableHome">
-      <Home>
-        <template #hero>
-          <slot name="home-hero" />
-        </template>
-        <template #features>
-          <slot name="home-features" />
-        </template>
-        <template #footer>
-          <slot name="home-footer" />
-        </template>
-      </Home>
-    </main>
-    <main v-else>
-      <Page>
-        <template #top>
-          <slot name="page-top-ads">
-            <CarbonAds
-              v-if="theme.carbonAds"
-              :key="'carbon' + page.relativePath"
-              :code="theme.carbonAds.carbon"
-              :placement="theme.carbonAds.placement"
-            />
-          </slot>
-          <slot name="page-top" />
-        </template>
-        <template #bottom>
-          <slot name="page-bottom" />
-          <slot name="page-bottom-ads">
-            <BuySellAds
-              v-if="theme.carbonAds && theme.carbonAds.custom"
-              :key="'custom' + page.relativePath"
-              :code="theme.carbonAds.custom"
-              :placement="theme.carbonAds.placement"
-            />
-          </slot>
-        </template>
-      </Page>
-    </main>
+
+    <Home v-if="enableHome">
+      <template #hero>
+        <slot name="home-hero" />
+      </template>
+      <template #features>
+        <slot name="home-features" />
+      </template>
+      <template #footer>
+        <slot name="home-footer" />
+      </template>
+    </Home>
+
+    <Page v-else>
+      <template #top>
+        <slot name="page-top-ads">
+          <CarbonAds
+            v-if="theme.carbonAds"
+            :key="'carbon' + page.relativePath"
+            :code="theme.carbonAds.carbon"
+            :placement="theme.carbonAds.placement"
+          />
+        </slot>
+        <slot name="page-top" />
+      </template>
+      <template #bottom>
+        <slot name="page-bottom" />
+        <slot name="page-bottom-ads">
+          <BuySellAds
+            v-if="theme.carbonAds && theme.carbonAds.custom"
+            :key="'custom' + page.relativePath"
+            :code="theme.carbonAds.custom"
+            :placement="theme.carbonAds.placement"
+          />
+        </slot>
+      </template>
+    </Page>
   </div>
+
   <Debug />
 </template>
 
@@ -76,7 +73,6 @@ import type { DefaultTheme } from './config'
 // components
 import NavBar from './components/NavBar.vue'
 import Home from './components/Home.vue'
-import ToggleSideBarButton from './components/ToggleSideBarButton.vue'
 import SideBar from './components/SideBar.vue'
 import Page from './components/Page.vue'
 const CarbonAds = defineAsyncComponent(

src/client/theme-default/components/Home.vue

@@ -1,10 +1,12 @@
 <template>
-  <HomeHero />
-  <slot name="hero" />
-  <HomeFeatures />
-  <slot name="features" />
-  <HomeFooter />
-  <slot name="footer" />
+  <main class="home" aria-labelledby="main-title">
+    <HomeHero />
+    <slot name="hero" />
+    <HomeFeatures />
+    <slot name="features" />
+    <HomeFooter />
+    <slot name="footer" />
+  </main>
 </template>
 
 <script setup lang="ts">
@@ -12,3 +14,9 @@ import HomeHero from './HomeHero.vue'
 import HomeFeatures from './HomeFeatures.vue'
 import HomeFooter from './HomeFooter.vue'
 </script>
+
+<style scoped>
+.home {
+  padding-top: var(--header-height);
+}
+</style>

src/client/theme-default/components/NavBar.vue

@@ -1,21 +1,50 @@
 <template>
-  <NavBarTitle />
+  <header class="nav-bar">
+    <ToggleSideBarButton @toggle="$emit('toggle')" />
 
-  <div class="flex-grow" />
+    <NavBarTitle />
 
-  <div class="nav">
-    <NavLinks />
-  </div>
+    <div class="flex-grow" />
 
-  <slot name="search" />
+    <div class="nav">
+      <NavLinks />
+    </div>
+
+    <slot name="search" />
+  </header>
 </template>
 
 <script setup lang="ts">
+import { defineEmit } from 'vue'
 import NavBarTitle from './NavBarTitle.vue'
 import NavLinks from './NavLinks.vue'
+import ToggleSideBarButton from './ToggleSideBarButton.vue'
+
+defineEmit(['toggle'])
 </script>
 
 <style scoped>
+.nav-bar {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: var(--z-index-navbar);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid var(--c-divider);
+  padding: .7rem 1.5rem .7rem 4rem;
+  height: var(--header-height);
+  background-color: #ffffff;
+}
+
+@media (min-width: 720px) {
+  .nav-bar {
+    padding: .7rem 1.5rem;
+  }
+}
+
 .flex-grow {
   flex-grow: 1;
 }

src/client/theme-default/components/Page.vue

@@ -1,17 +1,19 @@
 <template>
-  <div class="page">
-    <slot name="top" />
+  <main class="page">
+    <div class="container">
+      <slot name="top" />
 
-    <div class="content">
-      <Content />
-    </div>
+      <div class="content">
+        <Content />
+      </div>
 
-    <PageFooter />
+      <PageFooter />
 
-    <NextAndPrevLinks />
+      <NextAndPrevLinks />
 
-    <slot name="bottom" />
-  </div>
+      <slot name="bottom" />
+    </div>
+  </main>
 </template>
 
 <script setup lang="ts">
@@ -21,6 +23,22 @@ import NextAndPrevLinks from './NextAndPrevLinks.vue'
 
 <style scoped>
 .page {
+  padding-top: var(--header-height);
+}
+
+@media (min-width: 720px) {
+  .page {
+    margin-left: 16.4rem;
+  }
+}
+
+@media (min-width: 960px) {
+  .page {
+    margin-left: 20rem;
+  }
+}
+
+.container {
   margin: 0 auto;
   padding: 0 1.5rem 4rem;
   max-width: 48rem;

src/client/theme-default/composables/activeSidebarLink.ts

@@ -81,7 +81,7 @@ function getAnchors(sidebarLinks: HTMLAnchorElement[]): HTMLAnchorElement[] {
 }
 
 function getPageOffset(): number {
-  return (document.querySelector('.navbar') as HTMLElement).offsetHeight
+  return (document.querySelector('.nav-bar') as HTMLElement).offsetHeight
 }
 
 function getAnchorTop(anchor: HTMLAnchorElement): number {

src/client/theme-default/styles/layout.css

@@ -199,32 +199,6 @@ form {
   margin: 0;
 }
 
-.theme {
-  font-size: 16px;
-  color: var(--c-text);
-}
-
-.theme .navbar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: var(--header-height);
-  background-color: #fff;
-  border-bottom: 1px solid var(--c-divider);
-  z-index: var(--z-index-navbar);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.7rem 1.5rem;
-}
-
-@media screen and (max-width: 719px) {
-  .theme .navbar {
-    padding-left: 4rem;
-  }
-}
-
 .theme.sidebar-open .sidebar-mask {
   display: block;
 }
@@ -243,51 +217,20 @@ form {
   top: 0;
 }
 
-@media screen and (max-width: 959px) {
-  .theme aside {
-    width: var(--sidebar-width);
-  }
-}
-
-.sidebar-mask {
-  z-index: 2;
-  position: fixed;
-  width: 100vw;
-  height: 100vh;
-  display: none;
-}
-
-.theme main {
-  padding-top: var(--header-height);
-}
-
-@media screen and (min-width: 960px) {
-  .theme main {
-    padding-left: 20rem;
-  }
-
-  .theme main.main-home {
-    padding-left: 0;
-  }
-}
-
 @media screen and (min-width: 720px) {
   .theme.no-sidebar aside {
     display: none;
   }
+
   .theme.no-sidebar main {
     margin-left: 0;
   }
 }
 
-@media screen and (max-width: 959px) {
-  .theme main {
-    margin-left: 16.4rem;
-  }
-}
-
-@media screen and (max-width: 719px) {
-  .theme main {
-    margin-left: 0;
-  }
+.sidebar-mask {
+  position: fixed;
+  z-index: 2;
+  display: none;
+  width: 100vw;
+  height: 100vh;
 }