Commit 1f2d959a authored by Yashu Mittal's avatar Yashu Mittal 👍🏻

Add Navbar

Navbar includes navgiation on the left and social icons on the right side
parent 1ee0017c
......@@ -2,4 +2,21 @@ site:
title: Gridsome Casper
cover_image: '/images/blog-cover.jpg'
logo: '/images/gridsome-logo.png'
description: 'The professional publishing platform'
\ No newline at end of file
url: '/'
description: 'The professional publishing platform'
subscribers: true
navigation: true
social_media:
facebook: 'gridsome'
twitter: 'gridsome'
nav_home:
- title: Home
link: /
- title: About
link: /About
- title: Getting Started
link: /tag/getting-started/
- title: Try Gridsome
link: https://www.gridsome.org/
\ No newline at end of file
<template>
<nav class="site-nav">
<div class="site-nav-left">
<div v-if="logo !== true">
<a v-if="Admin.site.logo !== ''" class="site-nav-logo" :href="Admin.site.url">
<img :src="Admin.site.logo" :alt="Admin.site.title" />
</a>
<a v-else class="site-nav-logo" :href="Admin.site.url">{{ Admin.site.title }}</a>
</div>
<Navigation v-if="Admin.site.navigation"/>
</div>
<div class="site-nav-right">
<div class="social-links">
<a v-if="Facebook" class="social-link social-link-fb" :href="'https://facebook.com/' + Admin.social_media.facebook" title="Facebook" target="_blank" rel="noopener">
<Facebook/>
</a>
<a v-if="Twitter" class="social-link social-link-tw" :href="'https://twitter.com/' + Admin.social_media.twitter" title="Twitter" target="_blank" rel="noopener">
<Twitter/>
</a>
</div>
<a v-if="Admin.site.subscribers" class="subscribe-button" href="#subscribe">Subscribe</a>
<a v-else class="rss-button" href="/feed.xml" title="RSS" target="_blank" rel="noopener">
<RSS/>
</a>
</div>
</nav>
</template>
<script>
import Admin from '../../data/admin.yml';
import Navigation from './Navigation'
// Icons
import Facebook from './icons/Facebook'
import Twitter from './icons/Twitter'
import RSS from './icons/RSS'
export default {
props: {
logo: {
type: Boolean,
default: true
}
},
components: {
Navigation, Facebook, Twitter, RSS
},
computed: {
Admin() {
return Admin
},
Facebook() {
if (Admin.social_media.facebook !== '') {
return true
}
},
Twitter() {
if (Admin.social_media.twitter !== '') {
return true
}
}
}
}
</script>
<template>
<ul class="nav" role="menu">
<li v-for="item in Admin.nav_home" :key="item.title" role="menuitem">
<a :href="item.link">{{ item.title }}</a>
</li>
</ul>
</template>
<script>
import Admin from '../../data/admin.yml'
export default {
computed: {
Admin() {
return Admin
}
}
}
</script>
<template>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M19 6h5V0h-5c-3.86 0-7 3.14-7 7v3H8v6h4v16h6V16h5l1-6h-6V7c0-.542.458-1 1-1z"/></svg>
</template>
<template>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="6.18" cy="17.82" r="2.18"/><path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z"/></svg>
</template>
<template>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M30.063 7.313c-.813 1.125-1.75 2.125-2.875 2.938v.75c0 1.563-.188 3.125-.688 4.625a15.088 15.088 0 0 1-2.063 4.438c-.875 1.438-2 2.688-3.25 3.813a15.015 15.015 0 0 1-4.625 2.563c-1.813.688-3.75 1-5.75 1-3.25 0-6.188-.875-8.875-2.625.438.063.875.125 1.375.125 2.688 0 5.063-.875 7.188-2.5-1.25 0-2.375-.375-3.375-1.125s-1.688-1.688-2.063-2.875c.438.063.813.125 1.125.125.5 0 1-.063 1.5-.25-1.313-.25-2.438-.938-3.313-1.938a5.673 5.673 0 0 1-1.313-3.688v-.063c.813.438 1.688.688 2.625.688a5.228 5.228 0 0 1-1.875-2c-.5-.875-.688-1.813-.688-2.75 0-1.063.25-2.063.75-2.938 1.438 1.75 3.188 3.188 5.25 4.25s4.313 1.688 6.688 1.813a5.579 5.579 0 0 1 1.5-5.438c1.125-1.125 2.5-1.688 4.125-1.688s3.063.625 4.188 1.813a11.48 11.48 0 0 0 3.688-1.375c-.438 1.375-1.313 2.438-2.563 3.188 1.125-.125 2.188-.438 3.313-.875z"/></svg>
</template>
......@@ -11,7 +11,7 @@
</h1>
<h2 class="site-description">{{ Admin.site.description}}</h2>
</div>
<Navbar/>
<Navbar />
</div>
</header>
</Layout>
......@@ -19,9 +19,16 @@
<script>
import Admin from '../../data/admin.yml';
import Navbar from '../components/Navbar'
export default {
components: {
Navbar
},
computed: {
HomePage() {
return true
},
Admin() {
return Admin
},
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment