/*
Step-by-Step Explanation of Header Section Rendering
This code dynamically renders the header section of the page based on the user's role, session status, and available actions (such as login, logout, or role-switching).
1. Define the `renderHeader` Function
* The `renderHeader` function is responsible for rendering the entire header based on the user's session, role, and whether they are logged in.
2. Select the Header Div
* The `headerDiv` variable retrieves the HTML element with the ID `header`, where the header content will be inserted.
```javascript
const headerDiv = document.getElementById("header");
```
3. Check if the Current Page is the Root Page
* The `window.location.pathname` is checked to see if the current page is the root (`/`). If true, the user's session data (role) is removed from `localStorage`, and the header is rendered without any user-specific elements (just the logo and site title).
```javascript
if (window.location.pathname.endsWith("/")) {
localStorage.removeItem("userRole");
headerDiv.innerHTML = `
`;
return;
}
```
4. Retrieve the User's Role and Token from LocalStorage
* The `role` (user role like admin, patient, doctor) and `token` (authentication token) are retrieved from `localStorage` to determine the user's current session.
```javascript
const role = localStorage.getItem("userRole");
const token = localStorage.getItem("token");
```
5. Initialize Header Content
* The `headerContent` variable is initialized with basic header HTML (logo section), to which additional elements will be added based on the user's role.
```javascript
let headerContent = `
Hospital CMS