micro-sidebar 2.1.0__py3-none-any.whl → 2.2.0__py3-none-any.whl

{micro_sidebar-2.1.0.dist-info → micro_sidebar-2.2.0.dist-info}/METADATA

@@ -1,6 +1,6 @@
 Metadata-Version: 2.1
 Name: micro-sidebar
-Version: 2.1.0
+Version: 2.2.0
 Summary: A Reusable RTL Django Sidebar App
 Home-page: https://github.com/debeski/micro-sidebar
 Author: DeBeski
@@ -230,3 +230,4 @@ While it may theoretically work in LTR environments if standard Bootstrap files
 | **v1.2.2** | **CSP Compliance:** Added `nonce` attribute support to inline scripts for Content Security Policy compliance. |
 | **v2.0.0** | **Auto-Discovery:** New feature that introspects Django URL patterns and models to automatically generate sidebar navigation items. Adds `{% auto_sidebar %}` template tag, context processor, and configuration options. |
 | **v2.1.0** | **Refactor & Enhancements:** Decoupled customization from models by introducing `DEFAULT_ITEMS` setting for overriding auto-discovered items' labels/icons/order. Added `EXTRA_ITEMS` setting for manual, permission-aware sidebar links grouped in accordions with `{% extra_sidebar %}` tag. Removed deprecated model-level `sidebar_*` attributes. |
+| **v2.2.0** | **Drag-and-Drop Reordering:** New reorder toggle in sidebar toolbar (visible in expanded mode only). Click to enable reorder mode with shake animation. Drag items to reorder with visual drop indicator. Order persists to localStorage. Default order applies only if no user customization exists. Accordion headers remain fixed. |

{micro_sidebar-2.1.0.dist-info → micro_sidebar-2.2.0.dist-info}/RECORD

@@ -5,9 +5,11 @@ sidebar/discovery.py,sha256=6rBpji-g057Pwg3fS7Vp1JV61wz3ygmhZfosGMNXjAY,5636
 sidebar/urls.py,sha256=UL_9e1RLNMxZXkah65m7GRU1dbViZRGeNPBIiSZpOYg,142
 sidebar/views.py,sha256=MebyJ1ZiylSOPESXFkkQ8QTg-ClrkJn-oYLN6KrcgiM,418
 sidebar/migrations/__init__.py,sha256=47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU,0
-sidebar/static/sidebar/sidebar.css,sha256=2mO5IlDZawzFds5KE9NCpM1UwB-e5HHlnRj2gfK28vs,5995
+sidebar/static/sidebar/sidebar.css,sha256=fojQ5zofvpCz1SNe4zCHPB3Bx7kF0KiVKb_W3SSrA8g,6044
 sidebar/static/sidebar/sidebar.js,sha256=gcurW6nl0Dt9jPTzk749DX7uQ3U_7De4F6Gj8ci6W40,5233
+sidebar/static/sidebar/css/reorder.css,sha256=zOBzg6nJwbY0QRCQKAVjaKxqCXqpICY1kFmXe2qO-og,2177
 sidebar/static/sidebar/css/theme_picker.css,sha256=S2u9p_4rXZALf7hoCOsgyAU91NP3Hoy54WYnc4aGyww,4345
+sidebar/static/sidebar/js/reorder.js,sha256=BRAI-S9aTBeq7kwg1Z_ixgIrPdHB3A7LIdZbe8poRB4,9478
 sidebar/static/sidebar/js/theme_picker.js,sha256=Kt4S2fd0ocFjqeuOQXDcvWVLrLDAVxs7zANZqzIqA4g,2292
 sidebar/static/themes/blue.css,sha256=_CMBLoX8xuSkEdiSYP4HhM-_M368q5Zus9n2kGILBQw,1651
 sidebar/static/themes/dark.css,sha256=JmLG6UWSB7Erwogz0tCcpZUL1hgwxqgfyx-WSCXBtLU,14854
@@ -17,13 +19,13 @@ sidebar/static/themes/light.css,sha256=XqStIa8wTzWswWyy2nqbk4tMPKUuIR4967PBoJoPu
 sidebar/static/themes/main.css,sha256=NaPBDAPL-PkTphtcIto7Qjb5CkiR9T_X5YztDT5SwwE,121
 sidebar/static/themes/main.js,sha256=DSz07M8c1KTXSlj7woxPq0Kf9VFb2uNCI13Cz87gghs,1412
 sidebar/static/themes/red.css,sha256=t8OTmvgszQXX4YtYxlIM86zjx1jp-SvfVx2G3X0FjDI,1613
