[RELEASE] AdminLTE v4 beta3

[danny007in]

(Beta)-Release is online, you can install it with npm install admin-lte@latest or npm install [email protected].

Online https://adminlte-v4.netlify.app

Check https://github.com/ColorlibHQ/AdminLTE

Install npm i for this you need Node,js

to build npm run production

to run npm run dev
then open go to http://localhost:3000/

then give some idea, or contribute 👍🏼

[tacman]

Wahoo! Very exciting.

Obviously, lots more to do (login pages, right hand sidebar, etc.), but great to see that this is starting.

It appears to me that the BS5 changes from BS4 are not as significant as the BS3 to BS4 changes, dropping jquery of course is a big one. And changes to the data attributes to include -bs.

Do you think that getting the demo to work is going to be mostly HTML to change to support bs5, or changes to the AdminLTE CSS and JS files?

[Root3287]

Do we have to compile using npm? Will there be compiled CSS/JS in the future?

[danny007in]

Do we have to compile using npm? Will there be compiled CSS/JS in the future?

Same as AdminLTE v3

[MGatner]

Thanks @REJack. I will build myself and see where I can hop in. Do you have any plans to make version 3 compatible with Bootstrap 5? Or is it 3.x => BS4, 4.x => BS5?

[REJack]

v3 will stuck on BS4

[tacman]

v3 will stuck on BS4

Great, too messy, especially without jQuery.

[MGatner]

In case it is helpful to anyone else I will be maintaining a distribution repo for version 4 until there is an official release: https://github.com/MGatner/adminlte4

[danny007in]

Just Released adminlte-4.0.0-beta2

[danny007in]

in next release i have decided to release compiled dist folder also any suggestions

[dereuromark]

Is there any chance that layout-navbar-fixed and a fixed top navbar remains?
Coming from v3 this seems to be lost now.

[danny007in]

Is there any chance that layout-navbar-fixed and a fixed top navbar remains? Coming from v3 this seems to be lost now.

#5681 (comment)

[semanticfire]

First, delighted to see this moving!

I've started migrating one of my projects to 4.0.0-beta2 today, and I'm happy so far, good job!

