<script lang="ts">
	import type { CurrentLanguage } from '$lib/types';
	import MenuBig from './MenuBig.svelte';
	import MenuMobile from './MenuMobile.svelte';
	export let currentLanguage: CurrentLanguage = 'en';
</script>

<div class="menu-container default">
	<div class="menu menu-desktop">
		<MenuBig {currentLanguage} />
	</div>
	<div class="menu menu-mobile">
		<MenuMobile {currentLanguage} />
	</div>
</div>

<style lang="scss">
	@import '../../app.scss';

	.menu {
		border-radius: $default-border-radius;

		background-color: $basecolor2;
		position: sticky;
		position: -webkit-sticky;
		top: 0px;
		border-bottom: solid $border-hover-color 2px;
	}

	.menu-desktop {
		display: none;
		@media (min-width: $min-tablet) {
			display: unset;
		}
	}

	.menu-mobile {
		@media (min-width: $min-tablet) {
			display: none;
		}
	}
	.menu-container {
		border-radius: $default-border-radius;
		padding: 0px;
		margin: 10px;
		position: sticky;
		position: -webkit-sticky;
		top: 0px;
		margin: auto;
	}
</style>
