added

resources/js/components/SMMastHead.vue

@@ -0,0 +1,104 @@
+<template>
+    <div class="masthead">
+        <SMContainer class="flex-column">
+            <div class="main">
+                <h1 class="title">{{ title }}</h1>
+            </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"
+                    active-class="active"
+                    >{{ tab.title }}</router-link
+                >
+            </div>
+        </SMContainer>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useRoute } from "vue-router";
+
+defineProps({
+    title: {
+        type: String,
+        required: true,
+    },
+});
+
+const tabGroups = [
+    [
+        { title: "Contact", to: "/page" },
+        { title: "Code of Conduct", to: "/page" },
+        { title: "Privacy", to: "/page" },
+        { title: "Governance", to: "/page" },
+        { title: "Teams", to: "/login" },
+        { title: "License", to: "/page" },
+    ],
+];
+
+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%;
+
+    .main {
+        width: 100%;
+
+        .title {
+            color: rgb(255, 255, 255);
+            text-align: left;
+            margin-top: 32px;
+            margin-bottom: 32px;
+        }
+    }
+
+    .tabs {
+        display: flex;
+        justify-content: flex-end;
+        width: 100%;
+
+        .tab-item {
+            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;
+
+            &:hover {
+                color: rgba(255, 255, 255);
+                background-color: hsla(0, 0%, 100%, 0.1);
+            }
+
+            &.active {
+                background-color: var(--base-color-light);
+                color: var(--primary-color);
+            }
+        }
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    .masthead {
+        background-color: var(--primary-color-light);
+
+        .tabs .tab-item.active {
+            color: var(--primary-color-light);
+        }
+    }
+}
+</style>