klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-03 13:19:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Dynamically generate navigation menu based on user info from server

Browse Source
This commit is contained in:
Debanjum Singh Solanky
2024-04-07 20:58:43 +05:30
parent 94c69eb8e3
commit 8ff3890ba8
7 changed files with 199 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/interface/desktop/utils.js
View File

@@ -24,3 +24,56 @@ window.appInfoAPI.getInfo((_, info) => {
khojTitleElement.innerHTML = '<b>Khoj for ' + (info.platform === 'win32' ? 'Windows' : info.platform === 'darwin' ? 'macOS' : 'Linux') + '</b>';
}
});
function toggleNavMenu() {
let menu = document.getElementById("khoj-nav-menu");
menu.classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
document.addEventListener('click', function(event) {
let menu = document.getElementById("khoj-nav-menu");
let menuContainer = document.getElementById("khoj-nav-menu-container");
let isClickOnMenu = menuContainer.contains(event.target) || menuContainer === event.target;
if (isClickOnMenu === false && menu.classList.contains("show")) {
menu.classList.remove("show");
}
});
async function populateHeaderPane() {
let userInfo = null;
try {
userInfo = await window.userInfoAPI.getUserInfo();
} catch (error) {
console.log("User not logged in");
}
let username = userInfo?.username ?? "?";
let user_photo = userInfo?.photo;
let is_active = userInfo?.is_active;
let has_documents = userInfo?.has_documents;
// Populate the header element with the navigation pane
return `
<a class="khoj-logo" href="/">
<img class="khoj-logo" src="./assets/icons/khoj-logo-sideways-500.png" alt="Khoj"></img>
</a>
<nav class="khoj-nav">
<a id="chat-nav" class="khoj-nav" href="./chat.html">💬 <span class="khoj-nav-item-text">Chat</span></a>
${has_documents ? '<a id="search-nav" class="khoj-nav" href="./search.html">🔎 <span class="khoj-nav-item-text">Search</span></a>' : ''}
${username ? `
<div id="khoj-nav-menu-container" class="khoj-nav dropdown">
${user_photo && user_photo != "None" ? `
<img id="profile-picture" class="${is_active ? 'circle subscribed' : 'circle'}" src="${user_photo}" alt="${username[0].toUpperCase()}" referrerpolicy="no-referrer">
` : `
<div id="profile-picture" class="${is_active ? 'circle user-initial subscribed' : 'circle user-initial'}" alt="${username[0].toUpperCase()}">${username[0].toUpperCase()}</div>
`}
<div id="khoj-nav-menu" class="khoj-nav-dropdown-content">
<div class="khoj-nav-username"> ${username} </div>
<a id="settings-nav" class="khoj-nav" href="./config.html">⚙️ Settings</a>
</div>
</div>
` : ''}
</nav>
`;
}