File: /var/www/quadcode.com/src/components/menu/MenuMobile.svelte
<script lang="ts">
import { menuMobile } from '../../store';
import { browser } from '$app/environment';
import scrollLock from '$utils/scrollLock';
import Social from '../footer/Social.svelte';
import Lang from '../header/Lang.svelte';
import { localeLink, t } from '$lib/translations';
let openMenu = false;
let path = '';
menuMobile.subscribe((value) => {
openMenu = value;
scrollLock(value);
if (browser) {
path = window.location.pathname;
}
});
</script>
<div class="menu-mobile {openMenu ? 'open' : ''}">
<div class="menu-mobile__content">
<div class="menu-mobile__inner">
<div class="menu-mobile__section menu-mobile__section--lang">
<Lang className="menu-mobile__lang" isMobile={true} />
</div>
<div class="menu-mobile__section menu-mobile__section--products">
<div class="menu-mobile__grid">
<a href="{localeLink()}/turnkey-solution" class="menu-mobile__link" on:click={() => menuMobile.set(false)}>
{$t('Turnkey Solution')}
</a>
<a href="{localeLink()}/white-label-broker" class="menu-mobile__link" on:click={() => menuMobile.set(false)}>
{$t('Forex / CFD')}
</a>
<a href="{localeLink()}/prop-firm" class="menu-mobile__link" on:click={() => menuMobile.set(false)}>
{$t('Prop Firm')}
</a>
<a
href="{localeLink()}/white-label-binary-options"
class="menu-mobile__link"
on:click={() => menuMobile.set(false)}
>
{$t('Binary Options')}
</a>
<a href="{localeLink()}/exchange-clearing" class="menu-mobile__link" on:click={() => menuMobile.set(false)}>
{$t('Exchange & Clearing')}
</a>
</div>
</div>
<div class="menu-mobile__section">
<div class="menu-mobile__title">{$t('MODULES')}</div>
<div class="menu-mobile__grid">
<a href="{localeLink()}/trading-platform" class="menu-mobile__link" on:click={() => menuMobile.set(false)}>
{$t('Trading Platform')}
</a>
<a href="{localeLink()}/back-office" class="menu-mobile__link" on:click={() => menuMobile.set(false)}>
{$t('Back Office')}
</a>
</div>
</div>
<div class="menu-mobile__row">
<div class="menu-mobile__section menu-mobile__section--resources">
<div class="menu-mobile__title">{$t('RESOURCES')}</div>
<div class="menu-mobile__grid">
<a href="{localeLink()}/marketing-guide" class="menu-mobile__link" on:click={() => menuMobile.set(false)}>
{$t('Marketing Guide')}
</a>
<a href="{localeLink()}/blog" class="menu-mobile__link" on:click={() => menuMobile.set(false)}>
{$t('Blog')}
</a>
<a href="{localeLink()}/glossary" class="menu-mobile__link" on:click={() => menuMobile.set(false)}>
{$t('Glossary')}
</a>
<a href="{localeLink()}/video-tutorials" class="menu-mobile__link" on:click={() => menuMobile.set(false)}>
{$t('Video Tutorials')}
</a>
<a
href="{localeLink()}/brokerage-profit-calculator"
class="menu-mobile__link"
on:click={() => menuMobile.set(false)}
>
{$t('Profit Calculator')}
</a>
<a href="{localeLink()}/business-plan" class="menu-mobile__link" on:click={() => menuMobile.set(false)}>
{$t('Business Plan')}
</a>
</div>
</div>
<div class="menu-mobile__section menu-mobile__section--more">
<div class="menu-mobile__title">{$t('MORE')}</div>
<div class="menu-mobile__grid">
<a href="{localeLink()}/about" class="menu-mobile__link" on:click={() => menuMobile.set(false)}>
{$t('About Us')}
</a>
<a href="{localeLink()}/team" class="menu-mobile__link" on:click={() => menuMobile.set(false)}>
{$t('Team')}
</a>
<a href="{localeLink()}/events" class="menu-mobile__link" on:click={() => menuMobile.set(false)}>
{$t('Events')}
</a>
<a href="{localeLink()}/numbers" class="menu-mobile__link" on:click={() => menuMobile.set(false)}>
{$t('Numbers')}
</a>
<a href="{localeLink()}/company-news" class="menu-mobile__link" on:click={() => menuMobile.set(false)}>
{$t('Company news')}
</a>
<a href="{localeLink()}/careers" class="menu-mobile__link" on:click={() => menuMobile.set(false)}>
{$t('Careers')}
</a>
<a href="{localeLink()}/sustainability" class="menu-mobile__link" on:click={() => menuMobile.set(false)}>
{$t('Sustainability')}
</a>
</div>
</div>
</div>
<div class="menu-mobile__section menu-mobile__section--social">
<div class="menu-mobile__title">{$t('Follow us')}</div>
<Social />
</div>
</div>
</div>
</div>
<style lang="scss">
@import 'src/scss/variables';
@import 'src/scss/media';
@import 'src/scss/mixins';
:global(body.newHeader) {
.menu-mobile {
top: 139px;
@include breakpoint-down('tabM') {
top: 56px;
}
}
}
.menu-mobile {
background: $headerDark;
position: fixed;
right: 0;
left: 0;
top: 92px;
bottom: 0;
z-index: 9;
pointer-events: none;
opacity: 0;
transition: 0.4s ease;
display: none;
@include breakpoint-down('tabL') {
display: block;
}
&__content {
width: 100%;
height: 100%;
padding-bottom: 40px;
overflow-y: auto;
&::-webkit-scrollbar {
width: 0;
display: none;
}
}
&__inner {
width: 100%;
padding: 16px 32px;
@media (max-width: 720px) {
padding: 16px 32px 32px 32px;
}
@media (max-width: 480px) {
padding: 16px 24px 24px 24px;
}
@media (max-width: 393px) {
padding: 16px 20px 20px 20px;
}
}
&__row {
@media (max-width: 480px) {
display: flex;
gap: 24px;
margin-bottom: 44px;
.menu-mobile__section {
flex: 1;
margin-bottom: 0;
}
.menu-mobile__grid {
display: flex;
flex-direction: column;
gap: 20px;
columns: unset;
}
.menu-mobile__link {
margin-bottom: 0;
}
}
}
&__section {
margin-bottom: 44px;
&--social {
margin-top: 40px;
}
&--lang {
display: none;
@include breakpoint-down('mobL') {
display: block;
}
}
&--products {
.menu-mobile__grid {
@media (max-width: 480px) {
display: block;
columns: 2;
column-gap: 24px;
}
@media (max-width: 392px) {
columns: 1;
}
}
}
}
&__title {
color: rgba(255, 255, 255, 0.5);
font-family: 'Suisse Intl', sans-serif;
font-weight: 500;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.5px;
text-transform: uppercase;
margin-bottom: 16px;
}
&__section--lang {
.menu-mobile__title {
letter-spacing: 1.3px;
}
}
&__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px 24px;
@media (max-width: 480px) {
grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 392px) {
grid-template-columns: 1fr;
}
}
&__link {
display: block;
color: $techWhite;
font-family: 'Suisse Intl', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
transition: 0.3s ease;
break-inside: avoid;
.menu-mobile__section--products & {
@media (max-width: 480px) {
margin-bottom: 20px;
}
}
&:hover {
color: $redPrimary;
}
}
&:global(.open) {
pointer-events: all;
opacity: 1;
transition: 0.4s ease;
}
& :global(.social) {
justify-content: flex-start;
}
& :global(.social__items) {
justify-content: flex-start;
}
& :global(.social__items) {
gap: 24px;
}
& :global(.social__item) {
width: 24px;
min-width: 24px;
height: 24px;
}
& :global(.social__item img) {
filter: brightness(0) invert(1);
}
}
</style>