mns/mns-mini-zabor
mns
/
mns-mini-zabor
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bx-1047-icon #23

Merged
ksenia_mikhailova merged 5 commits from bx-1047-icon into dev 2024-07-11 12:34:39 +03:00
Conversation 0 Commits 5 Files Changed 3 +127 -25
3 changed files with 127 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
assets/main.scss
View File

@ -47,15 +47,16 @@ body {
}
.menu {
@apply col-span-10 flex justify-end;
@apply hidden xl:flex col-span-10 justify-end;
a {
@apply hover:text-ioprim-900 transition-colors;
@apply text-zinc-800 hover:text-ioprim-900 transition-colors;
&:before {
content: '';
@apply inline-block w-[2px] h-5 mx-4 align-middle bg-gradient-to-t from-transparent via-[#333333] via-50% to-transparent;
@apply inline-block w-[2px] h-5 mx-4 align-middle bg-gradient-to-t from-transparent via-zinc-800 via-50% to-transparent;
}
&:first-child::before {
content: none;
}
@ -69,6 +70,32 @@ body {
@apply ml-2;
}
}
&.toggle_visible {
@apply max-xl:flex max-xl:flex-col max-xl:text-center;
a {
@apply max-xl:mb-2;
}
a:before {
@media screen and (max-width: 1280px) {
content: none;
}
}
}
&-toggle {
@apply flex xl:hidden col-span-8 justify-end;
>span {
@apply cursor-pointer text-zinc-600 hover:text-ioprim-900 transition-colors;
svg {
@apply text-3xl;
}
}
}
}
a[href^="#"] {
@ -76,31 +103,67 @@ a[href^="#"] {
}
.footer {
@apply px-2 py-4 bg-slate-200;
@apply px-2 py-4 bg-slate-200 text-zinc-800 pt-12;
.container {
@apply gap-4
}
.k-logo {
@apply col-span-12 xl:col-span-2 row-span-3 text-9xl;
@apply col-span-12 xl:col-span-2 row-span-3 text-9xl text-ioprim;
svg {
@apply my-0 mx-auto;
}
&:after {
content: '';
@apply block lg:hidden mr-auto ml-auto mt-5 h-[2px] max-w-44 mx-4 align-middle bg-gradient-to-r from-transparent via-zinc-800 via-50% to-transparent;
}
}
&-text {
@apply col-span-12 xl:col-span-5 text-sm prose;
@apply col-span-12 xl:col-span-5 text-sm mb-2;
&-small {
@apply col-span-12 xl:col-span-10 text-xs min-w-full prose;
@apply col-span-12 xl:col-span-10 text-xs min-w-full;
}
&-social {
@apply col-span-12 xl:col-span-10 flex gap-4
@apply col-span-12 xl:col-span-10 flex gap-4 flex-wrap justify-center;
}
}
&-icon {
@apply order-2 flex justify-center items-center gap-2;
&:hover {
.footer-icon-text {
@apply no-underline;
}
}
svg {
@apply mb-0;
}
&-big {
@apply text-3xl order-1 w-full text-center;
.footer-icon-text {
@apply no-underline;
}
}
&-text {
@apply underline;
}
}
&_two {
@apply xl:bg-slate-200 py-16 lg:py-8 text-sm text-zinc-500;
}
}
.siteblock {

57
components/footer.vue
View File

@ -15,22 +15,49 @@ const { data: footerData } = await apiFetch<ApiFooterType[]>(`footer/?ordering=s
const { data: social_networkData } = await apiFetch<ApiSocial_networkType[]>(`social_network/`)
</script>
<template>
<div class="footer" id="contacts">
<div class="container">
<div class="k-logo">
<k_logo />
<div>
<div class="footer" id="contacts">
<div class="container">
<div class="col-span-12 lg:col-span-6 xl:col-span-3 mb-12 lg:mb-0">
<div class="k-logo">
<k_logo />
</div>
</div>
<div class="col-span-12 lg:col-span-6 xl:col-span-6 mb-12 lg:mb-0">
<template v-for="item in footerData">
<div class="footer-text" v-if="!item.small_text">
<template v-for="p in item.text.split('\n')">
<p v-if="p.trim().length">{{ p }}</p>
</template>
</div>
</template>
</div>
<div class="col-span-12 xl:col-span-3">
<div class="footer-text footer-text-social" v-if="social_networkData">
<template v-for="item in social_networkData">
<a :class="['footer-icon', { 'footer-icon-big': !item.icon }]" :href="item.link"
target="_blank">
<template v-if="item.icon">
<component :is="icons[(item.icon.trim() as keyof typeof icons)]"
v-if="icons.hasOwnProperty(item.icon.trim())" />
<Icon :name="item.icon" v-else />
</template>
<span class="footer-icon-text">{{ item.name }}</span>
</a>
</template>
</div>
</div>
</div>
<template v-for="item in footerData">
<div class="footer-text" :class="[{ 'footer-text-small': item.small_text }]">{{ item.text }}</div>
</template>
<div class="footer-text footer-text-social" v-if="social_networkData">
<template v-for="item in social_networkData">
<a :href="item.link" target="_blank">
<component :is="icons[(item.icon.trim() as keyof typeof icons)]"
v-if="icons.hasOwnProperty(item.icon.trim())" />
<Icon :name="item.icon" v-else /> {{ item.name }}
</a>
</template>
</div>
<div class="footer_two">
<div class="container">
<div class="col-span-10 col-start-2">
<template v-for="item in footerData">
<div class="footer-text" v-if="item.small_text">
{{ item.text }}
</div>
</template>
</div>
</div>
</div>
</div>

16
components/header.vue
View File

@ -5,6 +5,13 @@ import k_logo from '@/assets/LOGO.svg'
const { data: menuData } = await apiFetch<ApiMenuType>(`menu/1/`)
const pagesData = (menuData.value ? menuData.value.pages : []).sort((a, b) => a.order - b.order)
const route = useRoute()
const menu_visible = ref(false)
const toggle_menu = () => {
if (window.innerWidth < 1280) {
menu_visible.value = !menu_visible.value
}
}
</script>
<template>
<div class="header">
@ -15,10 +22,15 @@ const route = useRoute()
<span class="logo_text">Kupizabor</span>
</NuxtLink>
</div>
<div class="menu">
<div class="menu-toggle">
<span @click="toggle_menu">
<Icon name="mdi:menu" />
</span>
</div>
<div class="menu" :class="[{ 'toggle_visible': menu_visible }]">
<template v-for="item in pagesData">
<NuxtLink :to="item.external_link || ((route.name == 'index' ? '' : '/') + `#${item.slug}`)"
:target="item.external_link ? '_blank' : '_self'">
:target="item.external_link ? '_blank' : '_self'" @click="toggle_menu">
{{ item.menu_title }}
</NuxtLink>
</template>