mynotes/cmds/webservice/bin/templates/design/sections/nav_big.tmpl

<aside class="w-64 border-r border-zinc-800 bg-zinc-900/50 flex flex-col">
    <div class="p-4 flex justify-between items-center border-b border-zinc-800">
        <span class="text-xs font-bold uppercase tracking-widest text-zinc-500">Main Vault</span>
        <span class="text-[10px] px-1.5 py-0.5 rounded bg-zinc-800 text-zinc-400 border border-zinc-700">v2.4</span>
    </div>

    <div class="flex-1 overflow-y-auto custom-scrollbar p-2 space-y-0.5">
        {{range .Subfoldere}}
            {{template "folder" .}}
        {{end}}
        {{range .Fisiere}}
            <a href="/notes/?note={{.Path}}"
               class="flex items-center gap-2 px-2 py-1 text-xs rounded hover:bg-zinc-800 text-zinc-500 hover:text-zinc-300 transition-colors">
                {{/* File icon */}}
                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24"
                     fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                     class="shrink-0 text-zinc-600">
                    <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/>
                    <polyline points="14 2 14 8 20 8"/>
                </svg>
                <span class="truncate">{{.Nume}}</span>
            </a>
        {{end}}
    </div>

    {{/* BOTTOM: NEW ROOT FOLDER */}}
    <div class="p-2 border-t border-zinc-800">
        <form method="POST" action="/api/create_dir" class="flex gap-1 items-center">
            <input type="hidden" name="director" value="">
            <input
                type="text"
                name="subdirector"
                placeholder="New folder..."
                class="flex-1 bg-zinc-800 text-zinc-300 text-xs rounded px-2 py-1 outline-none border border-zinc-700 focus:border-zinc-500 placeholder-zinc-600"
            >
            <button type="submit"
                class="text-zinc-400 hover:text-zinc-100 hover:bg-zinc-700 rounded p-1 transition-colors border border-zinc-700"
                title="Create folder">
                {{/* Plus icon */}}
                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24"
                     fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
                </svg>
            </button>
        </form>
    </div>
</aside>


{{define "folder"}}
<details class="group" id="folder-{{.Nume}}"
         ontoggle="saveFolderState('folder-{{.Nume}}', this.open)">

    <summary class="flex items-center justify-between px-2 py-1 text-xs rounded hover:bg-zinc-800 cursor-pointer list-none text-zinc-400 group-open:text-zinc-200 transition-colors">
        <div class="flex items-center gap-1.5 min-w-0">
            {{/* Chevron */}}
            <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24"
                 fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
                 class="shrink-0 transition-transform duration-150 group-open:rotate-90">
                <polyline points="9 18 15 12 9 6"/>
            </svg>

            {{/* Folder icon — closed */}}
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24"
                 fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                 class="shrink-0 text-zinc-500 group-open:hidden">
                <path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"/>
            </svg>

            {{/* Folder icon — open */}}
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24"
                 fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                 class="shrink-0 text-zinc-300 hidden group-open:block">
                <path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"/>
                <line x1="2" y1="10" x2="22" y2="10"/>
            </svg>

            <span class="truncate">{{.Nume}}</span>
        </div>

        {{/* ACTION BUTTONS — visible on hover only */}}
        <div class="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity shrink-0">

            {{/* New note button */}}
            <form method="POST" action="/api/save_note">
                <input type="hidden" name="director" value="{{.Nume}}">
                <input type="hidden" name="titlu" value="Untitled">
                <input type="hidden" name="notita" value="">
                <button type="submit"
                    onclick="event.stopPropagation()"
                    class="text-zinc-500 hover:text-zinc-100 hover:bg-zinc-700 rounded p-0.5 transition-colors"
                    title="New note">
                    {{/* File plus icon */}}
                    <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24"
                         fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/>
                        <polyline points="14 2 14 8 20 8"/>
                        <line x1="12" y1="18" x2="12" y2="12"/>
                        <line x1="9" y1="15" x2="15" y2="15"/>
                    </svg>
                </button>
            </form>

            {{/* New subfolder button */}}
            <button
                onclick="event.stopPropagation(); var f = this.closest('details').querySelector('.new-folder-form'); f.style.display = f.style.display === 'none' ? 'flex' : 'none'; f.querySelector('input[type=text]').focus();"
                class="text-zinc-500 hover:text-zinc-100 hover:bg-zinc-700 rounded p-0.5 transition-colors"
                title="New folder">
                {{/* Folder plus icon */}}
                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24"
                     fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"/>
                    <line x1="12" y1="13" x2="12" y2="19"/>
                    <line x1="9" y1="16" x2="15" y2="16"/>
                </svg>
            </button>
        </div>
    </summary>

    {{/* INLINE FOLDER NAME INPUT */}}
    <form method="POST" action="/api/create_dir"
          class="new-folder-form gap-1 px-2 py-1 items-center"
          style="display:none;">
        <input type="hidden" name="director" value="{{.Nume}}">
        <input
            type="text"
            name="subdirector"
            placeholder="Folder name..."
            class="flex-1 bg-zinc-800 text-zinc-300 text-xs rounded px-2 py-1 outline-none border border-zinc-700 focus:border-zinc-500 placeholder-zinc-600"
        >
        <button type="submit"
            class="text-zinc-400 hover:text-zinc-100 hover:bg-zinc-700 rounded p-1 transition-colors border border-zinc-700">
            <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24"
                 fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                <polyline points="20 6 9 17 4 12"/>
            </svg>
        </button>
    </form>

    {{/* CHILDREN */}}
    <div class="ml-3 pl-2 border-l border-zinc-800 space-y-0.5 mt-0.5">
        {{range .Fisiere}}
            <a href="/notes/?note={{.Path}}"
               class="flex items-center gap-2 px-2 py-1 text-xs rounded hover:bg-zinc-800 text-zinc-500 hover:text-zinc-300 transition-colors">
                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24"
                     fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                     class="shrink-0 text-zinc-600">
                    <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/>
                    <polyline points="14 2 14 8 20 8"/>
                </svg>
                <span class="truncate">{{.Nume}}</span>
            </a>
        {{end}}
        {{range .Subfoldere}}
            {{template "folder" .}}
        {{end}}
    </div>

</details>
{{end}}

<script>
    function saveFolderState(id, isOpen) {
        const states = JSON.parse(localStorage.getItem('folderStates') || '{}');
        states[id] = isOpen;
        localStorage.setItem('folderStates', JSON.stringify(states));
    }

    function restoreFolderStates() {
        const states = JSON.parse(localStorage.getItem('folderStates') || '{}');
        document.querySelectorAll('details[id^="folder-"]').forEach(details => {
            const id = details.id;
            if (id in states) {
                details.open = states[id];
            } else {
                details.open = true; // default open on first visit
            }
        });
    }

    document.addEventListener('DOMContentLoaded', restoreFolderStates);
</script>