Replace New things section with a banner

Author: GusevPM

components/ActionBar.vue

@@ -7,6 +7,9 @@ import Button from "@/components/ui/Button.vue"
 /** Components */
 import Search from "@/components/modules/navigation/Search.vue"
 
+/** Utils */
+import { isMobile } from "@/services/utils"
+
 /** Store */
 import { useAppStore } from "@/store/app"
 const appStore = useAppStore()
@@ -15,7 +18,7 @@ const appStore = useAppStore()
 <template>
 	<Flex wide align="center" justify="between" gap="24" :class="$style.wrapper">
 		<Flex wide align="center" gap="12">
-			<Button @click="appStore.showSidebar = !appStore.showSidebar" type="secondary" size="medium" :class="$style.menu_btn">
+			<Button v-if="isMobile()" @click="appStore.showSidebar = !appStore.showSidebar" type="secondary" size="medium" :class="$style.menu_btn">
 				<Icon name="menu" size="16" color="primary" />
 			</Button>
 

components/LeftSidebar.vue

@@ -217,7 +217,7 @@ const handleNavigate = (url) => {
 				</Flex>
 			</Flex>
 
-			<Flex direction="column" gap="8">
+			<!-- <Flex direction="column" gap="8">
 				<Flex align="center" gap="8" style="padding: 0 8px">
 					<Icon name="stars" size="12" color="tertiary" />
 					<Text size="12" weight="500" color="tertiary">New things</Text>
@@ -226,9 +226,9 @@ const handleNavigate = (url) => {
 				<Flex direction="column" gap="2">
 					<NavLink v-for="link in newLinks" :link="link" @onClose="appStore.showSidebar = false" />
 				</Flex>
-			</Flex>
+			</Flex> -->
 
-			<AdvBanner />
+			<AdvBanner :style="{ width: '100%' }" />
 		</Flex>
 
 		<Flex direction="column" gap="16" style="margin-right: 20px">

components/shared/AdvBanner.vue

@@ -2,6 +2,10 @@
 /** Services */
 import { getAdvByName, getRandomAdv } from "@/services/constants/advertising"
 
+/** Store */
+import { useModalsStore } from "~/store/modals"
+const modalsStore = useModalsStore()
+
 const props = defineProps({
 	advName: {
 		type: String,
@@ -16,6 +20,14 @@ const props = defineProps({
 const adv = ref({})
 const isDisplayed = ref(true)
 
+const handleClick = () => {
+	if (adv.value.link) {
+		window.open(adv.value.link, '_blank')
+	} else if (adv.value.modal) {
+		modalsStore.open(adv.value.modal)
+	}
+}
+
 onMounted(() => {
 	if (props.advName) {
 		adv.value = getAdvByName(props.advName)
@@ -26,7 +38,7 @@ onMounted(() => {
 </script>
 
 <template>
-	<NuxtLink v-if="adv.link" :to="adv.link" target="_blank" :class="[orientation === 'horizontal' && $style.wrapper_horizontal, !isDisplayed && $style.not_display]">
+	<Flex v-if="adv.name" @click="handleClick()" :class="[$style.wrapper, orientation === 'horizontal' && $style.wrapper_horizontal, !isDisplayed && $style.not_display]">
 		<Flex v-if="orientation === 'vertical'" direction="column" gap="12" :class="$style.ad_vertical">
 			<Flex direction="column" gap="8">
 				<Flex align="center" gap="6">
@@ -37,7 +49,6 @@ onMounted(() => {
 				<Text size="13" weight="600" color="tertiary" height="140"> {{ adv.body }} </Text>
 			</Flex>
 
-			<!-- <Text size="13" weight="600" color="brand" :class="$style.footer"> {{ adv.footer }} </Text> -->
 			<Flex align="center" justify="between">
 				<Text size="13" weight="600" color="brand" :class="$style.footer"> {{ adv.footer }} </Text>
 
@@ -67,10 +78,16 @@ onMounted(() => {
 				<Icon @click.prevent.stop="isDisplayed = false" name="close" size="16" color="secondary" :class="$style.close_icon" />
 			</Flex>
 		</Flex>
-	</NuxtLink>
+	</Flex>
 </template>
 
 <style module>
+.wrapper {
+	width: 100%;
+	
+	cursor: pointer;
+}
+
 .wrapper_horizontal {
 	width: 100%;
 	padding: 8px 24px 0px 24px;
@@ -149,4 +166,10 @@ onMounted(() => {
 		}
 	}
 }
+
+@media (max-width: 500px) {
+	.wrapper_horizontal {
+		padding: 12px;
+	}
+}
 </style>

services/constants/advertising.js

@@ -1,12 +1,12 @@
 const advertisements = [
 	{
 		name: 'celenium_api',
-		link: 'https://api-plans.celenium.io',
+		modal: 'api',
 		icon: 'slash',
 		header: 'Try out Celenium API',
 		body: 'The power of Celestia: Scalable, Secure and Modular Blockchain.',
 		footer: 'Get started',
-		weight: 0.5,
+		weight: 0.2,
 	},
 	{
 		name: 'celenium_survey',
@@ -15,7 +15,16 @@ const advertisements = [
 		header: 'Celenium survey',
 		body: 'Please take 5 minutes and answer a few questions.',
 		footer: 'Take the survey',
-		weight: 0.5,
+		weight: 0.4,
+	},
+	{
+		name: 'lumina',
+		modal: 'lightNode',
+		icon: 'lumina',
+		header: 'Your Own Node',
+		body: 'Launch a node directly in your browser or on your phone.',
+		footer: 'Run Light Node',
+		weight: 0.4,
 	},
 ]