-sidebar/templates/sidebar/auto.html,sha256=nPKOcWMQ9aYNnH6z2EswsBE76zuxL4mUYUv8JyvsyWA,476
-sidebar/templates/sidebar/extra_groups.html,sha256=uMjaXhCuDitIattfChKdvyl6KQj6OVuMG4-bkg8Lb9E,1525
-sidebar/templates/sidebar/main.html,sha256=5-cPxjVAJ_lLvjI6IMwM3Lrov7gBZQAb4fh_vVTM160,3521
+sidebar/templates/sidebar/auto.html,sha256=LQRLUJjiodRbRyWKxkj1MGorYrKAF67gsX_LC7LowH4,538
+sidebar/templates/sidebar/extra_groups.html,sha256=uyiT2BcsY1-GM5GXHoudajckccF1cDCrCftm2vxOflo,1568
+sidebar/templates/sidebar/main.html,sha256=djayBODnzWFaZerWG1THyHfvFV-4gYajIrx8BhBF_FY,6512
 sidebar/templatetags/__init__.py,sha256=RC19QrlHdcgslFc_19Se9UhOe-7_WH9GtNGYU_cZlXg,48
 sidebar/templatetags/sidebar_tags.py,sha256=KoZzjqRpMtiGcITKFUQBcs5RdbvtuzCaNrCWEzIbBlk,2245
-micro_sidebar-2.1.0.dist-info/LICENSE,sha256=Fco89ULLSSxKkC2KKnx57SaT0R7WOkZfuk8IYcGiN50,1063
-micro_sidebar-2.1.0.dist-info/METADATA,sha256=Qu2mhQ1Log9XThokGmFAtUc4haOkaIQeMU7n7MPFh3c,8264
-micro_sidebar-2.1.0.dist-info/WHEEL,sha256=pkctZYzUS4AYVn6dJ-7367OJZivF2e8RA9b_ZBjif18,92
-micro_sidebar-2.1.0.dist-info/top_level.txt,sha256=ih69sjMhU1wOB9HzUV90yEY98aiPuGhzPBBBE-YtJ3w,8
-micro_sidebar-2.1.0.dist-info/RECORD,,
+micro_sidebar-2.2.0.dist-info/LICENSE,sha256=Fco89ULLSSxKkC2KKnx57SaT0R7WOkZfuk8IYcGiN50,1063
+micro_sidebar-2.2.0.dist-info/METADATA,sha256=NMtlGHTlPMAP1SvLxA2BzGqsbK_XYfWkzfFzYsPT8o0,8607
+micro_sidebar-2.2.0.dist-info/WHEEL,sha256=pkctZYzUS4AYVn6dJ-7367OJZivF2e8RA9b_ZBjif18,92
+micro_sidebar-2.2.0.dist-info/top_level.txt,sha256=ih69sjMhU1wOB9HzUV90yEY98aiPuGhzPBBBE-YtJ3w,8
+micro_sidebar-2.2.0.dist-info/RECORD,,

sidebar/static/sidebar/css/reorder.css

