add basic new page layout

docs/src/layouts/App/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="app">
+  <!-- <div class="app">
     <header class="app__header">
       <div class="app__header-inner">
         <g-link class="app__logo" to="/">
@@ -71,6 +71,56 @@
         <page-navigation />
       </main>
     </div>
+  </div> -->
+
+  <div class="app">
+    <div class="app__sidebar">
+      <nav class="app__navigation">
+        <div class="app__link-group" v-for="(linkGroup, i) in linkGroups" :key="i">
+          <div class="app__link-group-title">
+            {{ linkGroup.title }}
+          </div>
+          <ul class="app__link-list">
+            <li v-for="(item, j) in linkGroup.items" :key="j">
+              <g-link :class="{ 'app__link': true, 'app__link--draft': item.draft === true, 'app__link--with-children': item.items }" :to="item.link" :exact="item.link === '/'">
+                {{ item.title }}
+              </g-link>
+
+              <ul v-if="item.items" class="app__link-list">
+                <li v-for="(item, k) in item.items" :key="k">
+                  <g-link :class="{ 'app__link': true, 'app__link--draft': item.draft === true }" :to="item.link" exact>
+                    {{ item.title }}
+                  </g-link>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </div>
+      </nav>
+    </div>
+
+    <div class="app__content">
+      <div class="app__top-bar">
+        <div class="app__inner">
+          <input class="app__search" type="search" placeholder="Search">
+        </div>
+      </div>
+      <div class="app__inner">
+        <main class="app__main">
+          <slot />
+          <p>
+            <br>
+            <a :href="editLink" target="_blank">
+              <span>Edit this page on GitHub</span>
+            </a>
+          </p>
+          <p>
+            Made with 🖤 by <a href="https://twitter.com/_ueberdosis">überdosis</a>
+          </p>
+          <page-navigation />
+        </main>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -120,7 +170,7 @@ export default {
       docsearch({
         apiKey: '1abe7fb0f0dac150d0e963d2eda930fe',
         indexName: 'ueberdosis_tiptap',
-        inputSelector: '.search',
+        inputSelector: '.app__search',
         debug: false,
       })
     },

docs/src/layouts/App/style.scss

@@ -1,14 +1,225 @@
 $navHeight: 4.5rem;
 $menuBreakPoint: 750px;
 
