I #5: Add "showForLoggedIn" flag for navigation elements #6

Merged
Aelita4 merged 1 commits from 5_dont_show_login into main 2023-11-17 10:59:30 +00:00
1 changed files with 17 additions and 7 deletions
Showing only changes of commit 9950c5458b - Show all commits

View File

@ -8,6 +8,7 @@ interface NavElement {
title: string; title: string;
type: "simple" | "dropdown"; type: "simple" | "dropdown";
url: string; url: string;
showForLoggedIn: boolean;
dropdowns?: Array<NavElement>; dropdowns?: Array<NavElement>;
} }
@ -16,40 +17,49 @@ const lang = await getLocales(getHighestWeightedLanguage(Astro.request.headers.g
const listOfElements: Array<NavElement> = [{ const listOfElements: Array<NavElement> = [{
title: lang["Link_home"], title: lang["Link_home"],
type: "simple", type: "simple",
url: "/" url: "/",
showForLoggedIn: true
}, { }, {
title: lang["Link_login"], title: lang["Link_login"],
type: "simple", type: "simple",
url: "/login" url: "/login",
showForLoggedIn: false
}, { }, {
title: lang["Link_register"], title: lang["Link_register"],
type: "simple", type: "simple",
url: "/register" url: "/register",
showForLoggedIn: false
},{ },{
title: lang["Link_dropdown"], title: lang["Link_dropdown"],
type: "dropdown", type: "dropdown",
url: "about:blank", url: "about:blank",
showForLoggedIn: true,
dropdowns: [{ dropdowns: [{
title: "drop1", title: "drop1",
type: "simple", type: "simple",
url: "aaa" url: "aaa",
showForLoggedIn: true
}, { }, {
title: "drop2", title: "drop2",
type: "simple", type: "simple",
url: "aaa" url: "aaa",
showForLoggedIn: true
}, { }, {
title: "drop3", title: "drop3",
type: "simple", type: "simple",
url: "aaa" url: "aaa",
showForLoggedIn: true
}] }]
}]; }];
const { loggedIn } = Astro.props; const { loggedIn } = Astro.props;
const filteredList = listOfElements.filter(element => (element.showForLoggedIn && loggedIn === "true") || loggedIn === "false");
--- ---
<nav> <nav>
<ul> <ul>
{listOfElements.map(element => {filteredList.map(element =>
element.type === "dropdown" ? element.type === "dropdown" ?
<div class="nav-item nav-item-dropdown"> <div class="nav-item nav-item-dropdown">
<li><a href={element.url} class="nav-url">{element.title}</a></li> <li><a href={element.url} class="nav-url">{element.title}</a></li>