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 v-if="showNavbar" @toggle="toggleSidebar">
-      <NavBar>
       <template #search>
         <slot name="navbar-search">
           <AlgoliaSearchBox v-if="theme.algolia" :options="theme.algolia" />
         </slot>
       </template>
     </NavBar>
-      <ToggleSideBarButton @toggle="toggleSidebar" />
+
-    </header>
     <SideBar :open="openSideBar">
       <template #sidebar-top>
         <slot name="sidebar-top" />
@@ -20,8 +18,8 @@
     </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>
+    <Home v-if="enableHome">
       <template #hero>
         <slot name="home-hero" />
       </template>
@@ -32,9 +30,8 @@
         <slot name="home-footer" />
       </template>
     </Home>
-    </main>
+
-    <main v-else>
+    <Page v-else>
-      <Page>
       <template #top>
         <slot name="page-top-ads">
           <CarbonAds
@@ -58,8 +55,8 @@
         </slot>
       </template>
     </Page>
-    </main>
   </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>
+  <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,4 +1,7 @@
 <template>
+  <header class="nav-bar">
+    <ToggleSideBarButton @toggle="$emit('toggle')" />
+
     <NavBarTitle />
 
     <div class="flex-grow" />
@@ -8,14 +11,40 @@
     </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,5 +1,6 @@
 <template>
-  <div class="page">
+  <main class="page">
+    <div class="container">
       <slot name="top" />
 
       <div class="content">
@@ -12,6 +13,7 @@
 
       <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) {
+.sidebar-mask {
-  .theme main {
+  position: fixed;
-    margin-left: 16.4rem;
+  z-index: 2;
-  }
+  display: none;
-}
+  width: 100vw;
-
+  height: 100vh;
-@media screen and (max-width: 719px) {
-  .theme main {
-    margin-left: 0;
-  }
 }