micro-sidebar 1.0.0__py3-none-any.whl

micro_sidebar-1.0.0.dist-info/METADATA

@@ -0,0 +1,40 @@
+Metadata-Version: 2.4
+Name: micro_sidebar
+Version: 1.0.0
+Summary: A reusable Django sidebar for Web Apps
+Home-page: https://github.com/debeski/micro-sidebar
+Author: DeBeski
+Author-email: DeBeski <debeski1@gmail.com>
+License: MIT
+Project-URL: Homepage, https://github.com/debeski/micro-sidebar
+Classifier: Framework :: Django
+Classifier: Framework :: Django :: 5
+Classifier: Programming Language :: Python :: 3
+Classifier: Programming Language :: Python :: 3.8
+Classifier: Programming Language :: Python :: 3.9
+Classifier: Programming Language :: Python :: 3.10
+Classifier: Programming Language :: Python :: 3.11
+Classifier: Programming Language :: Python :: 3.12
+Classifier: Programming Language :: Python :: 3.13
+Classifier: Programming Language :: Python :: 3.14
+Classifier: License :: OSI Approved :: MIT License
+Classifier: Operating System :: OS Independent
+Requires-Python: >=3.9
+Description-Content-Type: text/markdown
+Requires-Dist: Django>=5.1
+Dynamic: author
+Dynamic: home-page
+Dynamic: requires-python
+
+# Micro Sidebar
+
+A reusable Django sidebar app.
+
+## Installation
+
+1.  Add `sidebar` to your `INSTALLED_APPS` setting.
+2.  Include the URLconf in your project urls.py:
+    ```python
+    path('sidebar/', include('sidebar.urls')),
+    ```
+3.  Override the content by creating `templates/sidebar/content.html` in your project. See `sidebar/templates/sidebar/example_content.html` for a starting point.

micro_sidebar-1.0.0.dist-info/RECORD

@@ -0,0 +1,12 @@
+sidebar/__init__.py,sha256=47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU,0
+sidebar/apps.py,sha256=4UjKXHoBGKRLxpC9AY6eaq8YZx8unirUz_8u-IrlfVQ,145
+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/style.css,sha256=aEbc4yPFaQBpMoYnJi575u077pHzej7FLFP8kgRnfBk,2105
+sidebar/static/sidebar/js/sidebar.js,sha256=EHQOsJWujpoV7A3K5WAwGx1nIV_oNh5yQ4tM3-PrbsI,5930
+sidebar/templates/sidebar/content.html,sha256=hSqgzvuWZRxlUN1-zC-Oovppd_rbnCylxQmfRdGIbhY,1298
+micro_sidebar-1.0.0.dist-info/METADATA,sha256=zdEyRYYTjtmcMfj4TGMkqPQe6j-vUE2dE0shwBpTq0w,1412
+micro_sidebar-1.0.0.dist-info/WHEEL,sha256=qELbo2s1Yzl39ZmrAibXA2jjPLUYfnVhUNTlyF1rq0Y,92
+micro_sidebar-1.0.0.dist-info/top_level.txt,sha256=ih69sjMhU1wOB9HzUV90yEY98aiPuGhzPBBBE-YtJ3w,8
+micro_sidebar-1.0.0.dist-info/RECORD,,

micro_sidebar-1.0.0.dist-info/WHEEL

@@ -0,0 +1,5 @@
+Wheel-Version: 1.0
+Generator: setuptools (80.10.1)
+Root-Is-Purelib: true
+Tag: py3-none-any
+

micro_sidebar-1.0.0.dist-info/top_level.txt

@@ -0,0 +1 @@
+sidebar

sidebar/apps.py

@@ -0,0 +1,5 @@
+from django.apps import AppConfig
+
+class SidebarConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'sidebar'

sidebar/static/sidebar/js/sidebar.js