I use my own theme colors and after some tweaking and updating I got this (#2687) method working on the new build system.
The documentation needs an update. This seems related to one of the tasks of #4885, how can I help with that?

[ErikThiart]

First, delighted to see this moving!

I've started migrating one of my projects to 4.0.0-beta2 today, and I'm happy so far, good job!

I use my own theme colors and after some tweaking and updating I got this (#2687) method working on the new build system. The documentation needs an update. This seems related to one of the tasks of #4885, how can I help with that?

Is there a CDN available?

[henry5059]

Hello, I am working with AdminLte 4.0.0-beta2 in vuejs 3.5. But I have a problem when loading the Adminlte scripts, since the sidebar toggle does not work, for example. Can you explain to me if I'm doing something wrong or what?

This would be the reference source code.
`import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap-icons/font/bootstrap-icons.css';
import 'admin-lte/dist/css/adminlte.min.css';

import 'bootstrap'
import 'admin-lte'

That is when installing the package: npm i admin-lte

`

[danny007in]

In AdminLTE v4 Beta 3, we plan to include the compiled dist folder based on valuable feedback received. Do you have any suggestions?

[burdittw]

I am hoping that once it is out, in an easily usable format that people feel comfortable using then we can start getting some good feedback. But to be honest I feel like a lot of the base for this template have moved on due to how long it has taken to come out. I hope I am wrong but based on the comments over the last few years I think it has lost some people. I hope we can bring them back, but time will tell. The hard part with anything technical is that it all moves so fast, and even more so now these days. This project needs more contributors to keep it moving at the speed of technology.

Can't wait for some of the releases to be put out and start seeing some feedback from users. It has been a while since I brought any changes into my project using it as I added custom code to handle things I specifically needed and will have to go back and try and remember what all that was. Don't look forward to that and really don't have time to do it as I have to get the product release in a few months.

[henry5059]

In AdminLTE v4 Beta 3, we plan to include the compiled dist folder based on valuable feedback received. Do you have any suggestions?

Not at the moment. But thank you very much.

[henry5059]

I am hoping that once it is out, in an easily usable format that people feel comfortable using then we can start getting some good feedback. But to be honest I feel like a lot of the base for this template have moved on due to how long it has taken to come out. I hope I am wrong but based on the comments over the last few years I think it has lost some people. I hope we can bring them back, but time will tell. The hard part with anything technical is that it all moves so fast, and even more so now these days. This project needs more contributors to keep it moving at the speed of technology.

Can't wait for some of the releases to be put out and start seeing some feedback from users. It has been a while since I brought any changes into my project using it as I added custom code to handle things I specifically needed and will have to go back and try and remember what all that was. Don't look forward to that and really don't have time to do it as I have to get the product release in a few months.

Ok. Thank you verymuch.

[danny007in]

In AdminLTE v4 Beta 3, we plan to include the compiled dist folder based on valuable feedback received. Do you have any suggestions?

Release Please Test and Give Feedback

[burdittw]

The only thing that I have ran into, that has really been there the whole time is that side bar state is not remembered. So if I CTRL-R to refresh the page and the sidebar was not showing after the refresh it will be showing again. It will also show again if I change the size of the browser window. Pretty much anything that makes the page refresh/redraw will load the page like it is new and the sidebar will be showing again. I would think that we could use a tag in the local browser storage to save the sidebar state and read it on page load so that it loads the last state. This would also work when a user returns to the site even after the browser is closed. When they come back the state would be in the browser storage to be read and boom the state the user last had it as would be recognized and displayed accordingly. Maybe I am the only one that wants this feature?

[burdittw]

When following the instructions to build the site and test there are a lot of DEPRECATION WARNING [import] for Dart Sass 3.0.0. Looks like a lot of the @import "bootstrap/scss/functions"; lines of code are generating them. The full warning is below:

DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

[burdittw]

When you click the full-screen button to go to full-screen and then hit the ESC key to return to normal screen the button icon does not change back to full-screen mode, it stays on the shrink icon.

[semanticfire]

The version 3.x.x branches contains a folder plugins with all the plugins that are used by AdminLTE, is there a reason these are not distributed anymore in v4.x.x ?

[snipe]

The only thing that I have ran into, that has really been there the whole time is that side bar state is not remembered.

We've run into this too. In v2, we built in a cookie onclick to store the state.

We're still on a much older version of AdminLTE as well, and we also quite miss the hover menus in the collapsed state like there was in v2. Our project needs a lot of screen real estate, so our users tend to prefer the ability to collapse the menu partially, so just the mini-sidebar exists, with just the section menu expanding on hover. I didn't happen to see if that was still available in v4, perhaps based on class change:

Thanks so much for continuing to work on this great project!

[ajiho]

@semanticfire Because which plugins usually take up a lot of space, and cleaning up excess files is also a tedious and wide-ranging task, CDN is used in v4 to introduce and demonstrate demos

[ajiho]

When following the instructions to build the site and test there are a lot of DEPRECATION WARNING [import] for Dart Sass 3.0.0. Looks like a lot of the @import "bootstrap/scss/functions"; lines of code are generating them. The full warning is below:

DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
Just ignore them, these things should be done by the upstream bootstrap

[semanticfire]

@semanticfire Because which plugins usually take up a lot of space, and cleaning up excess files is also a tedious and wide-ranging task, CDN is used in v4 to introduce and demonstrate demos

in other words, I need to manually include them, or copy the process in the v3 build for my own project.

[umer936]

The only thing that I have ran into, that has really been there the whole time is that side bar state is not remembered. So if I CTRL-R to refresh the page and the sidebar was not showing after the refresh it will be showing again. It will also show again if I change the size of the browser window. Pretty much anything that makes the page refresh/redraw will load the page like it is new and the sidebar will be showing again. I would think that we could use a tag in the local browser storage to save the sidebar state and read it on page load so that it loads the last state. This would also work when a user returns to the site even after the browser is closed. When they come back the state would be in the browser storage to be read and boom the state the user last had it as would be recognized and displayed accordingly. Maybe I am the only one that wants this feature?

I save it to the localStorage. Not a great solution, but it was good enough to fix what I cared about.

window.onload = function () {
    // Stores 'sidebar-' classes to localStorage
    function storeSidebarToLocalStorage() {
        const sidebarClasses = [...document.body.classList]
            .filter(className => className.startsWith('sidebar-') && className !== 'sidebar-is-hover');
        localStorage.setItem('sidebarData', JSON.stringify(sidebarClasses));
    }

    // Replaces 'sidebar-' classes with those from localStorage
    function replaceSidebarFromLocalStorage() {
        const storedSidebarData = JSON.parse(localStorage.getItem('sidebarData')) || [];

        // Remove existing 'sidebar-' classes
        [...document.body.classList]
            .filter(className => className.startsWith('sidebar-'))
            .forEach(className => document.body.classList.remove(className));

        // Add classes from localStorage
        document.body.classList.add(...storedSidebarData);
    }

    // Attach click event to links with data-lte-toggle attribute
    document.querySelectorAll('[data-lte-toggle]').forEach(link => {
        link.addEventListener('click', storeSidebarToLocalStorage);
    });

    // Replace sidebar- classes on page load
    replaceSidebarFromLocalStorage();
};

[burdittw]

Question about the state of the sidebar and loading it.

Since the sidebar is now loaded with the page always assuming the menu is expanded since there is no way to store the state of the sidebar menu. This seems fine because no animation happens as the page loads as one would expect it to. Now if we add the ability to save the sidebar menu state and we load the page with the state of the sidebar collapsed, the page flashes due to the sidebar loading expanding then closing. I feel like the default should be the sidebar is closed, and it should expand if the state is expanded. This would prevent the flash on page loads and look cleaner. I would fix this myself, but honestly, after spending some time looking, I cannot find where this is happening at. If someone knows and can guide me in the right direction, then I will fix it on my end for my purposes. But I am also curious as to how others feel about how this load state should be? Should the page load with the menu collapsed and animate open or load expanded and animate to closed on page load?

Thanks again for the great job on the project and any help you can provide @danny007in!

[burdittw]

So, this is what I did to make this work and if acceptable I can make a PR to add it to the project. All changes are made in the push-menu.ts file.

First add this const at the top of the file with the other constants. This is the storage key used in the browser.

 const STORAGE_KEY_SIDEBAR_STATE = 'lte.sidebar.state'

Next after addSidebarBreakPoint and before toggle functions I placed the following functions to save and load the sidebar state from the browser.

saveSidebarState() {
    if (document.body.classList.contains(CLASS_NAME_SIDEBAR_OPEN)) {
      localStorage.setItem(STORAGE_KEY_SIDEBAR_STATE, CLASS_NAME_SIDEBAR_OPEN)
    } else {
      localStorage.setItem(STORAGE_KEY_SIDEBAR_STATE, CLASS_NAME_SIDEBAR_COLLAPSE)
    }
  }

  loadSidebarState() {
    let storedSidebarState = localStorage.getItem(STORAGE_KEY_SIDEBAR_STATE)

    if (storedSidebarState === null) {
      storedSidebarState = CLASS_NAME_SIDEBAR_OPEN
    }

    if (storedSidebarState === CLASS_NAME_SIDEBAR_COLLAPSE) {
      this.collapse()
    } else {
      this.expand()
    }
  }

Now right below we need to modify the toggle and init functions to use these new save and load functions we created.

toggle() {
  if (document.body.classList.contains(CLASS_NAME_SIDEBAR_COLLAPSE)) {
    this.expand()
    this.saveSidebarState()
  } else {
    this.collapse()
    this.saveSidebarState()
  }
}

init() {
  this.addSidebarBreakPoint()
  this.loadSidebarState()
}

Now when this typescript/javascript is called with the init or toggle functions our save and load commands will be called, and the sidebar state will be loaded from the browser. If the value cannot be found it will just assume it is expanded, default behavior. Not much code needed and should work with any current browser today.

Like I said, if this is an acceptable solution let me know and I will create a PR for it to be added to the project.

[burdittw]

I went ahead and added the sidebar menu state code as a PR so that it can be added to the base code should the code owners accept it.

[burdittw]

The sidebar data-lte-toggle button (hamburger icon button) should not be an tag but should be a tag so that the browser does not generate a URL tag in the bottom left corner on mouse over and covering then menu items. Since this in not a link it is not really a good use.

Might as well add the other items on the header menu bar that are more like buttons like the full screen button.

[mbdrasel]

anyone can solved this header, footer problem asp.net mvc

[mbdrasel]

like that

[moemura]

@mbdrasel I use it here AdminLTE.Core and working fine. It need to restore client libraries first