micro-sidebar 1.2.1

A Reusable RTL Django Sidebar App

Micro Sidebar - A Reusable RTL Django Sidebar App

RTL lightweight, reusable django app that provides a dynamic sidebar for your django projects.

Requirements

• Django: >= 5.1
• Bootstrap: 5 (Required for consistent styling)

Installation

1. Install:

   pip install micro-sidebar
   # OR
   pip install git+https://github.com/debeski/micro-sidebar.git
   

2. Add to INSTALLED_APPS: In your settings.py:

   INSTALLED_APPS = [
       ...
       'sidebar',
       ...
   ]
   

3. Configure URLs: In your project's urls.py:

   from django.urls import path, include
   
   urlpatterns = [
       ...
       path('sidebar/', include('sidebar.urls')),
       ...
   ]
   

Customization

Override Default Menu

The sidebar uses a block-based template system. To define your own menu items:

1. Create a new template (e.g., templates/sidebar_menu.html).
2. Extend sidebar/main.html.
3. Override the {% block items %}.

Example sidebar_menu.html:

{% extends "sidebar/main.html" %}

{% block items %}
<a href="{% url 'home' %}" class="list-group-item list-group-item-action">
    <i class="bi bi-house me-2" style="font-size: 24px;"></i>
    <span>Home</span>
</a>
<a href="{% url 'settings' %}" class="list-group-item list-group-item-action">
    <i class="bi bi-gear me-2" style="font-size: 24px;"></i>
    <span>Settings</span>
</a>
{% endblock %}

Then, include your custom template in base.html:

{% include "sidebar_menu.html" %}

Positioning

The sidebar is sticky by default. If your app has a top navigation bar (titlebar), the sidebar will automatically adjust its position below it on small screens. If no titlebar is detected, it will stick to the top of the viewport.

RTL / LTR Support

This sidebar is primarily designed for RTL (Right-to-Left) interfaces (e.g., Arabic). While it may theoretically work in LTR environments if standard Bootstrap files are used instead of RTL versions, this has not been fully tested.

Future updates are planned to support dynamic language switching between RTL and LTR.

Version History

Version	Changes
v1.0.0	Initial Release.
v1.0.1	Fixed titlebar positioning bug causing overlap/gaps.
v1.0.2	Improved documentation clarity and added usage instructions.
v1.1.0	Renamed content.html to main.html for clarity. Refactored to use {% block items %} for easier extension.
v1.2.0	New Theme Implementation: Redesigned UI with rounded pill-shaped items, tactile micro-animations, and a refined color palette. Improved responsiveness with dynamic top-offset calculations and inline FOUC fixes for small screens. Fixed tooltip stickiness bug.
v1.2.1	Positioning Fix: Added align-self: flex-start to resolve 60px vertical offset in flex containers. Removed legacy sidebar-top-offset CSS variable and JS calculations. Added box-shadow: none and outline: none to accordion buttons to remove focus ring. Fixed page flickering on wider screens by constraining sidebar height with calc(100vh - header-height).