@@ -0,0 +1,156 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const sidebar = document.getElementById("sidebar");
+    const sidebarToggle = document.getElementById("sidebarToggle");
+
+    // Read config from data attribute on sidebar or a global config
+    // Assuming sidebar has data attributes, or we can look for a meta tag
+    const sidebarConfigStr = sidebar.getAttribute('data-sidebar-config');
+    let sidebarConfig = {};
+    if (sidebarConfigStr) {
+        try {
+            sidebarConfig = JSON.parse(sidebarConfigStr.replace(/'/g, '"')); // Simple parse attempt, better to use valid JSON in attribute
+        } catch (e) {
+            console.error("Error parsing sidebar config", e);
+        }
+    }
+    
+    const toggleUrl = sidebar.dataset.toggleUrl;
+    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
+    let isSessionCollapsed = sidebar.dataset.sessionCollapsed === "true";
+
+    // Function to handle sidebar collapsing based on window size
+    function adjustSidebarForWindowSize() {
+        const screenWidth = window.innerWidth;
+        const titlebar = document.querySelector('.titlebar');
+        const titlebarHeight = titlebar ? titlebar.offsetHeight : 0;
+
+        if (screenWidth < 1100) {
+            // Always collapse sidebar on small screens
+            sidebar.classList.add("collapsed");
+            initializeTooltips();
+
+            // Dynamic positioning to anchor to titlebar
+            sidebar.style.top = titlebarHeight + 'px';
+            sidebar.style.height = (window.innerHeight - titlebarHeight) + 'px';
+        } else {
+            // Reset styles for large screens to let CSS take over (sticky)
+            sidebar.style.top = '';
+            sidebar.style.height = '';
+
+            // Use session state for larger screens
+            if (isSessionCollapsed) {
+                sidebar.classList.add("collapsed");
+                initializeTooltips();
+            } else {
+                sidebar.classList.remove("collapsed");
+                deinitializeTooltips();
+            }
+        }
+    }
+
+    // Adjust sidebar state on load
+    adjustSidebarForWindowSize();
+
+    // Check if sidebar is collapsed on load and initialize tooltips if so
+    if (sidebar.classList.contains("collapsed")) {
+        initializeTooltips();
+    }
+
+    // Listen for window resize
+    window.addEventListener("resize", adjustSidebarForWindowSize);
+
+    // Toggle sidebar and update session via AJAX
+    if (sidebarToggle) {
+        sidebarToggle.addEventListener("click", function () {
+            sidebar.classList.toggle("collapsed");
+            const isCollapsed = sidebar.classList.contains("collapsed");
+
+            // Update tooltips immediately for all screen sizes
+            if (isCollapsed) {
+                initializeTooltips();
+            } else {
+                deinitializeTooltips();
+            }
+
+            // Only update session if screen width is >= 1100px
+            if (window.innerWidth >= 1100) {
+                fetch(toggleUrl, {
+                    method: "POST",
+                    headers: {
+                        "X-CSRFToken": csrfToken,
+                        "Content-Type": "application/x-www-form-urlencoded",
+                    },
+                    body: `collapsed=${isCollapsed}`
+                }).then(response => response.json())
+                  .then(data => {
+                      if (data.status === "success") {
+                          isSessionCollapsed = isCollapsed; // Update local state
+                      }
+                  }).catch(error => console.error("Error updating sidebar state:", error));
+            }
+    
+            setTimeout(triggerAutoscale, 250);
+        });
+    }
+});
+
+// Close sidebar when clicking outside (only for small screens)
+document.addEventListener("click", function (event) {
+    const sidebar = document.getElementById("sidebar");
+    const sidebarToggle = document.getElementById("sidebarToggle");
+    const screenWidth = window.innerWidth;
+    
+    if (sidebar && sidebarToggle && screenWidth < 1100 && !sidebar.contains(event.target) && !sidebarToggle.contains(event.target)) {
+        if (!sidebar.classList.contains("collapsed")) {
+            sidebar.classList.add("collapsed");
+            
+            const toggleUrl = sidebar.dataset.toggleUrl;
+            const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
+
+            fetch(toggleUrl, {
+                method: "POST",
+                headers: {
+                    "X-CSRFToken": csrfToken,
+                    "Content-Type": "application/x-www-form-urlencoded",
+                },
+                body: "collapsed=true"
+            }).then(response => response.json())
+              .catch(error => console.error("Error updating sidebar state:", error));
+
+            initializeTooltips();
+        }
+    }
+});
+
+function initializeTooltips() {
+    const sidebarItems = document.querySelectorAll(".sidebar.collapsed .list-group-item, .sidebar.collapsed .accordion-button");
+    sidebarItems.forEach(item => {
+        if (item._tooltip) {
+            item._tooltip.dispose();
+        }
+        item._tooltip = new bootstrap.Tooltip(item, {
+            title: item.querySelector("span").textContent,
+            placement: "right",
+            customClass: "tooltip-custom"
+        });
+    });
+}
+
+function deinitializeTooltips() {
+    const sidebarItems = document.querySelectorAll(".sidebar .list-group-item, .sidebar .accordion-button");
+    sidebarItems.forEach(item => {
+        if (item._tooltip) {
+            item._tooltip.dispose();
+            delete item._tooltip;
+        }
+    });
+}
+
+function triggerAutoscale() {
+    if (window.innerWidth > 1100) {
+        const autoscaleButton = document.querySelector('.modebar-btn[data-title="Reset axes"]');
+        if (autoscaleButton) {
+            autoscaleButton.click();
+        }
+    }
+}