+// .app {
+//   display: flex;
+//   flex-direction: column;
+//   min-height: 100%;
+
+//   &__logo {
+//     font-weight: 700;
+//     font-size: 1.4rem;
+//   }
+
+//   &__link-group {
+//     margin-bottom: 2rem;
+//   }
+
+//   &__link-group-title {
+//     font-weight: 700;
+//     letter-spacing: 0.025rem;
+//     font-size: 0.75rem;
+//     text-transform: uppercase;
+//     color: rgba($colorWhite, 0.3);
+//     margin-bottom: 0.5rem;
+//   }
+
+//   &__link-list &__link-list {
+//     display: none;
+//     padding-left: 1rem;
+//     margin-top: 0.5rem;
+//     margin-bottom: 1.5rem;
+//     border-left: 2px solid rgba($colorWhite, 0.1);
+//   }
+
+//   .active + &__link-list {
+//     display: block;
+//   }
+
+//   &__link {
+//     display: block;
+//     padding: 0.1rem 0.5rem;
+//     border-radius: 5px;
+//     font-weight: 500;
+//     color: rgba($colorWhite, 0.6);
+//     margin-bottom: 0.2rem;
+//     margin-left: -0.5rem;
+
+//     &:hover {
+//       color: $colorWhite;
+//     }
+
+//     &.active {
+//       color: $colorWhite;
+//       background-color: rgba($colorWhite, 0.05);
+//     }
+
+//     &--draft {
+//       color: rgba($colorWhite, 0.2);
+//     }
+
+//     &--with-children::after {
+//       content: '→';
+//       color: rgba($colorWhite, 0.2);
+//     }
+//   }
+
+//   &__header {
+//     align-self: center;
+//     position: fixed;
+//     top: 0;
+//     z-index: 2;
+//     display: flex;
+//     align-items: center;
+//     justify-content: center;
+//     width: 100%;
+//     height: $navHeight;
+//     flex: 0 0 auto;
+//     background-color: rgba($colorBlack, 0.7);
+//     border-bottom: 1px solid rgba($colorWhite, 0.05);
+//     backdrop-filter: blur(10px);
+//   }
+
+//   &__header-inner {
+//     width: 100%;
+//     display: flex;
+//     align-items: center;
+//     justify-content: space-between;
+//     max-width: 62rem;
+//     margin: 0 auto;
+//     padding: 0 1rem;
+
+//     @media (min-width: $menuBreakPoint) {
+//       padding: 0 2rem;
+//     }
+//   }
+
+//   &__content {
+//     position: relative;
+//     z-index: 1;
+//     flex: 1 1 auto;
+//     display: flex;
+//     width: 100%;
+//     max-width: 62rem;
+//     margin: 0 auto;
+//     padding-left: 1rem;
+//     padding-right: 1rem;
+
+//     @media (min-width: $menuBreakPoint) {
+//       padding-left: 2rem;
+//       padding-right: 2rem;
+//     }
+//   }
+
+//   &__menu-icon,
+//   &__close-icon {
+//     border: none;
+//     padding: 0;
+//     background-color: transparent;
+//     margin-left: 1rem;
+
+//     @media (min-width: $menuBreakPoint) {
+//       display: none;
+//     }
+//   }
+
+//   &__sidebar-wrapper {
+//     position: fixed;
+//     z-index: 2;
+//     top: $navHeight;
+//     bottom: 0;
+//     left: 0;
+//     right: 0;
+//     // background-color: $colorBackground;
+//     padding-left: 1rem;
+//     padding-right: 1rem;
+//     visibility: hidden;
+//     opacity: 0;
+
+//     &.is-mobile-visible {
+//       visibility: visible;
+//       opacity: 1;
+//     }
+
+//     @media (min-width: $menuBreakPoint) {
+//       visibility: visible;
+//       opacity: 1;
+//       position: sticky;
+//       flex: 0 0 auto;
+//       align-self: flex-start;
+//       top: 0;
+//       width: 18rem;
+//       height: 100vh;
+//       padding-left: 0;
+//       padding-right: 0;
+//       padding-right: 3rem;
+//       padding-top: $navHeight;
+//     }
+//   }
+
+//   &__sidebar {
+//     overflow: auto;
+//     height: 100%;
+//     padding-top: 2rem;
+//     padding-left: 0.5rem;
+//     margin-left: -0.5rem;
+//   }
+
+//   &__main {
+//     flex: 1 1 auto;
+//     min-width: 0;
+//     padding-top: $navHeight + 2rem;
+//   }
+// }
+
 .app {
   display: flex;
-  flex-direction: column;
-  min-height: 100%;
 
-  &__logo {
+  ::v-deep .algolia-autocomplete {
-    font-weight: 700;
+    display: block;
-    font-size: 1.4rem;
+    width: 100%;
+  }
+
+  &__search {
+    display: block;
+    width: 100%;
+    background-color: rgba($colorWhite, 0.08);
+    border: 1px solid rgba($colorWhite, 0.08);
+    border-radius: 0.5rem;
+    font: inherit;
+    color: $colorWhite;
+    padding: 0.5rem 0.75rem;
+  }
+
+  &__sidebar {
+    width: 20rem;
+    flex: 0 0 auto;
+    position: sticky;
+    top: 0;
+    align-self: flex-start;
+    padding: 2rem;
+    height: 100vh;
+    overflow: auto;
+    overscroll-behavior: contain;
+  }
+
+  &__content {
+    flex: 1 1 auto;
+    padding: 0 2rem 2rem 2rem;
+  }
+
+  &__top-bar {
+    padding: 2rem;
+    position: sticky;
+    z-index: 2;
+    top: 0;
+    background-color: rgba($colorBlack, 0.7);
+    backdrop-filter: blur(10px);
+  }
+
+  &__inner {
+    margin: 0 auto;
+    max-width: 45rem;
   }
 
   &__link-group {
@@ -63,111 +274,4 @@ $menuBreakPoint: 750px;
       color: rgba($colorWhite, 0.2);
     }
   }
-
-  &__header {
-    align-self: center;
-    position: fixed;
-    top: 0;
-    z-index: 2;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: $navHeight;
-    flex: 0 0 auto;
-    background-color: rgba($colorBlack, 0.7);
-    border-bottom: 1px solid rgba($colorWhite, 0.05);
-    backdrop-filter: blur(10px);
-  }
-
-  &__header-inner {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    max-width: 62rem;
-    margin: 0 auto;
-    padding: 0 1rem;
-
-    @media (min-width: $menuBreakPoint) {
-      padding: 0 2rem;
-    }
-  }
-
-  &__content {
-    position: relative;
-    z-index: 1;
-    flex: 1 1 auto;
-    display: flex;
-    width: 100%;
-    max-width: 62rem;
-    margin: 0 auto;
-    padding-left: 1rem;
-    padding-right: 1rem;
-
-    @media (min-width: $menuBreakPoint) {
-      padding-left: 2rem;
-      padding-right: 2rem;
-    }
-  }
-
-  &__menu-icon,
-  &__close-icon {
-    border: none;
-    padding: 0;
-    background-color: transparent;
-    margin-left: 1rem;
-
-    @media (min-width: $menuBreakPoint) {
-      display: none;
-    }
-  }
-
-  &__sidebar-wrapper {
-    position: fixed;
-    z-index: 2;
-    top: $navHeight;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    // background-color: $colorBackground;
-    padding-left: 1rem;
-    padding-right: 1rem;
-    visibility: hidden;
-    opacity: 0;
-
-    &.is-mobile-visible {
-      visibility: visible;
-      opacity: 1;
-    }
-
-    @media (min-width: $menuBreakPoint) {
-      visibility: visible;
-      opacity: 1;
-      position: sticky;
-      flex: 0 0 auto;
-      align-self: flex-start;
-      top: 0;
-      width: 18rem;
-      height: 100vh;
-      padding-left: 0;
-      padding-right: 0;
-      padding-right: 3rem;
-      padding-top: $navHeight;
-    }
-  }
-
-  &__sidebar {
-    overflow: auto;
-    height: 100%;
-    padding-top: 2rem;
-    padding-left: 0.5rem;
-    margin-left: -0.5rem;
-  }
-
-  &__main {
-    flex: 1 1 auto;
-    min-width: 0;
-    padding-top: $navHeight + 2rem;
-  }
 }