Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI
Light
Dark
System
Ask  Question

Side Menu is hidden when opened main page at first time ASP.NET WebForms


Hello Support,
I attach new theme to my application. built with ASP.NET Webforms. the sidebar menu is hidden when open the page at first time.

see video please:
https://www.youtube.com/watch?v=WZOLQ2397qM

I test it in real host as you see in the video above.

Could you tell me if there's maybe javascript function to refresh menu at first time or something?

I use latest Metronic 8.2.8 version (Demo1)

my full <script>tag is :

<script>
 window.__bootstrap = { Tooltip: bootstrap.Tooltip };

 $(document).ready(function () {
 // do stuff here.
 $.fn.bootstrapBtn = $.fn.button.noConflict(); // fix conflict between jquery ui and Bootstrap

 // activate current opened menu-item
 // Get the current page"s pathname (path only, without the domain and protocol)
 var currentUrl = window.location.pathname;
 if (currentUrl == "/") {
 currentUrl = "/Default.aspx";
 }
 // Find the first .menu-link whose href matches the current URL
 var firstLinkWithHref = $(".app-sidebar-menu .menu-link").filter(function () {
 var linkUrl = $(this).attr("href");
 var linkListUrl = $(this).attr("data-href-list");

 if (linkListUrl == null || linkListUrl.trim() == "") {
 // Hide List Breadcrumb
 $("#linkList").parent().hide();
 }
 else {
 // Change href to data-href-list to allow visit list screen first.
 // KAMAL LATER
 }

 // If the link has a valid href and it matches the current URL, return true
 return linkUrl && (linkUrl === currentUrl || linkListUrl == currentUrl);
 }).first(); // Get the first matching link

 // If we found a matching link
 if (firstLinkWithHref.length > 0) {
 // Add the "active" class to the matched link
 firstLinkWithHref.addClass("active");

 // Traverse to the parent .menu-item
 var parentMenuItem = firstLinkWithHref.parents(".menu-item").first(); // skip first .menu-item as this (for <a>)
 var parentModuleSubMenuItem = parentMenuItem.parents(".menu-item").first();
 var parentModuleMenuItem = parentModuleSubMenuItem.parents(".menu-item").first();

 parentModuleSubMenuItem.addClass("here show");
 parentModuleMenuItem.addClass("here show");
 }

 var json = "<%=Newtonsoft.Json.JsonConvert.SerializeObject(ExaCloud.FExaAccounts.CurrentTheme)%>";
 const theme = JSON.parse(json);
 ApplyTheme(theme);

 // Keep Session Alive 
 setInterval(function () {
 fetch("/KeepSessionAlive.aspx")
 .then(response => console.log("Session refreshed!"))
 .catch(error => console.error("Error keeping session alive:", error));
 }, 19 * 60 * 1000); // Ping every 19 minutes

 <% if (ExaCloud.FExaAccounts.UserLang == 2)
 { %> 
 setRtlMode();
 <% }
 else
 { %>
 setLtrMode();
 <% } %>
 });

 function ChangeLogo() {
 var logoBig = document.getElementById("logoBig");
 var themeColor = $("body").attr("data-kt-app-layout");
 if (themeColor == "light-sidebar")
 $(logoBig).attr("src", "/logos/default-white.png");
 else
 $(logoBig).attr("src", "/logos/default-dark.png");
 }
 function openReportDialog(reportPath, reportSelection) {
 const url = "/Report.aspx?reportPath=" + reportPath + "&reportSelection=" + reportSelection;
 window.open(url, "_blank");
 }
 function MessageBox(message, title, bsMessageColor) {
 if (!title) title = "Alert";
 if (!message) message = "No Message to Display.";
 if (!bsMessageColor) bsMessageColor = "primary";
 message = message.replace(/\n/g, "<br>");

 // Check if a modal is already open, prevent opening a new one
 if ($("#customModal").length > 0 && $("#customModal").hasClass("show")) {
 return; // Modal is already open, do nothing
 }

 // Check if bsMessageColor needs dark text
 let textClass = (bsMessageColor === "secondary" || bsMessageColor === "light") ? "" : "text-white";
 let buttonStyle = (bsMessageColor === "secondary" || bsMessageColor === "light") ? "" : "";

 $("body").append(`
 <div class="modal fade" id="customModal" tabindex="-1" aria-labelledby="modalTitle">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header bg-${bsMessageColor}">
 <h5 class="modal-title ${textClass}">${title}</h5>
 <button type="button" class="btn-close" ${buttonStyle} data-bs-dismiss="modal"></button>
 </div>
 <div class="modal-body">${message}</div>
 <div class="modal-footer">
 <button type="button" class="btn btn-${bsMessageColor}" data-bs-dismiss="modal">OK</button>
 </div>
 </div>
 </div>
 </div>
 `);

 var modalElement = document.getElementById("customModal");
 var modal = new bootstrap.Modal(modalElement);

 // Remove modal from DOM after it is closed
 modalElement.addEventListener("hidden.bs.modal", function () {
 modalElement.remove();
 });
 modal.show();
 }
 function CallThemeLight() {
 ResetMenuColor();
 cbGeneral.PerformCallback("Theme|light-sidebar");
 }
 function CallThemeDark() {
 ResetMenuColor();
 cbGeneral.PerformCallback("Theme|dark-sidebar");
 }
 function OpenWindow(url, width = 1024, height = 650) {
 window.open(url, "_blank", "width=" + width + ",height=" + height + ",scrollbars=yes,resizable=yes,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0");
 }
 function ChangeMenuColor(menuBackColor, menuForeColor, menuActiveColor, menuScrollbarColor) {
 $("[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-title").attr("style", "color:" + menuForeColor);
 $("[data-kt-app-layout=dark-sidebar] .app-sidebar").attr("style", "background-color:" + menuBackColor);
 $("[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-bullet .bullet").attr("style", "background-color:" + menuForeColor);
 $("[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active").attr("style", "background-color:" + menuActiveColor);

 // Scrollbar only works via added <style> tag
 $("<style>")
 .prop("type", "text/css")
 .attr("id", "dynamic-scrollbar-style") // Add an ID to identify it
 .html("[data-kt-app-layout=dark-sidebar] .app-sidebar .scroll-y:hover, [data-kt-app-layout=dark-sidebar] .app-sidebar .hover-scroll-overlay-y:hover { scrollbar-color: " + menuScrollbarColor + " transparent; }")
 .appendTo("head");
 }
 function ResetMenuColor() {
 $("[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-title").attr("style", "");
 $("[data-kt-app-layout=dark-sidebar] .app-sidebar").attr("style", "");
 $("[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-bullet .bullet").attr("style", "");
 $("[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active").attr("style", "");
 $("#dynamic-scrollbar-style").remove();
 }
 function ChangeTheme(name) {
 cbGeneral.PerformCallback("Theme|" + name);
 }
 function ApplyTheme(Theme) {
 $("body").attr("data-kt-app-layout", Theme.MetronicLayout);
 ChangeLogo();
 if (Theme.Name != "dark-sidebar" && Theme.Name != "light-sidebar")
 ChangeMenuColor(Theme.MenuBackColor, Theme.MenuForeColor, Theme.MenuActiveColor, Theme.ScrollBarColor);
 }

 function setRtlMode() {
 var link1 = document.getElementById("maincss");
 link1?.setAttribute("href", "/assets/css/style.bundle.rtl.css");
 var link2 = document.getElementById("plugincss");
 link2?.setAttribute("href", "/assets/plugins/global/plugins.bundle.rtl.css");
 var link3 = document.getElementById("fontcss");
 link3.setAttribute("href", "https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap");
 document.documentElement.setAttribute("dir", "rtl");
 document.documentElement.setAttribute("direction", "rtl");
 document.documentElement.setAttribute("style", "direction:rtl");
 }
 function setLtrMode() {
 var link1 = document.getElementById("maincss");
 link1?.setAttribute("href", "/assets/css/style.bundle.css");
 var link2 = document.getElementById("plugincss");
 link2?.setAttribute("href", "/assets/plugins/global/plugins.bundle.css");
 var link3 = document.getElementById("fontcss");
 link3.setAttribute("href", "https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700");
 document.documentElement.removeAttribute("dir");
 document.documentElement.removeAttribute("direction");
 document.documentElement.removeAttribute("style");
 }
 </script>


user
Software Mohamed 6 days ago
Metronic Bootstrap 5
3 Answers
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)

user
Lauris Stepanovs Author2 days ago

Hi,

Thank you for reaching out to us.

By default, when you switch direction, the sidebar must be open.

Please make sure that you have data-kt-app-sidebar-minimize="on" attribute added on your body element.

You can only set the default direction in thememode.json to change the direction dynamically, you should store user user-selected mode somewhere on your server, and then, if the value is set, use this value in KTBootstrapBase.InitThemeMode().

Regards,
Lauris Stepanovs,
Keenthemes Support Team


user
Software Mohamed 2 days ago

Hi, Lauris Stepanovs
I use conditional rendering mechanism that is exist in webforms.
in <head> tag i do this.


<!-- Fonts -->
 <% if (ExaCloud.FExaAccounts.UserLang == 2)
 { %>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap" />
 <% }
 else
 { %>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700" />
 <% } %>

 <!-- Plugin Styles -->
 <% if (ExaCloud.FExaAccounts.UserLang == 2)
 { %>
 <link rel="stylesheet" href="/assets/plugins/global/plugins.bundle.rtl.css" />
 <% }
 else
 { %>
 <link rel="stylesheet" href="/assets/plugins/global/plugins.bundle.css" />
 <% } %>

 <!-- Main Style -->
 <% if (ExaCloud.FExaAccounts.UserLang == 2)
 { %>
 <link rel="stylesheet" href="/assets/css/style.bundle.rtl.css" />
 <% }
 else
 { %>
 <link rel="stylesheet" href="/assets/css/style.bundle.css" />
 <% } %>



after that i don't find any flickers or any issues with sidebar.
and when user change language i just refresh a whole page. window.location.reload();

It works great now...
So now I don't think I need KTBootstrapBase.InitThemeMode() alright??


user
Software Mohamed 6 days ago

Please note I use RTL version and LTR version both.
When app start if UserLang is AR then call SetRtlMode method and change stylesheet with rtl.css versions.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(