#55 menu
This commit is contained in:
Avris
parent
25401213db
commit
4ac4c7cc28
|
|
@ -1,21 +1,81 @@
|
|||
<template>
|
||||
<header class="d-flex justify-content-between mb-3">
|
||||
<h1 class="h4">
|
||||
<header class="mb-4">
|
||||
<h1 class="mb-3">
|
||||
<nuxt-link to="/">
|
||||
<Icon v="tags"/>
|
||||
Zaimki.pl
|
||||
</nuxt-link>
|
||||
</h1>
|
||||
<p class="mb-0'">
|
||||
<nuxt-link to="/" class="btn btn-outline-primary btn-sm">
|
||||
<Icon v="home"/>
|
||||
Strona główna
|
||||
</nuxt-link>
|
||||
</p>
|
||||
<div class="d-block d-md-none">
|
||||
<div class="btn-group-vertical btn-block nav-custom mb-2">
|
||||
<nuxt-link v-for="link in links" :to="link.link" :class="`btn btn-sm ${isActiveRoute(link) ? 'active' : ''}`">
|
||||
<Icon :v="link.icon"/>
|
||||
{{ link.textLong || link.text }}
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-none d-md-block">
|
||||
<div class="btn-group btn-block nav-custom mb-2">
|
||||
<nuxt-link v-for="link in links" :to="link.link" :class="`btn btn-sm ${isActiveRoute(link) ? 'active' : ''}`">
|
||||
<Icon :v="link.icon"/>
|
||||
{{ link.text }}
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
links: [
|
||||
{ link: '/', icon: 'home', text: 'Zaimki', textLong: 'Lista zaimków', extra: ['all'] },
|
||||
{ link: '/literatura', icon: 'books', text: 'Teksty kultury', textLong: 'Przykłady z tekstów kultury' },
|
||||
{ link: '/neutratywy', icon: 'atom-alt', text: 'Neutratywy', textLong: 'Słownik neutratywów' },
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
isActiveRoute(link) {
|
||||
return this.$route.path === link.link || (link.extra || []).includes(this.$route.name);
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "assets/style";
|
||||
|
||||
@include media-breakpoint-down('sm', $grid-breakpoints) {
|
||||
.nav-custom {
|
||||
.btn {
|
||||
border-left: 1px solid $gray-500;
|
||||
border-radius: 0;
|
||||
|
||||
&:hover, &:focus, &.active {
|
||||
border-left: 3px solid $primary;
|
||||
padding-left: calc(#{$btn-padding-x-sm} - 2px);
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up('md', $grid-breakpoints) {
|
||||
.nav-custom {
|
||||
.btn {
|
||||
border-bottom: 1px solid $gray-500;
|
||||
border-radius: 0;
|
||||
|
||||
&:hover, &:focus, &.active {
|
||||
border-bottom: 3px solid $primary;
|
||||
padding-bottom: calc(#{$btn-padding-y-sm} - 2px);
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<div v-if="Object.keys(sources).length">
|
||||
<h2 class="h4">
|
||||
<Icon v="books"/>
|
||||
Przykłady z tekstów kultury:
|
||||
<nuxt-link to="/literatura">
|
||||
<Icon v="books"/>
|
||||
Przykłady z tekstów kultury:
|
||||
</nuxt-link>
|
||||
</h2>
|
||||
|
||||
<LiteratureMenu/>
|
||||
|
||||
<section v-for="(optionSources, option) in sources">
|
||||
<h3 class="h5">
|
||||
<nuxt-link :to="'/' + option">
|
||||
|
|
|
|||
|
|
@ -1,30 +0,0 @@
|
|||
<template>
|
||||
<ul class="list-inline small">
|
||||
<li class="list-inline-item">
|
||||
<a href="https://twitter.com/VaultAusir" target="_blank" rel="noopener">
|
||||
<Icon v="book-reader"/>
|
||||
zebrane przez Pawła Dembowskiego
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a href="mailto:pawel.dembowski@gmail.com" target="_blank" rel="noopener">
|
||||
<Icon v="envelope-open-text"/>
|
||||
dodaj przykłady do listy
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item" v-if="!all">
|
||||
<nuxt-link to="/literatura">
|
||||
<Icon v="books"/>
|
||||
zobacz przykłady dla innych form
|
||||
</nuxt-link>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
all: { type: Boolean },
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<h1>
|
||||
<h2>
|
||||
<Icon v="person-dolly-empty"/>
|
||||
Strony nie znaleziono
|
||||
</h1>
|
||||
</h2>
|
||||
|
||||
<p class="h4 mt-4">
|
||||
<nuxt-link to="/">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<div class="d-flex flex-column vh-100">
|
||||
<div class="flex-grow-1">
|
||||
<Header/>
|
||||
<Nuxt/>
|
||||
</div>
|
||||
<div class="container">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<template>
|
||||
<NotFound v-if="!selectedTemplate"/>
|
||||
<div class="container" v-else>
|
||||
<Header/>
|
||||
<h2>
|
||||
<Icon v="tag"/>
|
||||
Moje zaimki to:
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<Header/>
|
||||
<h2>
|
||||
<Icon v="tag"/>
|
||||
Moje zaimki to:
|
||||
|
|
|
|||
|
|
@ -1,10 +1,5 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<h1>
|
||||
<Icon v="tags"/>
|
||||
Zaimki.pl
|
||||
</h1>
|
||||
|
||||
<section>
|
||||
<About/>
|
||||
<p>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,10 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<Header/>
|
||||
<h2>
|
||||
<Icon v="books"/>
|
||||
Niebinarna polszczyzna w tekstach kultury
|
||||
</h2>
|
||||
|
||||
<LiteratureMenu all/>
|
||||
|
||||
<section>
|
||||
<Share title="Niebinarna polszczyzna w tekstach kultury"/>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<Header/>
|
||||
<h2>
|
||||
<Icon v="atom-alt"/>
|
||||
Słownik neutratywów
|
||||
|
|
|
|||
Reference in New Issue