Files
speckle-server/packages/frontend-2/components/header/NavBar.vue
T

72 lines
2.2 KiB
Vue

<template>
<div>
<nav class="fixed z-40 top-0 h-12 bg-foundation border-b border-outline-2">
<div class="flex gap-4 items-center justify-between h-full w-screen py-4 px-3">
<div class="hidden lg:block">
<HeaderWorkspaceSwitcher v-if="showWorkspaceSwitcher" />
<HeaderLogoBlock
v-else
:active="false"
to="/"
class="hidden lg:flex lg:min-w-40"
/>
</div>
<div class="flex items-center truncate">
<ClientOnly>
<PortalTarget name="mobile-navigation"></PortalTarget>
</ClientOnly>
<ClientOnly>
<PortalTarget name="navigation"></PortalTarget>
</ClientOnly>
</div>
<div class="flex items-center justify-end gap-2.5 sm:gap-2 lg:min-w-40">
<ClientOnly>
<PortalTarget name="secondary-actions"></PortalTarget>
<PortalTarget name="primary-actions"></PortalTarget>
</ClientOnly>
<div class="flex justify-end">
<FormButton
v-if="!activeUser"
:to="loginUrl.fullPath"
color="outline"
class="hidden md:flex"
>
Sign in
</FormButton>
<!-- Profile dropdown -->
<HeaderNavUserMenu :login-url="loginUrl" />
</div>
</div>
</div>
</nav>
<PopupsSignIn v-if="!activeUser" />
</div>
</template>
<script setup lang="ts">
import { useActiveUser } from '~~/lib/auth/composables/activeUser'
import { loginRoute } from '~~/lib/common/helpers/route'
import type { Optional } from '@speckle/shared'
const isWorkspacesEnabled = useIsWorkspacesEnabled()
const isWorkspaceNewPlansEnabled = useWorkspaceNewPlansEnabled()
const { activeUser } = useActiveUser()
const route = useRoute()
const router = useRouter()
const token = computed(() => route.query.token as Optional<string>)
const loginUrl = computed(() =>
router.resolve({
path: loginRoute,
query: {
token: token.value || undefined
}
})
)
const showWorkspaceSwitcher = computed(
() =>
isWorkspacesEnabled.value && isWorkspaceNewPlansEnabled.value && activeUser.value
)
</script>