sidebar/static/sidebar/style.css

@@ -0,0 +1,93 @@
+
+.sidebar {
+    z-index: 900;
+    transition: width 0.15s ease-in-out;
+    background-color: white;
+    position: -webkit-sticky; /* For Safari */
+    position: sticky;
+    top: 0; /* Sticks the sidebar at the top of the parent container */
+    overflow-y: auto;
+    overflow-x: hidden;
+    height: calc(100vh - 45px); /* Fallback/Base height for sticky behavior */
+    /* Custom Scrollbar for Webkit */
+    scrollbar-width: thin;
+    scrollbar-color: rgba(0,0,0,0.2) transparent;
+}
+
+.sidebar::-webkit-scrollbar {
+    width: 6px;
+}
+.sidebar::-webkit-scrollbar-track {
+    background: transparent;
+}
+.sidebar::-webkit-scrollbar-thumb {
+    background-color: rgba(0,0,0,0.2);
+    border-radius: 20px;
+}
+
+.sidebar.collapsed {
+    width: 52px !important;
+}
+.sidebar.collapsed .list-group-item span {
+    display: none !important;
+}
+.sidebar.collapsed .accordion-button span {
+    display: none !important;
+}
+.sidebar.collapsed .accordion-button::after {
+    background-image: none;
+}
+
+
+.sidebar-ghost {
+    display: none;
+    width: 52px;
+    flex-shrink: 0;
+}
+
+@media (max-width: 1100px) {
+    .sidebar-ghost {
+        display: block;
+    }
+
+    .sidebar {
+        position: fixed;
+        top: 45px; /* Fallback, JS calculates exact height */
+        right: 0;
+        width: 250px;
+        transition: width 0.15s ease-in-out;
+        height: calc(100vh - 45px); /* Fallback */
+        z-index: 1000;
+    }
+    
+    .sidebar.collapsed {
+        width: 52px !important;
+        right: 0; 
+        position: fixed; 
+    }
+}
+.sidebar .list-group-item {
+    border: none !important;
+    font-size: 18px !important;
+    font-weight: 600 !important;
+    height: 60px !important;
+    white-space: nowrap;
+    overflow: hidden;
+    padding: 12px;
+    align-items: center;
+}
+
+.sidebar .accordion-button {
+    font-size: 18px !important;
+    font-weight: 600 !important;
+    border: none !important;
+    height: 60px !important;
+    white-space: nowrap;
+    overflow: hidden;
+    padding: 12px;
+    align-items: center;
+}
+
+.sidebar .accordion-button:not(.collapsed) {
+    background-color: var(--body) !important;
+}

sidebar/templates/sidebar/content.html

@@ -0,0 +1,31 @@
+{% load static %}
+<link rel="stylesheet" href="{% static 'sidebar/style.css' %}">
+<script src="{% static 'sidebar/js/sidebar.js' %}" nonce="{{ request.csp_nonce }}" defer></script>
+<!-- Ghost Sidebar for small screens layout stability -->
+<div class="sidebar-ghost"></div>
+
+<!-- sidebar.html -->
+<div class="col-2 flex-column shadow-sm sidebar {% if request.session.sidebarCollapsed %}collapsed{% endif %} no-print" 
+     id="sidebar" 
+     data-toggle-url="{% url 'toggle_sidebar' %}"
+     data-session-collapsed="{{ request.session.sidebarCollapsed|yesno:'true,false' }}">
+    <div class="list-group flex-shrink-0">
+        
+        <!-- DEFAULT CONTENT / INSTRUCTIONS -->
+        <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>
+                To customize this menu, create a file at:<br>
+                <code>templates/sidebar/content.html</code><br>
+                in your Django project.
+            </p>
+        </div>
+
+        <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>
+        
+    </div>
+</div>

sidebar/urls.py

@@ -0,0 +1,6 @@
+from django.urls import path
+from . import views
+
+urlpatterns = [
+    path("toggle-sidebar/", views.toggle_sidebar, name="toggle_sidebar"),
+]

sidebar/views.py

@@ -0,0 +1,9 @@
+from django.http import JsonResponse
+
+# Helper Function that handles the sidebar toggle and state
+def toggle_sidebar(request):
+    if request.method == "POST" and request.user.is_authenticated:
+        collapsed = request.POST.get("collapsed") == "true"
+        request.session["sidebarCollapsed"] = collapsed
+        return JsonResponse({"status": "success"})
+    return JsonResponse({"status": "error"}, status=400)