@@ -0,0 +1,91 @@
+/* Reorder Toggle Button */
+.reorder-toggle {
+    font-size: 1.2rem;
+    color: #8c98a4;
+    cursor: pointer;
+    padding: 5px;
+    margin-left: 10px;
+    border-radius: 50%;
+    transition: all 0.2s ease;
+    pointer-events: auto;
+}
+
+.reorder-toggle:hover {
+    color: var(--primal, #2363c3);
+    transform: scale(1.1);
+}
+
+.reorder-toggle.active {
+    color: var(--primal, #2363c3);
+    background-color: rgba(35, 99, 195, 0.1);
+}
+
+/* Hide reorder toggle in collapsed sidebar */
+.sidebar.collapsed .reorder-toggle {
+    display: none;
+}
+
+/* Shake Animation for reorder mode */
+@keyframes shake {
+    0%, 100% { transform: translateX(0); }
+    10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
+    20%, 40%, 60%, 80% { transform: translateX(2px); }
+}
+
+.sidebar.reorder-mode .list-group-item[draggable="true"],
+.sidebar.reorder-mode .accordion-body .list-group-item[draggable="true"] {
+    animation: shake 1.5s ease-in-out infinite;
+    cursor: grab;
+}
+
+.sidebar.reorder-mode .list-group-item[draggable="true"]:hover {
+    animation-play-state: paused;
+    background-color: rgba(35, 99, 195, 0.08) !important;
+}
+
+/* Dragging State */
+.sidebar .list-group-item.dragging {
+    opacity: 0.4;
+    cursor: grabbing;
+    animation: none !important;
+}
+
+/* Drop Indicator Line */
+.drop-indicator {
+    height: 3px;
+    background: var(--primal, #2363c3);
+    border-radius: 2px;
+    margin: 2px 10px;
+    pointer-events: none;
+    box-shadow: 0 0 8px rgba(35, 99, 195, 0.5);
+    animation: pulseIndicator 0.8s ease-in-out infinite;
+}
+
+@keyframes pulseIndicator {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.6; }
+}
+
+/* Ensure theme indicator stays in position */
+.sidebar.collapsed .sidebar-toolbar {
+    justify-content: center;
+}
+
+/* Dark Mode Overrides */
+:root.theme-dark .reorder-toggle {
+    color: rgba(255, 255, 255, 0.6);
+}
+
+:root.theme-dark .reorder-toggle:hover,
+:root.theme-dark .reorder-toggle.active {
+    color: var(--primal, #3b82f6);
+}
+
+:root.theme-dark .reorder-toggle.active {
+    background-color: rgba(59, 130, 246, 0.2);
+}
+
+:root.theme-dark .drop-indicator {
+    background: var(--primal, #3b82f6);
+    box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
+}

sidebar/static/sidebar/js/reorder.js

@@ -0,0 +1,267 @@
+(function() {
+    'use strict';
+
+    const STORAGE_KEY_AUTO = 'sidebar_auto_order';
+    const STORAGE_KEY_PREFIX_EXTRA = 'sidebar_extra_';
+
+    let isReorderMode = false;
+    let draggedElement = null;
+    let dropIndicator = null;
+
+    // Expose restore function globally for immediate FOUC fix
+    window.restoreSidebarOrder = restoreOrder;
+
+    document.addEventListener('DOMContentLoaded', () => {
+        const sidebar = document.getElementById('sidebar');
+        const reorderToggle = document.getElementById('sidebarReorderToggle');
+        
+        if (!sidebar || !reorderToggle) return;
+
+        // Create drop indicator element
+        dropIndicator = document.createElement('div');
+        dropIndicator.className = 'drop-indicator';
+        dropIndicator.style.display = 'none';
+
+        // Restore is now called immediately via inline script for FOUC prevention
+        // But call again here as fallback if inline script didn't run
+        if (!window._sidebarOrderRestored) {
+            restoreOrder();
+        }
+
+        // Toggle reorder mode
+        reorderToggle.addEventListener('click', (e) => {
+            e.stopPropagation();
+            isReorderMode = !isReorderMode;
+            reorderToggle.classList.toggle('active', isReorderMode);
+            sidebar.classList.toggle('reorder-mode', isReorderMode);
+            
+            if (isReorderMode) {
+                enableDragAndDrop();
+            } else {
+                disableDragAndDrop();
+            }
+        });
+
+        // Close reorder mode when clicking outside
+        document.addEventListener('click', (e) => {
+            if (isReorderMode && !sidebar.contains(e.target)) {
+                isReorderMode = false;
+                reorderToggle.classList.remove('active');
+                sidebar.classList.remove('reorder-mode');
+                disableDragAndDrop();
+            }
+        });
+    });
+
+    function enableDragAndDrop() {
+        // Auto items in .sidebar-auto-items or direct .list-group children
+        const autoContainer = document.getElementById('sidebarAutoItems') || 
+                              document.querySelector('.sidebar .list-group');
+        if (autoContainer) {
+            setupDraggableContainer(autoContainer, STORAGE_KEY_AUTO);
+        }
+
+        // Extra group items in accordion bodies
+        const accordionBodies = document.querySelectorAll('.sidebar .accordion-body');
+        accordionBodies.forEach(body => {
+            const groupName = body.dataset.groupName || body.closest('.accordion-item')?.querySelector('.accordion-button span')?.textContent?.trim();
+            if (groupName) {
+                const key = STORAGE_KEY_PREFIX_EXTRA + slugify(groupName);
+                setupDraggableContainer(body, key);
+            }
+        });
+    }
+
+    function disableDragAndDrop() {
+        const items = document.querySelectorAll('.sidebar .list-group-item[draggable="true"]');
+        items.forEach(item => {
+            item.removeAttribute('draggable');
+            item.removeEventListener('dragstart', handleDragStart);
+            item.removeEventListener('dragend', handleDragEnd);
+            item.removeEventListener('dragover', handleDragOver);
+            item.removeEventListener('drop', handleDrop);
+        });
+        
+        // Hide drop indicator
+        if (dropIndicator) {
+            dropIndicator.style.display = 'none';
+            if (dropIndicator.parentNode) {
+                dropIndicator.parentNode.removeChild(dropIndicator);
+            }
+        }
+    }
+
+    function setupDraggableContainer(container, storageKey) {
+        const items = container.querySelectorAll(':scope > .list-group-item');
+        
+        items.forEach(item => {
+            // Skip accordion buttons - they're not reorderable
+            if (item.classList.contains('accordion-button')) return;
+            
+            item.setAttribute('draggable', 'true');
+            item.dataset.storageKey = storageKey;
+            
+            item.addEventListener('dragstart', handleDragStart);
+            item.addEventListener('dragend', handleDragEnd);
+            item.addEventListener('dragover', handleDragOver);
+            item.addEventListener('drop', handleDrop);
+        });
+
+        // Add event listeners to container for drag events
+        container.addEventListener('dragover', handleContainerDragOver);
+        container.addEventListener('drop', handleContainerDrop);
+    }
+
+    function handleDragStart(e) {
+        draggedElement = this;
+        this.classList.add('dragging');
+        e.dataTransfer.effectAllowed = 'move';
+        e.dataTransfer.setData('text/plain', ''); // Required for Firefox
+        
+        // Add drop indicator to DOM
+        if (dropIndicator && this.parentNode) {
+            this.parentNode.appendChild(dropIndicator);
+        }
+    }
+
+    function handleDragEnd(e) {
+        this.classList.remove('dragging');
+        
+        // Hide drop indicator
+        if (dropIndicator) {
+            dropIndicator.style.display = 'none';
+        }
+        
+        // Save new order
+        if (draggedElement) {
+            saveOrder(draggedElement.parentNode, draggedElement.dataset.storageKey);
+        }
+        
+        draggedElement = null;
+    }
+
+    function handleDragOver(e) {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'move';
+        
+        if (!draggedElement || draggedElement === this) return;
+        if (draggedElement.dataset.storageKey !== this.dataset.storageKey) return;
+        
+        const rect = this.getBoundingClientRect();
+        const midY = rect.top + rect.height / 2;
+        
+        // Show drop indicator
+        if (dropIndicator) {
+            dropIndicator.style.display = 'block';
+            if (e.clientY < midY) {
+                this.parentNode.insertBefore(dropIndicator, this);
+            } else {
+                this.parentNode.insertBefore(dropIndicator, this.nextSibling);
+            }
+        }
+    }
+
+    function handleContainerDragOver(e) {
+        e.preventDefault();
+    }
+
+    function handleDrop(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        
+        if (!draggedElement || draggedElement === this) return;
+        if (draggedElement.dataset.storageKey !== this.dataset.storageKey) return;
+        
+        const rect = this.getBoundingClientRect();
+        const midY = rect.top + rect.height / 2;
+        
+        if (e.clientY < midY) {
+            this.parentNode.insertBefore(draggedElement, this);
+        } else {
+            this.parentNode.insertBefore(draggedElement, this.nextSibling);
+        }
+    }
+
+    function handleContainerDrop(e) {
+        e.preventDefault();
+        // Item drops are handled by individual items
+    }
+
+    function saveOrder(container, storageKey) {
+        if (!container || !storageKey) return;
+        
+        const items = container.querySelectorAll(':scope > .list-group-item[data-url-name]');
+        const order = Array.from(items).map(item => item.dataset.urlName);
+        
+        try {
+            localStorage.setItem(storageKey, JSON.stringify(order));
+        } catch (e) {
+            console.warn('Could not save sidebar order:', e);
+        }
+    }
+
+    function restoreOrder() {
+        // Restore auto items order
+        const autoContainer = document.getElementById('sidebarAutoItems') || 
+                              document.querySelector('.sidebar .list-group');
+        if (autoContainer) {
+            restoreContainerOrder(autoContainer, STORAGE_KEY_AUTO);
+        }
+
+        // Restore extra group items order
+        const accordionBodies = document.querySelectorAll('.sidebar .accordion-body');
+        accordionBodies.forEach(body => {
+            const groupName = body.dataset.groupName || body.closest('.accordion-item')?.querySelector('.accordion-button span')?.textContent?.trim();
+            if (groupName) {
+                const key = STORAGE_KEY_PREFIX_EXTRA + slugify(groupName);
+                restoreContainerOrder(body, key);
+            }
+        });
+        
+        // Mark as restored
+        window._sidebarOrderRestored = true;
+    }
+
+    function restoreContainerOrder(container, storageKey) {
+        let savedOrder;
+        try {
+            const saved = localStorage.getItem(storageKey);
+            if (!saved) return; // No saved order, use default
+            savedOrder = JSON.parse(saved);
+        } catch (e) {
+            return; // Invalid JSON, use default
+        }
+        
+        if (!Array.isArray(savedOrder) || savedOrder.length === 0) return;
+        
+        const items = container.querySelectorAll(':scope > .list-group-item[data-url-name]');
+        const itemMap = new Map();
+        items.forEach(item => {
+            itemMap.set(item.dataset.urlName, item);
+        });
+        
+        // Reorder based on saved order
+        savedOrder.forEach(urlName => {
+            const item = itemMap.get(urlName);
+            if (item) {
+                container.appendChild(item);
+                itemMap.delete(urlName);
+            }
+        });
+        
+        // Append any remaining items (new items not in saved order)
+        itemMap.forEach(item => {
+            container.appendChild(item);
+        });
+    }
+
+    function slugify(text) {
+        return text
+            .toString()
+            .toLowerCase()
+            .trim()
+            .replace(/\s+/g, '-')
+            .replace(/[^\w\-]+/g, '')
+            .replace(/\-\-+/g, '-');
+    }
+})();

sidebar/static/sidebar/sidebar.css

@@ -227,4 +227,6 @@
     width: 100%;
     background: transparent;
     pointer-events: none; /* Let clicks pass through to content if needed, but we override for items */
+    display: flex;
+    justify-content: flex-end
 }

sidebar/templates/sidebar/auto.html

@@ -1,3 +1,4 @@
+<div class="sidebar-auto-items" id="sidebarAutoItems">
 {% for item in items %}
 <a href="{{ item.url }}" 
    class="list-group-item list-group-item-action{% if item.active %} active{% endif %}"
@@ -11,3 +12,4 @@
     <p class="mb-0">لا توجد عناصر</p>
 </div>
 {% endfor %}
+</div>

sidebar/templates/sidebar/extra_groups.html

@@ -16,7 +16,7 @@
         <div id="extraGroup{{ forloop.counter }}" 
              class="accordion-collapse collapse{% if group.has_active %} show{% endif %}" 
              data-bs-parent="#sidebarExtraAccordion">
-            <div class="accordion-body p-0">
+            <div class="accordion-body p-0" data-group-name="{{ group_name|slugify }}">
                 {% for item in group.items %}
                 <a href="{{ item.url }}" 
                    class="list-group-item list-group-item-action{% if item.active %} active{% endif %}"

sidebar/templates/sidebar/main.html

@@ -1,10 +1,12 @@
 {% load static %}
 <link rel="stylesheet" href="{% static 'sidebar/sidebar.css' %}">
 <link rel="stylesheet" href="{% static 'sidebar/css/theme_picker.css' %}">
+<link rel="stylesheet" href="{% static 'sidebar/css/reorder.css' %}">
 <link rel="stylesheet" href="{% static 'themes/main.css' %}">
 <script src="{% static 'sidebar/sidebar.js' %}" nonce="{{ request.csp_nonce }}" defer></script>
 <script src="{% static 'themes/main.js' %}" nonce="{{ request.csp_nonce }}" defer></script>
 <script src="{% static 'sidebar/js/theme_picker.js' %}" nonce="{{ request.csp_nonce }}" defer></script>
+<script src="{% static 'sidebar/js/reorder.js' %}" nonce="{{ request.csp_nonce }}" defer></script>
 <!-- Ghost Sidebar for small screens layout stability -->
 {% if request.user.is_authenticated %}
 <!-- <div class="sidebar-ghost"></div> -->
@@ -31,7 +33,7 @@
         {% block items %}
         
         <!-- DEFAULT CONTENT / INSTRUCTIONS -->
-        <div class="p-3 text-center text-muted">
+        <!-- <div class="p-3 text-center text-muted">
             <i class="bi bi-info-circle mb-2" style="font-size: 24px;"></i>
             <p class="small">
                 <strong>Default Sidebar</strong><br>
@@ -39,18 +41,82 @@
                 <code>sidebar/main.html</code><br>
                 and override the <code>items</code> block.
             </p>
-        </div>
+        </div> -->
 
-        <a href="#" class="list-group-item list-group-item-action">
+        <!-- <a href="#" class="list-group-item list-group-item-action">
             <i class="bi bi-house me-2" style="font-size: 24px;"></i>
             <span>Example Home</span>
-        </a>
+        </a> -->
         
         {% endblock %}
     </div>
+    <script nonce="{{ request.csp_nonce }}">
+        // Immediate order restore to prevent FOUC - runs before browser paint
+        (function() {
+            var STORAGE_KEY_AUTO = 'sidebar_auto_order';
+            var STORAGE_KEY_PREFIX_EXTRA = 'sidebar_extra_';
+            
+            function restoreContainer(container, storageKey) {
+                var saved;
+                try {
+                    saved = localStorage.getItem(storageKey);
+                    if (!saved) return;
+                    saved = JSON.parse(saved);
+                } catch(e) { return; }
+                if (!Array.isArray(saved) || saved.length === 0) return;
+                
+                var items = container.querySelectorAll(':scope > .list-group-item[data-url-name]');
+                var itemMap = {};
+                for (var i = 0; i < items.length; i++) {
+                    itemMap[items[i].dataset.urlName] = items[i];
+                }
+                for (var j = 0; j < saved.length; j++) {
+                    var item = itemMap[saved[j]];
+                    if (item) {
+                        container.appendChild(item);
+                        delete itemMap[saved[j]];
+                    }
+                }
+                for (var key in itemMap) {
+                    container.appendChild(itemMap[key]);
+                }
+            }
+            
+            function slugify(text) {
+                return text.toString().toLowerCase().trim()
+                    .replace(/\s+/g, '-').replace(/[^\w\-]+/g, '').replace(/\-\-+/g, '-');
+            }
+            
+            // Restore auto items
+            var autoContainer = document.getElementById('sidebarAutoItems');
+            if (autoContainer) {
+                restoreContainer(autoContainer, STORAGE_KEY_AUTO);
+            }
+            
+            // Restore extra groups
+            var accordionBodies = document.querySelectorAll('.sidebar .accordion-body');
+            for (var k = 0; k < accordionBodies.length; k++) {
+                var body = accordionBodies[k];
+                var groupName = body.dataset.groupName;
+                if (!groupName) {
+                    var btn = body.closest('.accordion-item');
+                    if (btn) {
+                        var span = btn.querySelector('.accordion-button span');
+                        if (span) groupName = span.textContent.trim();
+                    }
+                }
+                if (groupName) {
+                    restoreContainer(body, STORAGE_KEY_PREFIX_EXTRA + slugify(groupName));
+                }
+            }
+            
+            window._sidebarOrderRestored = true;
+        })();
+    </script>
 
-    <!-- Sidebar Toolbar (Theme Picker, etc.) -->
+    <!-- Sidebar Toolbar (Theme Picker, Reorder, etc.) -->
     <div class="sidebar-toolbar no-print">
+        <i class="bi bi-arrows-move reorder-toggle" id="sidebarReorderToggle" title="إعادة الترتيب"></i>
         <i class="bi bi-chevron-up theme-arrow" id="sidebarThemeArrow"></i>
         <div class="current-theme-indicator" id="sidebarThemeIndicator" title="تغيير المظهر"></div>
         <div class="theme-popup" id="sidebarThemePopup">