Skip to content

Commit

Permalink
[web] add dropdown navigation #999 (#1006)
Browse files Browse the repository at this point in the history 
added dropdown navigation
  • Loading branch information
@janavlachova
janavlachova authored Jan 21, 2024
1 parent 17e122f commit a6224b6
Show file tree
Hide file tree
Showing 5 changed files with 95 additions and 101 deletions.
11 changes: 5 additions & 6 deletions agdb_web/components/layout/MainHeader.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ const i18n = useI18n();
src="@/static/logo.svg"
alt="agdb logo"
class="logo"
width="80"
height="80"
width="70"
height="70"
/>
<span>agdb</span>
</NuxtLink>
Expand All @@ -25,12 +25,11 @@ const i18n = useI18n();
display: flex;
align-items: center;
justify-content: space-between;
// border-bottom: 1px solid var(--color-border);
top: 0;
left: 0;
right: 0;
box-shadow: 0 0 3px 0 var(--color-border);
padding-block: 0.5rem;
.page-container {
display: flex;
align-items: center;
Expand All @@ -44,8 +43,8 @@ const i18n = useI18n();
font-weight: 700;
img {
margin-right: 0.5rem;
width: 70px;
height: 70px;
width: 4rem;
height: 4rem;
}
}
}
Expand Down
83 changes: 83 additions & 0 deletions agdb_web/components/navigation/DropdownLinks.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
<script lang="ts" setup>
const props = defineProps({
name: {
type: String,
required: true,
},
});
const { getLocalePath, localeCode } = useI18n();
const query = queryContent(localeCode.value, props.name);
</script>

<template>
<div class="dropdown">
<CommonLinkItem class="dropdown-link" :name="props.name" />
<ContentNavigation v-slot="{ navigation }" :query="query">
<div
v-if="
(navigation.at(0)?.children?.at(0)?.children?.length ?? 0) >
1
"
class="dropdown-list"
>
<ul>
<template
v-for="link of navigation.at(0)?.children?.at(0)
?.children"
:key="link._path"
>
<li v-if="link.children?.length">
<NuxtLink
v-if="link.children?.length"
:to="getLocalePath(link._path)"
>{{ link.navTitle || link.title }}</NuxtLink
>
</li>
</template>
</ul>
</div>
</ContentNavigation>
</div>
</template>

<style lang="less" scoped>
.dropdown {
position: relative;
display: flex;
align-items: center;
justify-content: center;
.dropdown-link {
margin-right: 1rem;
font-size: 1.1rem;
}
.dropdown-list {
display: none;
position: absolute;
top: 100%;
z-index: 10;
ul {
list-style: none;
margin-top: 1rem;
background-color: var(--color-background);
border: 1px solid var(--color-border);
border-radius: 0.5rem;
padding: 1.3rem 2rem;
width: max-content;
li {
a {
font-weight: 300;
font-size: 1rem;
line-height: 2rem;
}
}
}
}
&:hover,
&:focus-within {
.dropdown-list {
display: block;
}
}
}
</style>
100 changes: 5 additions & 95 deletions agdb_web/components/navigation/HeaderLinks.vue
View file
Original file line number Diff line number Diff line change
@@ -1,103 +1,13 @@
<script lang="ts" setup>
// const { t, getLocalePath } = useI18n();
// const docsQuery = queryContent(localeCode.value, "docs");
// const apiQuery = queryContent(localeCode.value, "api");
// const enterpriseQuery = queryContent(localeCode.value, "enterprise");
// const blogQuery = queryContent(localeCode.value, "blog");
</script>
<script lang="ts" setup></script>

<template>
<nav class="header-links">
<CommonLinkItem :name="'docs'" />
<!-- <ContentNavigation v-slot="{ navigation }" :query="docsQuery">
<ul>
<template
v-for="link of navigation.at(0)?.children?.at(0)?.children"
:key="link._path"
>
<li v-if="link.children?.length">
<NuxtLink
v-if="link.children?.length"
:to="getLocalePath(link._path)"
>{{ link.navTitle || link.title }}</NuxtLink
>
</li>
</template>
</ul>
</ContentNavigation> -->
<CommonLinkItem :name="'api'" />
<!-- <ContentNavigation v-slot="{ navigation }" :query="apiQuery">
<ul>
<template
v-for="link of navigation.at(0)?.children?.at(0)?.children"
:key="link._path"
>
<li v-if="link.children?.length">
<NuxtLink
v-if="link.children?.length"
:to="getLocalePath(link._path)"
>{{ link.navTitle || link.title }}</NuxtLink
>
</li>
</template>
</ul>
</ContentNavigation> -->
<NavigationDropdownLinks :name="'docs'" />
<NavigationDropdownLinks :name="'api'" />

<CommonLinkItem :name="'enterprise'" />
<NavigationDropdownLinks :name="'enterprise'" />

<!-- <ContentNavigation v-slot="{ navigation }" :query="enterpriseQuery">
<ul>
<template
v-for="link of navigation.at(0)?.children?.at(0)?.children"
:key="link._path"
>
<li v-if="link.children?.length">
<NuxtLink
v-if="link.children?.length"
:to="getLocalePath(link._path)"
>{{ link.navTitle || link.title }}</NuxtLink
>
</li>
</template>
</ul>
</ContentNavigation> -->

<CommonLinkItem :name="'blog'" />
<!-- <ContentNavigation v-slot="{ navigation }" :query="blogQuery">
<ul>
<template
v-for="link of navigation.at(0)?.children?.at(0)?.children"
:key="link._path"
>
<li v-if="link.children?.length">
<NuxtLink
v-if="link.children?.length"
:to="getLocalePath(link._path)"
>{{ link.navTitle || link.title }}</NuxtLink
>
</li>
</template>
</ul>
</ContentNavigation> -->

<!-- <h3>Other:</h3>
<ul>
<li>
<NuxtLink :to="getLocalePath('/')">
{{ t("menu.home") }}
</NuxtLink>
</li>
<li>
<NuxtLink :to="getLocalePath(t('url.about'))">
{{ t("menu.about") }}
</NuxtLink>
</li>
<li>
<NuxtLink :to="getLocalePath(t('url.contact'))">
{{ t("menu.contact") }}
</NuxtLink>
</li>
</ul> -->
<NavigationDropdownLinks :name="'blog'" />
</nav>
</template>

Expand Down
1 change: 1 addition & 0 deletions agdb_web/locales/cs.json
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{
"url": {
"home": "/",
"about": "/o-agdb",
"contact": "/kontakt",
"docs": "/docs",
Expand Down
1 change: 1 addition & 0 deletions agdb_web/locales/en.json
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{
"url": {
"home": "/",
"about": "/about",
"contact": "/contact",
"docs": "/docs",
Expand Down

0 comments on commit a6224b6

Please sign in to comment.