188 lines
4.4 KiB
Vue
188 lines
4.4 KiB
Vue
<template>
|
|
<div class="masthead">
|
|
<SMContainer class="flex-column">
|
|
<div class="main">
|
|
<h1 class="title">{{ title }}</h1>
|
|
<router-link
|
|
class="back"
|
|
v-if="props.backLink !== null"
|
|
:to="props.backLink"
|
|
><ion-icon name="chevron-back-outline"></ion-icon>
|
|
{{ props.backTitle }}</router-link
|
|
>
|
|
<p class="info" v-if="slots.default"><slot></slot></p>
|
|
</div>
|
|
<div v-if="tabs().length > 0" class="tabs">
|
|
<router-link
|
|
:to="tab.to"
|
|
v-for="(tab, idx) in tabs()"
|
|
:key="idx"
|
|
class="tab-item"
|
|
exact-active-class="active"
|
|
>{{ tab.title }}</router-link
|
|
>
|
|
</div>
|
|
</SMContainer>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useSlots } from "vue";
|
|
import { useRoute } from "vue-router";
|
|
|
|
const props = defineProps({
|
|
title: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
backLink: {
|
|
type: Object,
|
|
default: () => {
|
|
return null;
|
|
},
|
|
required: false,
|
|
},
|
|
backTitle: {
|
|
type: String,
|
|
default: "Back",
|
|
required: false,
|
|
},
|
|
});
|
|
|
|
const slots = useSlots();
|
|
|
|
const tabGroups = [
|
|
[
|
|
{ title: "Contact", to: "/contact" },
|
|
{ title: "Code of Conduct", to: "/code-of-conduct" },
|
|
{ title: "Rules", to: "/rules" },
|
|
{ title: "Terms and Conditions", to: "/terms-and-conditions" },
|
|
{ title: "Privacy", to: "/privacy" },
|
|
],
|
|
[
|
|
{ title: "Connect", to: "/minecraft" },
|
|
{ title: "Curves", to: "/minecraft/curve" },
|
|
],
|
|
];
|
|
|
|
const route = useRoute();
|
|
|
|
const tabs = () => {
|
|
const currentTabGroup = tabGroups.find((items) =>
|
|
items.some((item) => item.to === route.path)
|
|
);
|
|
|
|
return currentTabGroup || [];
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.masthead {
|
|
background-color: var(--primary-color);
|
|
width: 100%;
|
|
margin-bottom: 32px;
|
|
|
|
.main {
|
|
width: 100%;
|
|
|
|
.title {
|
|
color: rgb(255, 255, 255);
|
|
text-align: left;
|
|
margin-top: 32px;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.back,
|
|
.back:visited {
|
|
display: flex;
|
|
color: rgb(255, 255, 255, 0.75);
|
|
margin-top: -24px;
|
|
margin-bottom: 32px;
|
|
font-size: 80%;
|
|
text-decoration: none;
|
|
transition: color 0.1s linear;
|
|
|
|
&:hover {
|
|
color: rgb(255, 255, 255, 1);
|
|
|
|
ion-icon {
|
|
margin-left: -4px;
|
|
margin-right: 8px;
|
|
}
|
|
}
|
|
|
|
ion-icon {
|
|
margin-right: 4px;
|
|
transition: margin 0.1s linear;
|
|
}
|
|
}
|
|
|
|
.info {
|
|
margin-top: -24px;
|
|
color: rgb(255, 255, 255, 0.74);
|
|
max-width: 500px;
|
|
|
|
a {
|
|
color: rgb(255, 255, 255);
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tabs {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
width: 100%;
|
|
white-space: nowrap;
|
|
|
|
.tab-item {
|
|
display: inline-block;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
font-family: var(--header-font-family);
|
|
font-weight: 800;
|
|
font-size: 18px;
|
|
text-decoration: none;
|
|
padding: 16px 24px;
|
|
white-space: nowrap;
|
|
|
|
&:hover:not(.active) {
|
|
color: rgba(255, 255, 255);
|
|
background-color: hsla(0, 0%, 100%, 0.1);
|
|
}
|
|
|
|
&.active {
|
|
background-color: var(--base-color);
|
|
color: var(--primary-color);
|
|
|
|
&:hover {
|
|
filter: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.masthead .tabs {
|
|
display: block;
|
|
overflow-x: auto;
|
|
scroll-behavior: smooth;
|
|
scrollbar-width: none;
|
|
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// @media (prefers-color-scheme: dark) {
|
|
// .masthead {
|
|
// background-color: var(--primary-color-light);
|
|
|
|
// .tabs .tab-item.active {
|
|
// color: var(--primary-color-light);
|
|
// }
|
|
// }
|
|
// }
|
|
</style>
|