mirror of
https://github.com/Lissy93/dashy.git
synced 2025-07-25 06:35:45 +02:00
Refactored Navbar into seperate files
This commit is contained in:
parent
f583e529b7
commit
adaa7fc755
33
src/components/Header.vue
Normal file
33
src/components/Header.vue
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
<template>
|
||||||
|
<header>
|
||||||
|
<PageTitle />
|
||||||
|
<Nav class="nav"/>
|
||||||
|
</header>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import PageTitle from '@/components/PageTitle.vue'
|
||||||
|
import Nav from '@/components/Nav.vue'
|
||||||
|
export default {
|
||||||
|
name: 'Header',
|
||||||
|
components: {
|
||||||
|
PageTitle,
|
||||||
|
Nav
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
header {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0.5rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
background: #282a32;
|
||||||
|
align-items: center;
|
||||||
|
align-content: flex-start;
|
||||||
|
@media screen and (max-width: 600px) {
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
36
src/components/PageTitle.vue
Normal file
36
src/components/PageTitle.vue
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
<template>
|
||||||
|
<div class="page-titles">
|
||||||
|
<h1>Pannel</h1>
|
||||||
|
<span class="subtitle">Awesome subtitle</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'PageTitle'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.page-titles {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
h1 {
|
||||||
|
background: -webkit-linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
|
||||||
|
background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
font-size: 3rem;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
span.subtitle {
|
||||||
|
color: #9F86FF;
|
||||||
|
font-style: italic;
|
||||||
|
text-shadow: 1px 1px 2px #130f23;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 600px) {
|
||||||
|
text-align: center;
|
||||||
|
padding: 0.25rem 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
@ -1,12 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="home">
|
<div class="home">
|
||||||
<section class="top-section">
|
<Header />
|
||||||
<div class="heading">
|
|
||||||
<h1>{{title}}</h1>
|
|
||||||
<span class="subtitle">{{subtitle}}</span>
|
|
||||||
</div>
|
|
||||||
<Nav class="nav" />
|
|
||||||
</section>
|
|
||||||
<FilterTile @user-is-searchin="searching" class="filter-container" />
|
<FilterTile @user-is-searchin="searching" class="filter-container" />
|
||||||
|
|
||||||
<div class="item-group-container">
|
<div class="item-group-container">
|
||||||
@ -23,7 +17,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
import Nav from '@/components/Nav.vue'
|
import Header from '@/components/Header.vue'
|
||||||
import FilterTile from '@/components/FilterTile.vue'
|
import FilterTile from '@/components/FilterTile.vue'
|
||||||
import ItemGroup from '@/components/ItemGroup.vue'
|
import ItemGroup from '@/components/ItemGroup.vue'
|
||||||
import * as linkData from './../data/item-data.json'
|
import * as linkData from './../data/item-data.json'
|
||||||
@ -31,7 +25,7 @@ import * as linkData from './../data/item-data.json'
|
|||||||
export default {
|
export default {
|
||||||
name: 'home',
|
name: 'home',
|
||||||
components: {
|
components: {
|
||||||
Nav,
|
Header,
|
||||||
FilterTile,
|
FilterTile,
|
||||||
ItemGroup
|
ItemGroup
|
||||||
},
|
},
|
||||||
@ -65,41 +59,6 @@ export default {
|
|||||||
padding-bottom: 1px;
|
padding-bottom: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
section.top-section {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0.5rem;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
background: #282a32;
|
|
||||||
align-items: center;
|
|
||||||
align-content: flex-start;
|
|
||||||
@media screen and (max-width: 600px) {
|
|
||||||
flex-direction: column-reverse;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.heading {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
h1 {
|
|
||||||
background: -webkit-linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
|
|
||||||
background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
font-size: 3rem;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
span.subtitle {
|
|
||||||
color: #9F86FF;
|
|
||||||
font-style: italic;
|
|
||||||
text-shadow: 1px 1px 2px #130f23;
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 600px) {
|
|
||||||
text-align: center;
|
|
||||||
padding: 0.25rem 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-group-container {
|
.item-group-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin: 2rem;
|
margin: 2rem;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user