updated menu - tailwind
This commit is contained in:
parent
087a638589
commit
d726af2639
GPG Key ID:
04D4E2012F969213
@ -1,19 +1,22 @@
|
||||
<template>
|
||||
<div
|
||||
class="container"
|
||||
:class="{ 'container-menu-active': isClicked }"
|
||||
class="flex relative items-center justify-between md:justify-start max-w-screen-lg mx-auto gap-5"
|
||||
:class="{ 'clicked-menu': isClicked }"
|
||||
>
|
||||
<router-link to="/">
|
||||
<RouterLink to="/">
|
||||
<div
|
||||
class="logo"
|
||||
class="bg-white text-gray-800 pl-10 pr-5 py-2.5 text-logo-size leading-normal font-thasadith"
|
||||
:class="{ 'clicked-logo': isClicked }"
|
||||
@click="linkClicked"
|
||||
>
|
||||
Kamil<span class="logo-element">Craft</span>
|
||||
Kamil<span class="text-lime-500">Craft</span>
|
||||
</div>
|
||||
</router-link>
|
||||
<nav class="nav">
|
||||
</RouterLink>
|
||||
<nav>
|
||||
<button
|
||||
class="nav-btn"
|
||||
class="md:hidden text-3xl mx-5"
|
||||
:class="[ (isHomePage && !isClicked) ? 'text-white' : 'text-gray-600' ]"
|
||||
title="Menu"
|
||||
@click="clickMenu"
|
||||
>
|
||||
<font-awesome-icon
|
||||
@ -26,17 +29,27 @@
|
||||
/>
|
||||
</button>
|
||||
<ul
|
||||
class="site-menu"
|
||||
:class="{ 'menu-clicked': isClicked }"
|
||||
:class="[ isClicked ? 'absolute top-20 left-0 w-full z-10 text-3xl text-right bg-white shadow-lg' : 'hidden md:flex md:flex-row md:gap-9' ]"
|
||||
>
|
||||
<li
|
||||
v-for="menuItem in menuItems"
|
||||
:key="menuItem.slug"
|
||||
class="menu-element"
|
||||
:class="{ 'py-5 px-3 leading-6': isClicked }"
|
||||
@click="linkClicked"
|
||||
>
|
||||
<RouterLink :to="menuItem.uri">
|
||||
{{ menuItem.title }}
|
||||
<RouterLink
|
||||
v-slot="{ href, navigate, isActive }"
|
||||
:to="menuItem.uri"
|
||||
custom
|
||||
>
|
||||
<a
|
||||
:href="href"
|
||||
class="hover:text-lime-500"
|
||||
:class="[ (!isActive && isHomePage && !isClicked) ? 'text-white' : (isActive ? 'text-lime-500' : 'text-gray-500') ]"
|
||||
@click="navigate"
|
||||
>
|
||||
{{ menuItem.title }}
|
||||
</a>
|
||||
</RouterLink>
|
||||
</li>
|
||||
</ul>
|
||||
@ -45,7 +58,14 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { defineProps, ref, computed } from 'vue'
|
||||
|
||||
defineProps({
|
||||
isHomePage: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
@ -88,127 +108,16 @@ function linkClicked() {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "scss/media";
|
||||
|
||||
.sub-page > .container {
|
||||
.nav-btn {
|
||||
color: #8D8D8D;
|
||||
}
|
||||
|
||||
.nav .site-menu .menu-element {
|
||||
a:not([class|=router-link]) {
|
||||
color: #8D8D8D;
|
||||
|
||||
&:hover {
|
||||
color: #A2CF00;
|
||||
}
|
||||
}
|
||||
}
|
||||
<style lang="scss">
|
||||
.clicked-menu {
|
||||
animation: bg-menu-animation 500ms forwards ease-in-out;
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
height: 80px;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: 0;
|
||||
|
||||
div.logo {
|
||||
padding: 14px 20px 14px 40px;
|
||||
font-family: 'Thasadith', sans-serif;
|
||||
font-size: 2.5em;
|
||||
color: #5C5C5C;
|
||||
background-color: white;
|
||||
|
||||
.logo-element {
|
||||
color: #A2CF00;
|
||||
}
|
||||
}
|
||||
|
||||
&-menu-active {
|
||||
color: #8D8D8D;
|
||||
animation: container-active-menu 500ms forwards ease-in-out;
|
||||
|
||||
div.logo {
|
||||
animation: logo-active-menu 500ms forwards ease-in-out;
|
||||
}
|
||||
.nav {
|
||||
.nav-btn {
|
||||
color: #8D8D8D;
|
||||
}
|
||||
.site-menu .menu-element a {
|
||||
color: #8D8D8D;
|
||||
}
|
||||
}
|
||||
}
|
||||
.clicked-logo {
|
||||
animation: bg-logo-animation 500ms forwards ease-in-out;
|
||||
}
|
||||
.nav {
|
||||
margin-left: 20px;
|
||||
z-index: 10;
|
||||
.nav-btn {
|
||||
display: none;
|
||||
margin: 10px 25px;
|
||||
font-size: 2em;
|
||||
color: white;
|
||||
background: transparent !important;
|
||||
border: none;
|
||||
}
|
||||
.site-menu {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
|
||||
.menu-element {
|
||||
margin-right: 30px;
|
||||
|
||||
a {
|
||||
color: #EBEBEB;
|
||||
|
||||
&.router-link-exact-active, &:hover {
|
||||
color: #A2CF00;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include media-tablet {
|
||||
margin-left: 0;
|
||||
|
||||
.nav-btn {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.site-menu {
|
||||
display: none;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: 0;
|
||||
background-color: white;
|
||||
box-shadow: 0 10px 10px rgba(0, 0, 0, .1);
|
||||
|
||||
.menu-element {
|
||||
width: 100%;
|
||||
padding: 5px 20px;
|
||||
text-align: right;
|
||||
font-size: 1.8em;
|
||||
line-height: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-clicked {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include media-tablet {
|
||||
.container {
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
@keyframes container-active-menu {
|
||||
@keyframes bg-menu-animation {
|
||||
0% {
|
||||
background-color: transparent;
|
||||
}
|
||||
@ -216,7 +125,7 @@ function linkClicked() {
|
||||
background-color: #EFEFEF;
|
||||
}
|
||||
}
|
||||
@keyframes logo-active-menu {
|
||||
@keyframes bg-logo-animation {
|
||||
0% {
|
||||
background-color: white;
|
||||
}
|
||||
@ -225,3 +134,141 @@ function linkClicked() {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--<style lang="scss" scoped>
|
||||
//@import "scss/media";
|
||||
//
|
||||
//.sub-page > .container {
|
||||
// .nav-btn {
|
||||
// color: #8D8D8D;
|
||||
// }
|
||||
//
|
||||
// .nav .site-menu .menu-element {
|
||||
// a:not([class|=router-link]) {
|
||||
// color: #8D8D8D;
|
||||
//
|
||||
// &:hover {
|
||||
// color: #A2CF00;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
//.container {
|
||||
// display: flex;
|
||||
// height: 80px;
|
||||
// align-items: center;
|
||||
// justify-content: flex-start;
|
||||
// padding: 0;
|
||||
//
|
||||
// div.logo {
|
||||
// padding: 14px 20px 14px 40px;
|
||||
// font-family: 'Thasadith', sans-serif;
|
||||
// font-size: 2.5em;
|
||||
// color: #5C5C5C;
|
||||
// background-color: white;
|
||||
//
|
||||
// .logo-element {
|
||||
// color: #A2CF00;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// &-menu-active {
|
||||
// color: #8D8D8D;
|
||||
// animation: container-active-menu 500ms forwards ease-in-out;
|
||||
//
|
||||
// div.logo {
|
||||
// animation: logo-active-menu 500ms forwards ease-in-out;
|
||||
// }
|
||||
// .nav {
|
||||
// .nav-btn {
|
||||
// color: #8D8D8D;
|
||||
// }
|
||||
// .site-menu .menu-element a {
|
||||
// color: #8D8D8D;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
//.nav {
|
||||
// margin-left: 20px;
|
||||
// z-index: 10;
|
||||
// .nav-btn {
|
||||
// display: none;
|
||||
// margin: 10px 25px;
|
||||
// font-size: 2em;
|
||||
// color: white;
|
||||
// background: transparent !important;
|
||||
// border: none;
|
||||
// }
|
||||
// .site-menu {
|
||||
// display: flex;
|
||||
// list-style: none;
|
||||
//
|
||||
// .menu-element {
|
||||
// margin-right: 30px;
|
||||
//
|
||||
// a {
|
||||
// color: #EBEBEB;
|
||||
//
|
||||
// &.router-link-exact-active, &:hover {
|
||||
// color: #A2CF00;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// &:last-child {
|
||||
// margin-right: unset;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// @include media-tablet {
|
||||
// margin-left: 0;
|
||||
//
|
||||
// .nav-btn {
|
||||
// display: block;
|
||||
// }
|
||||
//
|
||||
// .site-menu {
|
||||
// display: none;
|
||||
// width: 100%;
|
||||
// position: absolute;
|
||||
// top: 80px;
|
||||
// left: 0;
|
||||
// background-color: white;
|
||||
// box-shadow: 0 10px 10px rgba(0, 0, 0, .1);
|
||||
//
|
||||
// .menu-element {
|
||||
// width: 100%;
|
||||
// padding: 5px 20px;
|
||||
// text-align: right;
|
||||
// font-size: 1.8em;
|
||||
// line-height: 2em;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .menu-clicked {
|
||||
// display: block;
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
//@include media-tablet {
|
||||
// .container {
|
||||
// justify-content: space-between;
|
||||
// }
|
||||
//}
|
||||
//@keyframes container-active-menu {
|
||||
// 0% {
|
||||
// background-color: transparent;
|
||||
// }
|
||||
// 100% {
|
||||
// background-color: #EFEFEF;
|
||||
// }
|
||||
//}
|
||||
//@keyframes logo-active-menu {
|
||||
// 0% {
|
||||
// background-color: white;
|
||||
// }
|
||||
// 100% {
|
||||
// background-color: #F6F6F6;
|
||||
// }
|
||||
//}
|
||||
</style>-->
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<header :class="thisClass">
|
||||
<navigation />
|
||||
<Navigation :is-home-page="isHome" />
|
||||
<div
|
||||
v-if="isTitle"
|
||||
class="header-info"
|
||||
|
||||
@ -3,8 +3,28 @@ module.exports = {
|
||||
content: [
|
||||
"./src/**/*.{vue,js}",
|
||||
],
|
||||
darkMode: true,
|
||||
theme: {
|
||||
extend: {},
|
||||
fontFamily: {
|
||||
'arial': ['Arial', 'sans-serif'],
|
||||
'roboto': ['Roboto', 'sans-serif'],
|
||||
'thasadith': ['Thasadith', 'sans-serif']
|
||||
},
|
||||
fontSize: {
|
||||
'logo-size': '2.5rem',
|
||||
'xs': '.75rem',
|
||||
'sm': '.875rem',
|
||||
'tiny': '.875rem',
|
||||
'base': '1rem',
|
||||
'lg': '1.125rem',
|
||||
'xl': '1.25rem',
|
||||
'2xl': '1.5rem',
|
||||
'3xl': '1.875rem',
|
||||
'4xl': '2.25rem',
|
||||
'5xl': '3rem',
|
||||
'6xl': '4rem',
|
||||
'7xl': '5rem'
|
||||
}
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user