diff options
author | vnugent <public@vaughnnugent.com> | 2024-01-30 15:23:06 -0500 |
---|---|---|
committer | vnugent <public@vaughnnugent.com> | 2024-01-30 15:23:06 -0500 |
commit | 5abc489b9954111d66d1385aa62a3ea962fa0a55 (patch) | |
tree | b1715e5c5e6316f33e3e33fb55397d93200ab518 /front-end/src/bootstrap/components/Header.vue | |
parent | e4dc63ded324c6e9678603296953bb1f7dea7569 (diff) |
merge upstream. Add dynamic client-side support for optional oauth2 and social login methods
Diffstat (limited to 'front-end/src/bootstrap/components/Header.vue')
-rw-r--r-- | front-end/src/bootstrap/components/Header.vue | 164 |
1 files changed, 80 insertions, 84 deletions
diff --git a/front-end/src/bootstrap/components/Header.vue b/front-end/src/bootstrap/components/Header.vue index 43a805b..6093fdc 100644 --- a/front-end/src/bootstrap/components/Header.vue +++ b/front-end/src/bootstrap/components/Header.vue @@ -1,78 +1,4 @@ <!-- eslint-disable vue/max-attributes-per-line --> -<template> - <header class="sticky top-0 left-0 z-40"> - <div class="flex header-container"> - <div id="header-mobile-menu" ref="sideMenu" class="side-menu" :style="sideMenuStyle"> - <div class="pt-4 pl-4 pr-6"> - <nav id="header-mobile-nav" class="relative flex flex-col pr-3"> - <div v-for="route in routes" :key="route.path" class="m-auto ml-0"> - <div class="my-1" @click="closeSideMenu"> - <router-link :to="route"> - {{ route.name }} - </router-link> - </div> - </div> - </nav> - </div> - </div> - <div class="flex flex-row w-full md:mx-3"> - <div class="hidden w-4 lg:block" /> - <div class="flex px-4 my-auto text-xl md:hidden"> - <div v-if="!sideMenuActive" class="w-7" @click.prevent="openSideMenu"> - <fa-icon icon="bars" /> - </div> - <div v-else class="text-2xl w-7"> - <fa-icon icon="times" /> - </div> - </div> - <div id="site-title-container" class="flex m-0 mr-3"> - <div class="inline-block px-1"> - <slot name="site_logo" /> - </div> - <div id="site-title" class="inline-block m-auto mx-1"> - <router-link to="/"> - <h3>{{ siteTitle }}</h3> - </router-link> - </div> - </div> - <div class="hidden w-4 lg:block" /> - <nav id="header-desktop-nav" class="flex-row hidden mr-2 md:flex"> - <span v-for="route in routes" :key="route.fullPath" class="flex px-1 lg:px-3"> - <div v-if="!route.hide" class="m-auto"> - <router-link :to="route" class="flex-auto"> - {{ route.name }} - </router-link> - </div> - </span> - </nav> - <div id="user-menu" ref="userMenu" class="drop-controller" :class="{ 'hovered': userMenuHovered }"> - <div class="user-menu"> - Hello <span class="font-semibold">{{ uname }}</span> - </div> - <div ref="userDrop" class="absolute top-0 right-0 duration-100 ease-in-out" style="z-index:-1" :style="dropStyle"> - <div class="drop-menu" @click.prevent="userMenuHovered = false"> - <span class="space-x-2" /> - <a v-if="!loggedIn" href="#" data-header-dropdown="register" @click="gotoRoute('/register')"> - Register - </a> - <a v-else href="#" data-header-dropdown="account" @click="gotoRoute('/account')"> - Account - </a> - <a v-if="!loggedIn" href="#" data-header-dropdown="login" @click="gotoRoute('/login')"> - Login - </a> - <a v-else href="#" data-header-dropdown="logout" @click.prevent="OnLogout"> - Logout - </a> - </div> - </div> - </div> - <div class="hidden space-x-4 lg:block" /> - </div> - </div> - </header> -</template> - <script setup lang="ts"> import { debounce, find } from 'lodash-es' @@ -80,7 +6,7 @@ import { useElementSize, onClickOutside, useElementHover } from '@vueuse/core' import { computed, ref, toRefs } from 'vue' import { useEnvSize } from '@vnuge/vnlib.browser' import { RouteLocation, useRouter } from 'vue-router'; -import { storeToRefs } from 'pinia'; +import { storeToRefs } from 'pinia'; import { useStore } from '../../store'; const emit = defineEmits(['logout']) @@ -92,7 +18,6 @@ const { routes } = toRefs(props) const store = useStore(); const { loggedIn, siteTitle } = storeToRefs(store); - const { headerHeight } = useEnvSize() //Get the router for navigation @@ -132,7 +57,7 @@ const openSideMenu = debounce(() => sideMenuActive.value = true, 50) onClickOutside(sideMenu, closeSideMenu) //Redirect to the route when clicking on it -const gotoRoute = (route : string) =>{ +const gotoRoute = (route: string) => { //Get all routes from the router const allRoutes = router.getRoutes(); @@ -140,19 +65,90 @@ const gotoRoute = (route : string) =>{ //Try to find the route by its path const goto = find(allRoutes, { path: route }); - if(goto){ + if (goto) { //navigate to the route manually router.push(goto); } - else{ + else { //Fallback to full navigation window.location.assign(route); } } -const OnLogout = () =>{ - //Emit logout event - emit('logout') -} +//Emit logout event +const OnLogout = () => emit('logout') -</script>
\ No newline at end of file +</script> +<template> + <header class="sticky top-0 left-0 z-40"> + <div class="flex header-container"> + <div id="header-mobile-menu" ref="sideMenu" class="side-menu" :style="sideMenuStyle"> + <div class="pt-4 pl-4 pr-6"> + <nav id="header-mobile-nav" class="relative flex flex-col pr-3"> + <div v-for="route in routes" :key="route.path" class="m-auto ml-0"> + <div class="my-1" @click="closeSideMenu"> + <router-link :to="route"> + {{ route.name }} + </router-link> + </div> + </div> + </nav> + </div> + </div> + <div class="flex flex-row w-full md:mx-3"> + <div class="hidden w-4 lg:block" /> + <div class="flex px-4 my-auto text-xl md:hidden"> + <div v-if="!sideMenuActive" class="w-7" @click.prevent="openSideMenu"> + <fa-icon icon="bars" /> + </div> + <div v-else class="text-2xl w-7"> + <fa-icon icon="times" /> + </div> + </div> + <div id="site-title-container" class="flex m-0 mr-3"> + <div class="inline-block px-1"> + <slot name="site_logo" /> + </div> + <div id="site-title" class="inline-block m-auto mx-1"> + <router-link to="/"> + <h3>{{ siteTitle }}</h3> + </router-link> + </div> + </div> + <div class="hidden w-4 lg:block" /> + <nav id="header-desktop-nav" class="flex-row hidden mr-2 md:flex"> + <span v-for="route in routes" :key="route.fullPath" class="flex px-1 lg:px-3"> + <div v-if="!route.hide" class="m-auto"> + <router-link :to="route" class="flex-auto"> + {{ route.name }} + </router-link> + </div> + </span> + </nav> + <div id="user-menu" ref="userMenu" class="drop-controller" :class="{ 'hovered': userMenuHovered }"> + <div class="user-menu"> + Hello <span class="font-semibold">{{ uname }}</span> + </div> + <div ref="userDrop" class="absolute top-0 right-0 duration-100 ease-in-out" style="z-index:-1" :style="dropStyle"> + <div class="drop-menu" @click.prevent="userMenuHovered = false"> + <span class="space-x-2" /> + <a v-if="!loggedIn" href="#" data-header-dropdown="register" @click="gotoRoute('/register')"> + Register + </a> + <a v-else href="#" data-header-dropdown="account" @click="gotoRoute('/account')"> + Account + </a> + <a v-if="!loggedIn" href="#" data-header-dropdown="login" @click="gotoRoute('/login')"> + Login + </a> + <a v-else href="#" data-header-dropdown="logout" @click.prevent="OnLogout"> + Logout + </a> + </div> + </div> + </div> + <div class="hidden space-x-4 lg:block" /> + </div> + </div> + </header> +</template> |