feature: Sidebar hiding now pure CSS & theme reloading for devs (#391)

internal/config/config.go

@@ -87,6 +87,7 @@ type PrometheusConfig struct {
 type Config struct {
 	UseSingleHTTPFrontend           bool
 	ThemeName                       string
+	ThemeCacheDisabled              bool
 	ListenAddressSingleHTTPFrontend string
 	ListenAddressWebUI              string
 	ListenAddressRestActions        string
@@ -188,6 +189,7 @@ func DefaultConfigWithBasePort(basePort int) *Config {
 	config.DefaultIconForActions = "😀"
 	config.DefaultIconForDirectories = "&#128193"
 	config.DefaultIconForBack = "«"
+	config.ThemeCacheDisabled = false
 
 	config.ListenAddressSingleHTTPFrontend = fmt.Sprintf("0.0.0.0:%d", basePort)
 	config.ListenAddressRestActions = fmt.Sprintf("localhost:%d", basePort+1)

internal/httpservers/webuiServer.go

@@ -88,7 +88,7 @@ func setupCustomWebuiDir() {
 func generateThemeCss(w http.ResponseWriter, r *http.Request) {
 	themeCssFilename := path.Join(findCustomWebuiDir(), "themes", cfg.ThemeName, "theme.css")
 
-	if !customThemeCssRead {
+	if !customThemeCssRead || cfg.ThemeCacheDisabled {
 		customThemeCssRead = true
 
 		if _, err := os.Stat(themeCssFilename); err == nil {

webui.dev/js/marshaller.js

@@ -170,16 +170,12 @@ function setSectionNavigationVisible (visible) {
       btn.innerHTML = '«'
 
       nav.classList.add('shown')
-      nav.style.display = 'flex'
     } else {
       btn.setAttribute('aria-pressed', true)
       btn.setAttribute('aria-label', 'Close sidebar navigation')
       btn.innerHTML = '☰'
 
       nav.classList.remove('shown')
-      setTimeout(() => {
-        nav.style.display = 'none'
-      }, 600)
     }
   } else {
     btn.disabled = true

webui.dev/style.css

@@ -95,7 +95,6 @@ nav ul li a:hover {
 }
 
 nav {
-  display: none;
   left: -250px;
 }
 
@@ -115,14 +114,16 @@ nav.sidebar {
   width: 180px;
   height: 100dvh;
   top: 0;
-  transition: left 0.5s ease;
+  transition: left 0.5s ease, visibility 0.5s ease;
   box-shadow: 0 0 10px 0 #444;
   z-index: -1;
   flex-direction: column;
   display: flex;
+  visibility: hidden;
 }
 
-nav.shown {
+nav.sidebar.shown {
+  visibility: visible;
   left: 0;
 }