Change css or html contents of sp-page-root from the header widget

[hamzaathar]

Hi,

I am trying to implement a sidebar. This sidebar needs to only be shown on certain pages (based url parameter id).

I need to make space by either adding padding to the page content or by injecting the sidebar html to the page content.

What is the way to achieve this?

Any help is appreciated.

[KKM]

Hi Hamzaathar,

You can achieve this dynamically using JavaScript to check the URL parameters and then either adjust padding or inject the sidebar into the page. Here's how you can do it:

1. Check for URL Parameter
Use JavaScript to detect the presence of an id parameter in the URL.

function getUrlParameter(name) {
const params = new URLSearchParams(window.location.search);
return params.get(name);
}

2. Inject Sidebar or Adjust Padding Dynamically
Modify the page layout based on the presence of the id parameter.

document.addEventListener("DOMContentLoaded", function () {
const id = getUrlParameter("id");
const content = document.getElementById("content"); // Your main content div
const sidebar = document.createElement("div");

if (id) {
sidebar.id = "sidebar";
sidebar.innerHTML = "<p>Sidebar Content for ID: " + id + "</p>";
sidebar.style.width = "250px";
sidebar.style.background = "#f4f4f4";
sidebar.style.padding = "15px";
sidebar.style.position = "fixed";
sidebar.style.left = "0";
sidebar.style.top = "0";
sidebar.style.height = "100%";

document.body.appendChild(sidebar);
content.style.marginLeft = "260px"; // Adjust the content area
}
});

3. Alternative: Inject Sidebar into Content Instead of Body
If you want the sidebar inside your main container rather than fixed on the side:

if (id) {
sidebar.style.float = "left";
sidebar.style.width = "250px";
content.style.marginLeft = "260px"; // Adjust content width
content.parentElement.insertBefore(sidebar, content);
}

4. CSS for Smooth Integration
Ensure your CSS supports this structure:

#content {
transition: margin-left 0.3s ease-in-out;
}

Summary
Check the id parameter to determine when to show the sidebar.
Dynamically create and insert the sidebar to avoid unnecessary elements.
Adjust padding/margins to prevent content overlap.

Kindly mark it as "Accepted Solution"/"helpful", as it resolves your query. Please press like button for the resolution provided.

With Regards,
Krishna Kumar M - Talk with AIT3ch
LinkedIn: https://www.linkedin.com/in/mkrishnak4/
YouTube: https://www.youtube.com/@KrishAIT3CH
Topmate: https://topmate.io/mkrishnak4 [ Connect for 1-1 Session]

[hamzaathar]

I don't think this will work with angular.