Sidebar — uklanjanje treptanja pri učitavanju skupljenog stanja

Inline skript u <head> odmah postavlja klasu na <html> pre iscrtavanja, CSS je primenjuje bez tranzicije, JS je uklanja nakon što doda .skupljen. Changes to be committed: modified: build.sh modified: go.mod modified: go.sum modified: internal/config/setup.go modified: web/static/css/main.css modified: web/templates/teme/podrazumevana/base.html
2026-06-04 02:54:06 +02:00
parent 08b9359a76
commit d48d088efa
6 changed files with 190 additions and 30 deletions
@@ -18,6 +18,25 @@ body {
    overflow: hidden;
 }

+/* bez tranzicije pri inicijalnom učitavanju skupljenog sidebara */
+.sidebar-init-skupljen .sidebar {
+    width: 60px;
+    overflow: hidden;
+    transition: none;
+}
+.sidebar-init-skupljen .sidebar .logo-zona {
+    opacity: 0;
+    width: 0;
+    pointer-events: none;
+    transition: none;
+}
+.sidebar-init-skupljen .sidebar .nav-oznaka,
+.sidebar-init-skupljen .sidebar .nav-stavka span {
+    opacity: 0;
+    pointer-events: none;
+    transition: none;
+}
+
 /* sidebar */
 .sidebar {
    width: 220px;
@@ -7,6 +7,12 @@
    <title>{{block "naslov" .}}NTech{{end}}</title>
    <meta name="csrf-token" content="{{.CsrfToken}}">

+    <script>
+    if (window.innerWidth > 768 && localStorage.getItem('sidebar-skupljen') === 'true') {
+        document.documentElement.classList.add('sidebar-init-skupljen');
+    }
+    </script>
+
    <!-- tema — učitava se prva -->
    <link rel="stylesheet" href="/static/css/teme/{{.Tema}}.css" />

@@ -51,6 +57,7 @@
      if (!mobilni() && localStorage.getItem("sidebar-skupljen") === "true") {
        sidebar.classList.add("skupljen");
      }
+      document.documentElement.classList.remove('sidebar-init-skupljen');

      hamburger.addEventListener("click", () => {
        if (mobilni()) {