Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Header improvements #1431

Open
wants to merge 1 commit into
base: staging
Choose a base branch
from
+13 −17
Open

Header improvements #1431

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 13 additions & 17 deletions frontend/src/components/layout/Header.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,12 +130,12 @@ function isRecent(date: string): boolean {
</script>

<template>
<header class="background-default shadow-md">
<header>
<div v-if="useBackendData.announcements">
<Announcement v-for="(announcement, idx) in useBackendData.announcements" :key="idx" :announcement="announcement" />
</div>

<nav class="max-w-screen-xl mx-auto flex flex-wrap justify-end px-4 py-2 gap-3">
<div class="max-w-screen-xl mx-auto flex justify-between px-4 py-2">
<!-- Left side items -->
<div class="flex items-center gap-4">
<Popover v-slot="{ close, open }" class="relative">
Expand All @@ -148,7 +148,7 @@ function isRecent(date: string): boolean {
class="absolute top-10 z-10 w-max lt-sm:w-90vw background-default left-1/20 filter shadow-default rounded-r-md rounded-bl-md border-top-primary text-sm p-[20px]"
>
<p class="text-base font-semibold color-primary mb-3">Hangar</p>
<div class="grid grid-cols-2">
<nav class="grid grid-cols-2">
<NuxtLink
v-for="link in navBarMenuLinksHangar"
:key="link.label"
Expand All @@ -161,10 +161,10 @@ function isRecent(date: string): boolean {
<component :is="link.icon" class="mr-3 text-[1.2em]" />
{{ link.label }}
</NuxtLink>
</div>
</nav>

<p class="text-base font-semibold color-primary mb-3 mt-6">{{ t("nav.hangar.tools") }}</p>
<div class="grid grid-cols-2">
<nav class="grid grid-cols-2">
<NuxtLink
v-for="link in navBarMenuLinksTools"
:key="link.label"
Expand All @@ -177,10 +177,10 @@ function isRecent(date: string): boolean {
<component :is="link.icon" class="mr-3 text-[1.2em]" />
{{ link.label }}
</NuxtLink>
</div>
</nav>

<p class="text-base font-semibold color-primary mb-3 mt-6">{{ t("nav.hangar.moreFrom") }}</p>
<div class="grid grid-cols-2">
<nav class="grid grid-cols-2">
<a
v-for="link in navBarMenuLinksMoreFromPaper"
:key="link.label"
Expand All @@ -191,7 +191,7 @@ function isRecent(date: string): boolean {
<component :is="link.icon" class="mr-3 text-[1.2em]" />
{{ link.label }}
</a>
</div>
</nav>
</PopoverPanel>
</Popover>

Expand All @@ -201,7 +201,7 @@ function isRecent(date: string): boolean {
</NuxtLink>

<!-- Desktop links -->
<div class="gap-4 hidden sm:flex sm:items-center">
<nav class="gap-4 hidden sm:flex sm:items-center">
<NuxtLink
v-for="navBarLink in navBarLinks"
:key="navBarLink.label"
Expand All @@ -212,16 +212,13 @@ function isRecent(date: string): boolean {
>
{{ navBarLink.label }}
</NuxtLink>
</div>
</nav>
</div>

<!-- Gap between the sides -->
<div class="flex-grow-1" />

<!-- Right side items -->
<div class="flex items-center gap-2">
<div v-if="authStore.user" class="flex items-center lt-sm:hidden">
<DropdownButton :name="t('nav.new.title')" v-on="useTracking('nav-create-dropdwon')">
<DropdownButton :name="t('nav.new.title')" v-on="useTracking('nav-create-dropdown')">
<template #default="{ close }">
<DropdownItem to="/new" @click="close()" v-on="useTracking('nav-new')">{{ t("nav.new.project") }}</DropdownItem>
<DropdownItem to="/neworganization" @click="close()" v-on="useTracking('nav-new-org')">{{ t("nav.new.organization") }}</DropdownItem>
Expand Down Expand Up @@ -309,8 +306,7 @@ function isRecent(date: string): boolean {
</template>
</Popper>
</div>
</div>
<div class="flex items-center gap-2">

<!-- Profile dropdown -->
<div v-if="authStore.user">
<Popper placement="bottom-end">
Expand Down Expand Up @@ -376,7 +372,7 @@ function isRecent(date: string): boolean {
</NuxtLink>
</div>
</div>
</nav>
</div>
</header>
</template>

Expand Down
Loading