Add banner

This commit is contained in:
Dane Everitt 2022-03-06 10:27:50 -05:00
parent eeb8544b14
commit 2f1669a7a8
2 changed files with 58 additions and 47 deletions

View File

@ -1,35 +1,46 @@
<template> <template>
<div>
<div class="fixed h-12 w-full z-50 top-0">
<div class="h-12 w-full bg-black flex items-center justify-center px-4">
<p class="text-grey-lightest font-semibold">
Stand with Ukraine 🇺🇦&nbsp;
<a class="text-blue-lighter" href="https://www.savethechildren.org/us/where-we-work/ukraine" target="_blank" rel="noindex nofollow noopener">Donate</a>
<a class="text-blue-lighter" href="https://razomforukraine.org/" target="_blank" rel="noindex nofollow noopener">Today.</a>
</p>
</div>
</div>
<div <div
class="theme-container" class="theme-container mt-12"
:class="pageClasses" :class="pageClasses"
@touchstart="onTouchStart" @touchstart="onTouchStart"
@touchend="onTouchEnd" @touchend="onTouchEnd"
> >
<Navbar v-if="shouldShowNavbar" @toggle-sidebar="toggleSidebar" /> <Navbar v-if="shouldShowNavbar" @toggle-sidebar="toggleSidebar"/>
<div class="sidebar-mask" @click="toggleSidebar(false)"></div> <div class="sidebar-mask" @click="toggleSidebar(false)"></div>
<Sidebar :items="sidebarItems" @toggle-sidebar="toggleSidebar"> <Sidebar :items="sidebarItems" @toggle-sidebar="toggleSidebar">
<slot name="sidebar-top" slot="top" /> <slot name="sidebar-top" slot="top"/>
<slot name="sidebar-bottom" slot="bottom" /> <slot name="sidebar-bottom" slot="bottom"/>
</Sidebar> </Sidebar>
<div class="custom-layout" v-if="$page.frontmatter.layout"> <div class="custom-layout" v-if="$page.frontmatter.layout">
<component :is="$page.frontmatter.layout" /> <component :is="$page.frontmatter.layout"/>
</div> </div>
<Home v-else-if="$page.frontmatter.home" /> <Home v-else-if="$page.frontmatter.home"/>
<Page v-else :sidebar-items="sidebarItems"> <Page v-else :sidebar-items="sidebarItems">
<slot name="page-top" slot="top" /> <slot name="page-top" slot="top"/>
<slot name="page-bottom" slot="bottom" /> <slot name="page-bottom" slot="bottom"/>
</Page> </Page>
</div> </div>
</div>
</template> </template>
<script> <script>
import Vue from "vue"; import Vue from 'vue';
import nprogress from "nprogress"; import nprogress from 'nprogress';
import Home from "./Home.vue"; import Home from './Home.vue';
import Navbar from "./Navbar.vue"; import Navbar from './Navbar.vue';
import Page from "./Page.vue"; import Page from './Page.vue';
import Sidebar from "./Sidebar.vue"; import Sidebar from './Sidebar.vue';
import { resolveSidebarItems } from "./util"; import { resolveSidebarItems } from './util';
export default { export default {
components: { Home, Page, Sidebar, Navbar }, components: { Home, Page, Sidebar, Navbar },
@ -75,9 +86,9 @@ export default {
const userPageClass = this.$page.frontmatter.pageClass; const userPageClass = this.$page.frontmatter.pageClass;
return [ return [
{ {
"no-navbar": !this.shouldShowNavbar, 'no-navbar': !this.shouldShowNavbar,
"sidebar-open": this.isSidebarOpen, 'sidebar-open': this.isSidebarOpen,
"no-sidebar": !this.shouldShowSidebar 'no-sidebar': !this.shouldShowSidebar
}, },
userPageClass userPageClass
]; ];
@ -85,7 +96,7 @@ export default {
}, },
mounted() { mounted() {
window.addEventListener("scroll", this.onScroll); window.addEventListener('scroll', this.onScroll);
// configure progress bar // configure progress bar
nprogress.configure({ showSpinner: false }); nprogress.configure({ showSpinner: false });
@ -105,7 +116,7 @@ export default {
methods: { methods: {
toggleSidebar(to) { toggleSidebar(to) {
this.isSidebarOpen = typeof to === "boolean" ? to : !this.isSidebarOpen; this.isSidebarOpen = typeof to === 'boolean' ? to : !this.isSidebarOpen;
}, },
// side swipe // side swipe
onTouchStart(e) { onTouchStart(e) {

View File

@ -6,7 +6,7 @@ $arrow-bg: #000;
} }
@apply .fixed .left-0 .bottom-0 .bg-white .overflow-auto .border-r .border-grey-lighter .py-8; @apply .fixed .left-0 .bottom-0 .bg-white .overflow-auto .border-r .border-grey-lighter .py-8;
top: 56px; top: calc(3rem + 56px);
width: 20rem; width: 20rem;
font-size: 15px; font-size: 15px;