Skip to content

Commit 06678bd

Browse files
NEStockNEStock
committed
Add ability to have dropdowns from navbar tab. Move Documentation to GettingStarted dropdown
1 parent d42c9a7 commit 06678bd

File tree

4 files changed

+112
-32
lines changed

4 files changed

+112
-32
lines changed

‎frontend/src/constants/mainLayout.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { Tab } from 'src/models/mainLayout';
2+
3+
export const defaultTabs: Tab[] = [
4+
{ name: 'Projects', route: '/projects', external: false },
5+
{ name: 'Data', route: 'https://dandi.emberarchive.org/', external: true },
6+
{
7+
name: 'Getting Started',
8+
route: '/getting-started',
9+
external: false,
10+
dropdown: {
11+
show: false,
12+
children: [
13+
{name: 'Documentation', route: '/documentation', external: false },
14+
],
15+
},
16+
},
17+
{ name: 'Tools', route: '/tools', external: false },
18+
{ name: 'Metadata', route: '/metadata', external: false },
19+
{ name: 'About', route: '/about', external: false },
20+
];

‎frontend/src/layouts/MainLayout.vue‎

Lines changed: 85 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<q-layout view="lHh Lpr lFf">
3-
<q-header elevated class="bg-white" :class="$q.screen.gt.xs ? 'q-px-xl' : ''">
3+
<q-header elevated class="bg-white" :class="$q.screen.gt.sm ? 'q-px-xl' : ''">
44
<q-toolbar class="text-primary row items-stretch">
55
<q-btn
66
to="/"
@@ -11,30 +11,80 @@
1111
icon-right="img:ember-logo.png"
1212
/>
1313
<q-space />
14-
<q-tabs v-if="$q.screen.gt.xs" class="row items-stretch">
15-
<q-btn
16-
v-for="tab in tabs"
17-
:key="tab.name"
18-
:label="tab.name"
19-
:to="tab.route"
20-
:href="tab.external ? tab.route : undefined"
21-
:target="tab.external ? '_blank' : undefined"
22-
flat
23-
class="full-height"
24-
>
25-
<q-icon v-if="tab.external" class="q-ml-sm" size="xs" name="launch" />
26-
</q-btn>
14+
<!-- Large screens: display tabs acorss the top -->
15+
<q-tabs v-if="$q.screen.gt.sm" class="row items-stretch">
16+
<div v-for="tab in tabs" :key="tab.name" class="full-height">
17+
<q-route-tab
18+
:label="tab.name"
19+
:to="tab.external ? undefined : tab.route"
20+
:href="tab.external ? tab.route : undefined"
21+
:target="tab.external ? '_blank' : undefined"
22+
@mouseenter="() => {if (tab.dropdown) tab.dropdown.show = true}"
23+
flat
24+
class="full-height"
25+
>
26+
<q-icon v-if="tab.external" class="q-ml-sm" size="xs" name="launch" />
27+
<q-menu
28+
v-if="tab.dropdown"
29+
v-model="tab.dropdown.show"
30+
fit
31+
auto-close
32+
anchor="bottom middle"
33+
self="top middle"
34+
@mouseleave="() => {if (tab.dropdown) tab.dropdown.show = false}"
35+
>
36+
<q-list>
37+
<q-item
38+
v-for="subtab in tab.dropdown.children"
39+
:key="subtab.name"
40+
:to="subtab.route"
41+
:href="subtab.external ? subtab.route : undefined"
42+
:target="subtab.external ? '_blank' : undefined"
43+
class="text-primary items-center"
44+
>
45+
{{ subtab.name }}
46+
</q-item>
47+
</q-list>
48+
</q-menu>
49+
</q-route-tab>
50+
</div>
2751
</q-tabs>
28-
<q-btn-dropdown v-if="$q.screen.lt.sm" auto-close stretch flat label="Menu">
52+
<!-- Small Screens: display tabs in a menu dropdown -->
53+
<q-btn-dropdown v-if="$q.screen.lt.md" auto-close stretch flat label="Menu">
2954
<q-list>
3055
<q-item
3156
v-for="tab in tabs"
3257
:key="tab.name"
33-
:to="tab.route"
58+
:to="tab.external ? undefined : tab.route"
59+
:href="tab.external ? tab.route : undefined"
60+
@mouseenter="() => {if (tab.dropdown) tab.dropdown.show = true}"
3461
clickable
35-
class="toolbar-link"
62+
class="toolbar-link items-center"
3663
>
37-
<q-item-section>{{ tab.name }}</q-item-section>
64+
{{ tab.name }}
65+
<q-icon v-if="tab.external" class="q-ml-sm" size="xs" name="launch" />
66+
<q-menu
67+
v-if="tab.dropdown"
68+
v-model="tab.dropdown.show"
69+
fit
70+
auto-close
71+
anchor="center left"
72+
self="center right"
73+
@mouseleave="() => {if (tab.dropdown) tab.dropdown.show = false}"
74+
>
75+
<q-list>
76+
<q-item
77+
v-for="subtab in tab.dropdown.children"
78+
:key="subtab.name"
79+
:to="subtab.route"
80+
:href="subtab.external ? subtab.route : undefined"
81+
:target="subtab.external ? '_blank' : undefined"
82+
class="text-primary items-center"
83+
>
84+
{{ subtab.name }}
85+
</q-item>
86+
</q-list>
87+
</q-menu>
3888
</q-item>
3989
</q-list>
4090
</q-btn-dropdown>
@@ -66,21 +116,28 @@
66116
</template>
67117

68118
<script setup lang="ts">
119+
import { defaultTabs } from 'src/constants/mainLayout';
69120
import { Tab } from 'src/models/mainLayout';
121+
import { ref } from 'vue';
70122
71-
const tabs: Tab[] = [
72-
{ name: 'Projects', route: '/projects' },
73-
{ name: 'Data', route: 'https://dandi.emberarchive.org/', external: true },
74-
{ name: 'Documentation', route: '/documentation' },
75-
{ name: 'Getting Started', route: '/getting-started' },
76-
{ name: 'Tools', route: '/tools' },
77-
{ name: 'Metadata', route: '/metadata' },
78-
{ name: 'About', route: '/about' },
79-
];
123+
const tabs = ref<Tab[]>(defaultTabs);
80124
</script>
81125

82-
<style>
126+
<style lang="scss">
83127
.q-icon > img {
84128
width: auto;
85129
}
130+
131+
.q-tab__content {
132+
flex-direction: row;
133+
flex-wrap: nowrap;
134+
}
135+
136+
.bg-primary-opacity-15 {
137+
background-color: rgba($primary, 0.15);
138+
}
139+
140+
.q-list > .q-item {
141+
font-size: 0.9rem;
142+
}
86143
</style>

‎frontend/src/models/mainLayout.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
export interface Tab {
22
name: string;
33
route: string;
4-
external?: boolean;
4+
external: boolean;
5+
dropdown?: Dropdown;
6+
}
7+
8+
export interface Dropdown {
9+
show: boolean;
10+
children: Tab[];
511
}

‎frontend/src/pages/AboutPage.vue‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,6 @@
44
<div class="q-mx-xl">
55
<q-card flat class="q-mt-lg">
66
<q-card-section>
7-
<!-- <p>We are a team of research scientists and engineers who...</p> -->
8-
<!-- TODO -->
9-
107
<p>
118
In September 2024, our team at the
129
<LinkText :link="links.jhuapl" />

0 commit comments

Comments
 (0)