Skip to content

Commit

Permalink
Merge pull request #140 from swiss/feature/mobile-menu-v2
Browse files Browse the repository at this point in the history 
Feature/mobile menu v2
  • Loading branch information
@satefan
satefan authored Dec 18, 2024
2 parents 35b7d3a + b5c56b9 commit 60b1927
Show file tree
Hide file tree
Showing 9 changed files with 165 additions and 167 deletions.
2 changes: 1 addition & 1 deletion .nvmrc
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
v20.17.0
v22.12.0
8 changes: 2 additions & 6 deletions app/components/ch/components/Badge.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@
</template>

<script setup lang="ts">
import SvgIcon from '../components/SvgIcon.vue'
import { computed, type PropType } from 'vue'
import { computed, type PropType } from 'vue';
import SvgIcon from '../components/SvgIcon.vue';
const props = defineProps({
label: {
Expand Down Expand Up @@ -59,10 +59,6 @@ const props = defineProps({
type: String,
default: () => undefined,
},
highlightCancel: {
type: Boolean,
default: () => false,
},
iconLeft: {
type: String,
default: () => undefined,
Expand Down
303 changes: 151 additions & 152 deletions app/components/ch/sections/MobileMenuV2.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@
v-else
id="mobile-menu-id"
class="mobile-menu-v2"
:class="isOpen ? 'mobile-menu-v2--is-open' : ''"
>
<div id="mobile-menu-header" class="mobile-menu-v2-header">
<div
Expand Down Expand Up @@ -53,63 +52,65 @@
id="mobile-menu-v2__level-0"
class="mobile-menu-v2__level mobile-menu-v2__level-0"
>
<ul class="mobile-menu-v2-navigation">
<li>
<a href="javascript:alert('link')">
<span>News</span>
</a>
</li>
<li>
<a href="javascript:alert('link)">
<span>Geodaten</span>
</a>
</li>
<li>
<a href="javascript:alert('link')">
<span>Karten</span>
</a>
</li>
<li>
<a href="javascript:alert('link')">
<span>Geoportale</span>
</a>
</li>
<li>
<a
href="javascript:void(0)"
role="button"
aria-current="true"
class="mobile-menu-v2-navigation-item__has-children active"
@click="showLevel(1)"
>
<span>Dienstleistungen</span>
<SvgIcon icon="ArrowRight" size="lg" />
</a>
</li>
<li>
<a href="javascript:alert('link')"> Forschung und Lehre </a>
</li>
<li>
<a href="javascript:alert('link')"> Über geo.admin.ch </a>
</li>
<li>
<a href="javascript:alert('link')"> test1 </a>
</li>
<li>
<a href="javascript:alert('link')"> test2 </a>
</li>
<li>
<a href="javascript:alert('link')"> test3 </a>
</li>
<li>
<a href="javascript:alert('link')"> Extra mainmenu example </a>
</li>
<li>
<a href="javascript:alert('link')">
Try to limit mainmenus to 5
</a>
</li>
</ul>
<nav aria-label="Main">
<ul class="mobile-menu-v2-navigation">
<li>
<a href="javascript:alert('link')">
<span>News</span>
</a>
</li>
<li>
<a href="javascript:alert('link)">
<span>Geodaten</span>
</a>
</li>
<li>
<a href="javascript:alert('link')">
<span>Karten</span>
</a>
</li>
<li>
<a href="javascript:alert('link')">
<span>Geoportale</span>
</a>
</li>
<li>
<a
href="javascript:void(0)"
role="button"
aria-current="true"
class="mobile-menu-v2-navigation-item__has-children active"
@click="showLevel(1)"
>
<span>Dienstleistungen</span>
<SvgIcon icon="ArrowRight" size="lg" />
</a>
</li>
<li>
<a href="javascript:alert('link')"> Forschung und Lehre </a>
</li>
<li>
<a href="javascript:alert('link')"> Über geo.admin.ch </a>
</li>
<li>
<a href="javascript:alert('link')"> test1 </a>
</li>
<li>
<a href="javascript:alert('link')"> test2 </a>
</li>
<li>
<a href="javascript:alert('link')"> test3 </a>
</li>
<li>
<a href="javascript:alert('link')"> Extra mainmenu example </a>
</li>
<li>
<a href="javascript:alert('link')">
Try to limit mainmenus to 5
</a>
</li>
</ul>
</nav>
<MetaNavigationMobile />
<TopBarNavigation :isMobileMenu="true" />
</div>
Expand All @@ -118,31 +119,39 @@
id="mobile-menu-v2__level-1"
class="mobile-menu-v2__level mobile-menu-v2__level-1"
>
<ul class="mobile-menu-v2-navigation">
<li>
<a href="javascript:alert('link')">Überblick</a>
</li>
<li><a href="javascript:alert('link')">Datenmodellablage</a></li>
<li>
<a
href="javascript:void(0)"
role="button"
aria-current="true"
class="mobile-menu-v2-navigation-item__has-children active"
@click="showLevel(2)"
><span>Geodienste</span> <SvgIcon icon="ArrowRight" size="lg"
/></a>
</li>
<li><a href="javascript:alert('link')">Geodatenmodelle</a></li>
<li><a href="javascript:alert('link')">FAQ</a></li>
<li>
<a href="javascript:alert('link')">Koordinatenreferenzsysteme</a>
</li>
<li>
<a href="javascript:alert('link')">Geografische Bezeichnungen</a>
</li>
<li><a href="javascript:alert('link')">Verwaltungseinheiten</a></li>
</ul>
<nav aria-label="Main">
<ul class="mobile-menu-v2-navigation">
<li>
<a href="javascript:alert('link')">Überblick</a>
</li>
<li><a href="javascript:alert('link')">Datenmodellablage</a></li>
<li>
<a
href="javascript:void(0)"
role="button"
aria-current="true"
class="mobile-menu-v2-navigation-item__has-children active"
@click="showLevel(2)"
><span>Geodienste</span> <SvgIcon icon="ArrowRight" size="lg"
/></a>
</li>
<li><a href="javascript:alert('link')">Geodatenmodelle</a></li>
<li><a href="javascript:alert('link')">FAQ</a></li>
<li>
<a href="javascript:alert('link')"
>Koordinatenreferenzsysteme</a
>
</li>
<li>
<a href="javascript:alert('link')"
>Geografische Bezeichnungen</a
>
</li>
<li>
<a href="javascript:alert('link')">Verwaltungseinheiten</a>
</li>
</ul>
</nav>
<MetaNavigationMobile />
<TopBarNavigation :isMobileMenu="true" />
</div>
Expand All @@ -151,40 +160,42 @@
id="mobile-menu-v2__level-2"
class="mobile-menu-v2__level mobile-menu-v2__level-2"
>
<ul class="mobile-menu-v2-navigation">
<li>
<a href="javascript:alert('link')">Überblick</a>
</li>
<li>
<a
href="javascript:void(0)"
aria-current="true"
class="mobile-menu-v2-navigation-item__has-children"
@click="showLevel(3)"
><span>Darstellungsdienste</span>
<SvgIcon icon="ArrowRight" size="lg"
/></a>
</li>
<li><a href="javascript:alert('link')">Download-Dienste</a></li>
<li>
<a href="javascript:alert('link')" class="active"
>Linked Data Dienst: GeoDaten semantisch verlinken</a
>
</li>
<li>
<a href="javascript:alert('link')"
>Allgemeine Nutzungsbedingungen und Betriebsbestimmungen der
Bundes Geodaten-Infrastruktur BGDI</a
>
</li>
<li><a href="javascript:alert('link')">Suchdienst CSW</a></li>
<li>
<a href="javascript:alert('link')"
>Konformitätsprüfung Geobasisdienste nach eCH-0056</a
>
</li>
<li><a href="javascript:alert('link')">INSPIRE Dienste</a></li>
</ul>
<nav aria-label="Main">
<ul class="mobile-menu-v2-navigation">
<li>
<a href="javascript:alert('link')">Überblick</a>
</li>
<li>
<a
href="javascript:void(0)"
aria-current="true"
class="mobile-menu-v2-navigation-item__has-children"
@click="showLevel(3)"
><span>Darstellungsdienste</span>
<SvgIcon icon="ArrowRight" size="lg"
/></a>
</li>
<li><a href="javascript:alert('link')">Download-Dienste</a></li>
<li>
<a href="javascript:alert('link')" class="active"
>Linked Data Dienst: GeoDaten semantisch verlinken</a
>
</li>
<li>
<a href="javascript:alert('link')"
>Allgemeine Nutzungsbedingungen und Betriebsbestimmungen der
Bundes Geodaten-Infrastruktur BGDI</a
>
</li>
<li><a href="javascript:alert('link')">Suchdienst CSW</a></li>
<li>
<a href="javascript:alert('link')"
>Konformitätsprüfung Geobasisdienste nach eCH-0056</a
>
</li>
<li><a href="javascript:alert('link')">INSPIRE Dienste</a></li>
</ul>
</nav>
<MetaNavigationMobile />
<TopBarNavigation :isMobileMenu="true" />
</div>
Expand All @@ -193,22 +204,28 @@
id="mobile-menu-v2__level-3"
class="mobile-menu-v2__level mobile-menu-v2__level-3"
>
<ul class="mobile-menu-v2-navigation">
<li>
<a href="javascript:alert('link')">Überblick</a>
</li>
<li>
<a href="javascript:alert('link')" aria-current="page">
Web Map Services
</a>
</li>
<li><a href="javascript:alert('link')">Web tiling Services</a></li>
<li><a href="javascript:alert('link')">Vector Tiles Service</a></li>
<li>
<a href="javascript:alert('link')">Web Integration: iFrame</a>
</li>
<li><a href="javascript:alert('link')">FAQ API</a></li>
</ul>
<nav aria-label="Main">
<ul class="mobile-menu-v2-navigation">
<li>
<a href="javascript:alert('link')">Überblick</a>
</li>
<li>
<a href="javascript:alert('link')" aria-current="page">
Web Map Services
</a>
</li>
<li>
<a href="javascript:alert('link')">Web tiling Services</a>
</li>
<li>
<a href="javascript:alert('link')">Vector Tiles Service</a>
</li>
<li>
<a href="javascript:alert('link')">Web Integration: iFrame</a>
</li>
<li><a href="javascript:alert('link')">FAQ API</a></li>
</ul>
</nav>
<MetaNavigationMobile />
<TopBarNavigation :isMobileMenu="true" />
</div>
Expand All @@ -225,7 +242,7 @@ import CarouselNavigation from '../navigations/CarouselNavigation.vue'
import MetaNavigationMobile from '../navigations/MobileMetaNavigation.vue'
import TopBarNavigation from '../navigations/TopBarNavigation.vue'
import { v4 as uuidv4 } from 'uuid'
import { reactive, ref, watch, onMounted, nextTick } from 'vue'
import { reactive, ref, onMounted, nextTick } from 'vue'
const carouselNavId = ref('')
const useStickyPlaceholder = ref(false)
Expand All @@ -237,7 +254,6 @@ const menuTitles = reactive([
'Geodienste',
'Darstellungsdienste',
])
const canNavigateBack = ref(true)
const props = defineProps({
isSticky: {
Expand All @@ -248,10 +264,6 @@ const props = defineProps({
type: Boolean,
default: () => false,
},
isOpen: {
type: Boolean,
default: () => false,
},
})
const handleHeaderPlaceholder = function () {
Expand All @@ -272,12 +284,6 @@ const scrollToTop = function () {
}
const showLevel = async function (level: number) {
if (level === 0) {
canNavigateBack.value = false
} else {
canNavigateBack.value = true
}
currentLevel.value = level
document.body.classList.remove(
'show-level-0',
Expand Down Expand Up @@ -332,13 +338,6 @@ const handleScroll = function () {
}
}
watch(
() => props.isOpen,
() => {
if (props.isOpen) scrollToTop()
},
)
onMounted(() => {
if (props.isSticky) {
window.addEventListener('scroll', handleScroll)
Expand Down
Loading

0 comments on commit 60b1927

Please sign in to comment.