mirror of
https://git.hmsn.ink/kospo/svcm/dmz.git
synced 2026-03-20 05:43:33 +09:00
first
This commit is contained in:
365
src/components/layouts/landing/LandingNavigation.vue
Normal file
365
src/components/layouts/landing/LandingNavigation.vue
Normal file
@@ -0,0 +1,365 @@
|
||||
<script setup lang="ts">
|
||||
const isMobileNavOpen = ref(false)
|
||||
|
||||
const { y } = useWindowScroll()
|
||||
const { isLargeScreen } = useScreenSize()
|
||||
|
||||
const isScrolling = computed(() => {
|
||||
return y.value > 30
|
||||
})
|
||||
|
||||
watchEffect(() => {
|
||||
if (isLargeScreen.value) {
|
||||
isMobileNavOpen.value = false
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="hero">
|
||||
<nav
|
||||
class="navbar is-fixed-top"
|
||||
:class="[!isScrolling && 'is-docked', isMobileNavOpen && 'is-solid']"
|
||||
aria-label="main navigation"
|
||||
>
|
||||
<div class="navbar-brand">
|
||||
<slot name="logo" />
|
||||
|
||||
<MobileBurger v-model="isMobileNavOpen" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="navbar-menu"
|
||||
:class="[isMobileNavOpen && 'is-active']"
|
||||
>
|
||||
<div class="navbar-start">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<slot name="end" />
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.hero {
|
||||
.navbar {
|
||||
top: 15px;
|
||||
height: 65px;
|
||||
max-width: 1140px;
|
||||
margin: 0 auto;
|
||||
background-color: var(--white);
|
||||
box-shadow: var(--light-box-shadow);
|
||||
border: 1px solid var(--fade-grey);
|
||||
border-radius: 500px;
|
||||
font-family: var(--font);
|
||||
z-index: 99;
|
||||
transition: all 0.3s; // transition-all test
|
||||
|
||||
&.is-docked {
|
||||
&:not(.is-solid) {
|
||||
top: 0;
|
||||
border-color: transparent;
|
||||
height: 110px;
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
|
||||
.navbar-brand {
|
||||
background: transparent;
|
||||
.brand-icon {
|
||||
height: 64px;
|
||||
//width: 200px;
|
||||
background: transparent;
|
||||
border-color: color-mix(in oklab, var(--fade-grey), black 3%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-solid {
|
||||
height: 65px !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-solid {
|
||||
background: var(--white) !important;
|
||||
border-radius: 10px 10px 0 0;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
img,
|
||||
.iconify {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
//max-width: 34px;
|
||||
//max-height: 34px;
|
||||
margin-inline-start: 10px;
|
||||
}
|
||||
|
||||
.brand-icon {
|
||||
height: 50px;
|
||||
//width: 200px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all 0.3s; // transition-all test
|
||||
|
||||
img,
|
||||
svg {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-menu {
|
||||
.navbar-item {
|
||||
.dark-mode {
|
||||
transform: scale(0.6);
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
position: relative;
|
||||
font-family: var(--font-alt);
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
color: var(--light-text);
|
||||
text-transform: capitalize;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
inset-inline-start: 2px;
|
||||
width: 50%;
|
||||
transform-origin: right center;
|
||||
height: 3px;
|
||||
border-radius: 50px;
|
||||
background: var(--primary);
|
||||
transform: scale(0, 1);
|
||||
transition: -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition:
|
||||
transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
-webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
// Hover state
|
||||
&:hover,
|
||||
&.is-active {
|
||||
color: var(--dark-text);
|
||||
|
||||
&::before {
|
||||
transform-origin: left center;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
&::before {
|
||||
background: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
font-weight: 400 !important;
|
||||
height: 44px;
|
||||
min-width: 110px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-dark {
|
||||
.navbar {
|
||||
&:not(.is-docked) {
|
||||
background: color-mix(in oklab, var(--landing-xxx), white 8%);
|
||||
border-color: color-mix(in oklab, var(--landing-xxx), white 14%);
|
||||
}
|
||||
|
||||
&.is-docked {
|
||||
.navbar-brand {
|
||||
a {
|
||||
&:hover {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
.brand-icon {
|
||||
background: transparent;
|
||||
//background: color-mix(in oklab, var(--landing-yyy), white 8%) !important;
|
||||
border-color: color-mix(in oklab, var(--landing-yyy), white 18%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-solid {
|
||||
background: color-mix(in oklab, var(--landing-xxx), white 8%) !important;
|
||||
border-color: color-mix(in oklab, var(--landing-xxx), white 14%) !important;
|
||||
|
||||
.navbar-brand {
|
||||
.brand-icon {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-menu {
|
||||
&.is-active {
|
||||
background: color-mix(in oklab, var(--landing-xxx), white 12%);
|
||||
border-color: color-mix(in oklab, var(--landing-xxx), white 14%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-item {
|
||||
.nav-link {
|
||||
&:hover,
|
||||
&.is-active {
|
||||
color: var(--white) !important;
|
||||
}
|
||||
|
||||
&::before {
|
||||
background: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
&.is-primary {
|
||||
background: var(--primary);
|
||||
border-color: var(--primary);
|
||||
|
||||
&.is-raised:hover {
|
||||
box-shadow: var(--primary-box-shadow);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <= 767px) {
|
||||
.navbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: calc(100% - 32px);
|
||||
margin: 0 16px;
|
||||
|
||||
&.is-docked {
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
&.is-solid {
|
||||
top: 10px;
|
||||
box-shadow: var(--light-box-shadow) !important;
|
||||
|
||||
.navbar-brand {
|
||||
.brand-icon {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-menu {
|
||||
box-shadow: var(--light-box-shadow) !important;
|
||||
top: 73px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navbar-menu {
|
||||
width: calc(100% - 32px);
|
||||
position: fixed;
|
||||
top: 78px;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-end: 0;
|
||||
margin: 0 auto;
|
||||
border-radius: 0 0 10px 10px;
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
border: 1px solid var(--fade-grey);
|
||||
box-shadow: none;
|
||||
|
||||
.navbar-item {
|
||||
.button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (width >= 768px) and (width <= 1024px) and (orientation: portrait) {
|
||||
.navbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: calc(100% - 32px);
|
||||
margin: 0 16px;
|
||||
|
||||
&.is-docked {
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
&:not(.is-docked) {
|
||||
&.is-solid {
|
||||
.navbar-menu {
|
||||
top: 73px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-solid {
|
||||
top: 10px;
|
||||
box-shadow: var(--light-box-shadow) !important;
|
||||
|
||||
.navbar-brand {
|
||||
.brand-icon {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-menu {
|
||||
box-shadow: var(--light-box-shadow) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navbar-menu {
|
||||
width: calc(100% - 32px);
|
||||
position: fixed;
|
||||
top: 78px;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-end: 0;
|
||||
margin: 0 auto;
|
||||
border-radius: 0 0 10px 10px;
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
border: 1px solid var(--fade-grey);
|
||||
box-shadow: none;
|
||||
|
||||
.navbar-item {
|
||||
.button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (width >= 768px) and (width <= 1024px) and (orientation: landscape) {
|
||||
.navbar {
|
||||
width: calc(100% - 40px);
|
||||
margin: 0 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user