micro-sidebar 1.0.2__tar.gz → 1.2.0__tar.gz

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. micro_sidebar-1.2.0/LICENSE +21 -0
  2. {micro_sidebar-1.0.2 → micro_sidebar-1.2.0}/PKG-INFO +40 -36
  3. micro_sidebar-1.2.0/README.md +89 -0
  4. {micro_sidebar-1.0.2 → micro_sidebar-1.2.0}/micro_sidebar.egg-info/PKG-INFO +41 -37
  5. {micro_sidebar-1.0.2 → micro_sidebar-1.2.0}/micro_sidebar.egg-info/SOURCES.txt +4 -3
  6. {micro_sidebar-1.0.2 → micro_sidebar-1.2.0}/pyproject.toml +9 -3
  7. {micro_sidebar-1.0.2 → micro_sidebar-1.2.0}/setup.py +2 -2
  8. micro_sidebar-1.2.0/sidebar/static/sidebar/sidebar.css +200 -0
  9. {micro_sidebar-1.0.2/sidebar/static/sidebar/js → micro_sidebar-1.2.0/sidebar/static/sidebar}/sidebar.js +20 -13
  10. micro_sidebar-1.0.2/sidebar/templates/sidebar/content.html → micro_sidebar-1.2.0/sidebar/templates/sidebar/main.html +20 -5
  11. micro_sidebar-1.0.2/README.md +0 -83
  12. micro_sidebar-1.0.2/sidebar/static/sidebar/style.css +0 -93
  13. {micro_sidebar-1.0.2 → micro_sidebar-1.2.0}/MANIFEST.in +0 -0
  14. {micro_sidebar-1.0.2 → micro_sidebar-1.2.0}/micro_sidebar.egg-info/dependency_links.txt +0 -0
  15. {micro_sidebar-1.0.2 → micro_sidebar-1.2.0}/micro_sidebar.egg-info/requires.txt +0 -0
  16. {micro_sidebar-1.0.2 → micro_sidebar-1.2.0}/micro_sidebar.egg-info/top_level.txt +0 -0
  17. {micro_sidebar-1.0.2 → micro_sidebar-1.2.0}/setup.cfg +0 -0
  18. {micro_sidebar-1.0.2 → micro_sidebar-1.2.0}/sidebar/__init__.py +0 -0
  19. {micro_sidebar-1.0.2 → micro_sidebar-1.2.0}/sidebar/apps.py +0 -0
  20. {micro_sidebar-1.0.2 → micro_sidebar-1.2.0}/sidebar/migrations/__init__.py +0 -0
  21. {micro_sidebar-1.0.2 → micro_sidebar-1.2.0}/sidebar/urls.py +0 -0
  22. {micro_sidebar-1.0.2 → micro_sidebar-1.2.0}/sidebar/views.py +0 -0
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2025 DeBeski
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
@@ -1,7 +1,7 @@
1
- Metadata-Version: 2.4
1
+ Metadata-Version: 2.1
2
2
  Name: micro_sidebar
3
- Version: 1.0.2
4
- Summary: A reusable Django sidebar for Web Apps
3
+ Version: 1.2.0
4
+ Summary: A Reusable RTL Django Sidebar App
5
5
  Home-page: https://github.com/debeski/micro-sidebar
6
6
  Author: DeBeski
7
7
  Author-email: DeBeski <debeski1@gmail.com>
@@ -21,14 +21,14 @@ Classifier: License :: OSI Approved :: MIT License
21
21
  Classifier: Operating System :: OS Independent
22
22
  Requires-Python: >=3.9
23
23
  Description-Content-Type: text/markdown
24
+ License-File: LICENSE
24
25
  Requires-Dist: Django>=5.1
25
- Dynamic: author
26
- Dynamic: home-page
27
- Dynamic: requires-python
28
26
 
29
- # Micro Sidebar
27
+ # Micro Sidebar - A Reusable RTL Django Sidebar App
30
28
 
31
- A reusable RTL Django sidebar app for Web Apps.
29
+ [![PyPI version](https://badge.fury.io/py/micro-sidebar.svg)](https://pypi.org/project/micro-sidebar/)
30
+
31
+ **RTL** lightweight, reusable django app that provides a dynamic sidebar for your django projects.
32
32
 
33
33
  ## Requirements
34
34
 
@@ -37,9 +37,11 @@ A reusable RTL Django sidebar app for Web Apps.
37
37
 
38
38
  ## Installation
39
39
 
40
- 1. **Install the package:**
40
+ 1. **Install:**
41
41
  ```bash
42
42
  pip install micro-sidebar
43
+ # OR
44
+ pip install git+https://github.com/debeski/micro-sidebar.git
43
45
  ```
44
46
 
45
47
  2. **Add to `INSTALLED_APPS`:**
@@ -64,35 +66,35 @@ A reusable RTL Django sidebar app for Web Apps.
64
66
  ]
65
67
  ```
66
68
 
67
- 4. **Add to your Base Template:**
68
- In your `base.html` (or equivalent), include the sidebar. It is designed to sit to the right of your main content.
69
-
70
- Example structure using Flexbox:
71
- ```html
72
- <body>
73
- <div class="d-flex">
74
- <!-- Sidebar -->
75
- {% include "sidebar/content.html" %}
76
-
77
- <!-- Main Content -->
78
- <div class="flex-grow-1">
79
- {% block content %}{% endblock %}
80
- </div>
81
- </div>
82
-
83
- <!-- Bootstrap JS (Required) -->
84
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
85
- </body>
86
- ```
87
-
88
69
  ## Customization
89
70
 
90
- ### Overriding Content
91
- The sidebar comes with a default template. To customize the links and content, create a file named `content.html` inside `templates/sidebar/` in your project's `templates` directory.
92
-
93
- **Path:** `your_project/templates/sidebar/content.html`
94
-
95
- The default sidebar logic expects specific classes like `.list-group-item` and `.accordion-item` for the collapsible features to work correctly with the provided JS.
71
+ ### Override Default Menu
72
+ The sidebar uses a block-based template system. To define your own menu items:
73
+
74
+ 1. Create a new template (e.g., `templates/sidebar_menu.html`).
75
+ 2. Extend `sidebar/main.html`.
76
+ 3. Override the `{% block items %}`.
77
+
78
+ **Example `sidebar_menu.html`:**
79
+ ```html
80
+ {% extends "sidebar/main.html" %}
81
+
82
+ {% block items %}
83
+ <a href="{% url 'home' %}" class="list-group-item list-group-item-action">
84
+ <i class="bi bi-house me-2" style="font-size: 24px;"></i>
85
+ <span>Home</span>
86
+ </a>
87
+ <a href="{% url 'settings' %}" class="list-group-item list-group-item-action">
88
+ <i class="bi bi-gear me-2" style="font-size: 24px;"></i>
89
+ <span>Settings</span>
90
+ </a>
91
+ {% endblock %}
92
+ ```
93
+
94
+ Then, include your custom template in `base.html`:
95
+ ```html
96
+ {% include "sidebar_menu.html" %}
97
+ ```
96
98
 
97
99
  ### Positioning
98
100
  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.
@@ -109,3 +111,5 @@ While it may theoretically work in LTR environments if standard Bootstrap files
109
111
  | **v1.0.0** | Initial Release. |
110
112
  | **v1.0.1** | Fixed titlebar positioning bug causing overlap/gaps. |
111
113
  | **v1.0.2** | Improved documentation clarity and added usage instructions. |
114
+ | **v1.1.0** | Renamed `content.html` to `main.html` for clarity. Refactored to use `{% block items %}` for easier extension. |
115
+ | **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. |
@@ -0,0 +1,89 @@
1
+ # Micro Sidebar - A Reusable RTL Django Sidebar App
2
+
3
+ [![PyPI version](https://badge.fury.io/py/micro-sidebar.svg)](https://pypi.org/project/micro-sidebar/)
4
+
5
+ **RTL** lightweight, reusable django app that provides a dynamic sidebar for your django projects.
6
+
7
+ ## Requirements
8
+
9
+ - **Django**: >= 5.1
10
+ - **Bootstrap**: 5 (Required for consistent styling)
11
+
12
+ ## Installation
13
+
14
+ 1. **Install:**
15
+ ```bash
16
+ pip install micro-sidebar
17
+ # OR
18
+ pip install git+https://github.com/debeski/micro-sidebar.git
19
+ ```
20
+
21
+ 2. **Add to `INSTALLED_APPS`:**
22
+ In your `settings.py`:
23
+ ```python
24
+ INSTALLED_APPS = [
25
+ ...
26
+ 'sidebar',
27
+ ...
28
+ ]
29
+ ```
30
+
31
+ 3. **Configure URLs:**
32
+ In your project's `urls.py`:
33
+ ```python
34
+ from django.urls import path, include
35
+
36
+ urlpatterns = [
37
+ ...
38
+ path('sidebar/', include('sidebar.urls')),
39
+ ...
40
+ ]
41
+ ```
42
+
43
+ ## Customization
44
+
45
+ ### Override Default Menu
46
+ The sidebar uses a block-based template system. To define your own menu items:
47
+
48
+ 1. Create a new template (e.g., `templates/sidebar_menu.html`).
49
+ 2. Extend `sidebar/main.html`.
50
+ 3. Override the `{% block items %}`.
51
+
52
+ **Example `sidebar_menu.html`:**
53
+ ```html
54
+ {% extends "sidebar/main.html" %}
55
+
56
+ {% block items %}
57
+ <a href="{% url 'home' %}" class="list-group-item list-group-item-action">
58
+ <i class="bi bi-house me-2" style="font-size: 24px;"></i>
59
+ <span>Home</span>
60
+ </a>
61
+ <a href="{% url 'settings' %}" class="list-group-item list-group-item-action">
62
+ <i class="bi bi-gear me-2" style="font-size: 24px;"></i>
63
+ <span>Settings</span>
64
+ </a>
65
+ {% endblock %}
66
+ ```
67
+
68
+ Then, include your custom template in `base.html`:
69
+ ```html
70
+ {% include "sidebar_menu.html" %}
71
+ ```
72
+
73
+ ### Positioning
74
+ 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.
75
+
76
+ ## RTL / LTR Support
77
+ This sidebar is primarily designed for **RTL (Right-to-Left)** interfaces (e.g., Arabic).
78
+ While it may theoretically work in LTR environments if standard Bootstrap files are used instead of RTL versions, this has **not been fully tested**.
79
+ > *Future updates are planned to support dynamic language switching between RTL and LTR.*
80
+
81
+ ## Version History
82
+
83
+ | Version | Changes |
84
+ | :--- | :--- |
85
+ | **v1.0.0** | Initial Release. |
86
+ | **v1.0.1** | Fixed titlebar positioning bug causing overlap/gaps. |
87
+ | **v1.0.2** | Improved documentation clarity and added usage instructions. |
88
+ | **v1.1.0** | Renamed `content.html` to `main.html` for clarity. Refactored to use `{% block items %}` for easier extension. |
89
+ | **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. |
@@ -1,7 +1,7 @@
1
- Metadata-Version: 2.4
2
- Name: micro_sidebar
3
- Version: 1.0.2
4
- Summary: A reusable Django sidebar for Web Apps
1
+ Metadata-Version: 2.1
2
+ Name: micro-sidebar
3
+ Version: 1.2.0
4
+ Summary: A Reusable RTL Django Sidebar App
5
5
  Home-page: https://github.com/debeski/micro-sidebar
6
6
  Author: DeBeski
7
7
  Author-email: DeBeski <debeski1@gmail.com>
@@ -21,14 +21,14 @@ Classifier: License :: OSI Approved :: MIT License
21
21
  Classifier: Operating System :: OS Independent
22
22
  Requires-Python: >=3.9
23
23
  Description-Content-Type: text/markdown
24
+ License-File: LICENSE
24
25
  Requires-Dist: Django>=5.1
25
- Dynamic: author
26
- Dynamic: home-page
27
- Dynamic: requires-python
28
26
 
29
- # Micro Sidebar
27
+ # Micro Sidebar - A Reusable RTL Django Sidebar App
30
28
 
31
- A reusable RTL Django sidebar app for Web Apps.
29
+ [![PyPI version](https://badge.fury.io/py/micro-sidebar.svg)](https://pypi.org/project/micro-sidebar/)
30
+
31
+ **RTL** lightweight, reusable django app that provides a dynamic sidebar for your django projects.
32
32
 
33
33
  ## Requirements
34
34
 
@@ -37,9 +37,11 @@ A reusable RTL Django sidebar app for Web Apps.
37
37
 
38
38
  ## Installation
39
39
 
40
- 1. **Install the package:**
40
+ 1. **Install:**
41
41
  ```bash
42
42
  pip install micro-sidebar
43
+ # OR
44
+ pip install git+https://github.com/debeski/micro-sidebar.git
43
45
  ```
44
46
 
45
47
  2. **Add to `INSTALLED_APPS`:**
@@ -64,35 +66,35 @@ A reusable RTL Django sidebar app for Web Apps.
64
66
  ]
65
67
  ```
66
68
 
67
- 4. **Add to your Base Template:**
68
- In your `base.html` (or equivalent), include the sidebar. It is designed to sit to the right of your main content.
69
-
70
- Example structure using Flexbox:
71
- ```html
72
- <body>
73
- <div class="d-flex">
74
- <!-- Sidebar -->
75
- {% include "sidebar/content.html" %}
76
-
77
- <!-- Main Content -->
78
- <div class="flex-grow-1">
79
- {% block content %}{% endblock %}
80
- </div>
81
- </div>
82
-
83
- <!-- Bootstrap JS (Required) -->
84
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
85
- </body>
86
- ```
87
-
88
69
  ## Customization
89
70
 
90
- ### Overriding Content
91
- The sidebar comes with a default template. To customize the links and content, create a file named `content.html` inside `templates/sidebar/` in your project's `templates` directory.
92
-
93
- **Path:** `your_project/templates/sidebar/content.html`
94
-
95
- The default sidebar logic expects specific classes like `.list-group-item` and `.accordion-item` for the collapsible features to work correctly with the provided JS.
71
+ ### Override Default Menu
72
+ The sidebar uses a block-based template system. To define your own menu items:
73
+
74
+ 1. Create a new template (e.g., `templates/sidebar_menu.html`).
75
+ 2. Extend `sidebar/main.html`.
76
+ 3. Override the `{% block items %}`.
77
+
78
+ **Example `sidebar_menu.html`:**
79
+ ```html
80
+ {% extends "sidebar/main.html" %}
81
+
82
+ {% block items %}
83
+ <a href="{% url 'home' %}" class="list-group-item list-group-item-action">
84
+ <i class="bi bi-house me-2" style="font-size: 24px;"></i>
85
+ <span>Home</span>
86
+ </a>
87
+ <a href="{% url 'settings' %}" class="list-group-item list-group-item-action">
88
+ <i class="bi bi-gear me-2" style="font-size: 24px;"></i>
89
+ <span>Settings</span>
90
+ </a>
91
+ {% endblock %}
92
+ ```
93
+
94
+ Then, include your custom template in `base.html`:
95
+ ```html
96
+ {% include "sidebar_menu.html" %}
97
+ ```
96
98
 
97
99
  ### Positioning
98
100
  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.
@@ -109,3 +111,5 @@ While it may theoretically work in LTR environments if standard Bootstrap files
109
111
  | **v1.0.0** | Initial Release. |
110
112
  | **v1.0.1** | Fixed titlebar positioning bug causing overlap/gaps. |
111
113
  | **v1.0.2** | Improved documentation clarity and added usage instructions. |
114
+ | **v1.1.0** | Renamed `content.html` to `main.html` for clarity. Refactored to use `{% block items %}` for easier extension. |
115
+ | **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. |
@@ -1,3 +1,4 @@
1
+ LICENSE
1
2
  MANIFEST.in
2
3
  README.md
3
4
  pyproject.toml
@@ -12,6 +13,6 @@ sidebar/apps.py
12
13
  sidebar/urls.py
13
14
  sidebar/views.py
14
15
  sidebar/migrations/__init__.py
15
- sidebar/static/sidebar/style.css
16
- sidebar/static/sidebar/js/sidebar.js
17
- sidebar/templates/sidebar/content.html
16
+ sidebar/static/sidebar/sidebar.css
17
+ sidebar/static/sidebar/sidebar.js
18
+ sidebar/templates/sidebar/main.html
@@ -1,11 +1,14 @@
1
1
  [build-system]
2
- requires = ["setuptools>=61.0"]
2
+ requires = [
3
+ "setuptools<69",
4
+ "wheel<0.41"
5
+ ]
3
6
  build-backend = "setuptools.build_meta"
4
7
 
5
8
  [project]
6
9
  name = "micro_sidebar"
7
- version = "1.0.2"
8
- description = "A reusable Django sidebar for Web Apps"
10
+ version = "1.2.0"
11
+ description = "A Reusable RTL Django Sidebar App"
9
12
  readme = "README.md"
10
13
  requires-python = ">=3.9"
11
14
  license = {text = "MIT"}
@@ -36,3 +39,6 @@ Homepage = "https://github.com/debeski/micro-sidebar"
36
39
  [tool.setuptools.packages.find]
37
40
  where = ["."]
38
41
  include = ["sidebar*"]
42
+
43
+ [tool.setuptools]
44
+ include-package-data = true
@@ -2,10 +2,10 @@ from setuptools import setup, find_packages
2
2
 
3
3
  setup(
4
4
  name="micro_sidebar",
5
- version="1.0.2",
5
+ version="1.2.0",
6
6
  author="DeBeski",
7
7
  author_email="debeski1@gmail.com",
8
- description="A reusable Django sidebar for Web Apps",
8
+ description="A Reusable RTL Django Sidebar App",
9
9
  long_description=open('README.md').read() if open('README.md') else '',
10
10
  long_description_content_type="text/markdown",
11
11
  url="https://github.com/debeski/micro-sidebar",
@@ -0,0 +1,200 @@
1
+ .sidebar {
2
+ z-index: 900;
3
+ transition: width 0.2s ease-in-out;
4
+ background: linear-gradient(180deg, #ffffff 10%, #f1f7fd 100%);
5
+ position: sticky;
6
+ /* Use the JS-provided offset, fallback to 0 if standalone */
7
+ top: var(--sidebar-top-offset, 0px);
8
+ overflow-y: auto;
9
+ overflow-x: hidden;
10
+ height: calc(100vh - var(--sidebar-top-offset, 0px));
11
+ border-left: 1px solid #f1f3f5;
12
+ scrollbar-width: thin;
13
+ scrollbar-color: rgba(0,0,0,0.1) transparent;
14
+
15
+ /* Variables for stable positioning */
16
+ --sidebar-item-px: 12.5px;
17
+ --sidebar-icon-width: 40px;
18
+ }
19
+
20
+ .sidebar::-webkit-scrollbar {
21
+ width: 6px;
22
+ }
23
+ .sidebar::-webkit-scrollbar-track {
24
+ background: transparent;
25
+ }
26
+ .sidebar::-webkit-scrollbar-thumb {
27
+ background-color: rgba(0,0,0,0.2);
28
+ border-radius: 20px;
29
+ }
30
+
31
+ .sidebar.collapsed {
32
+ width: 65px !important;
33
+ }
34
+
35
+ /* Stable layout for icons - NO OVERRIDES for padding/gap here! */
36
+ .sidebar.collapsed .list-group-item span,
37
+ .sidebar.collapsed .accordion-button span {
38
+ opacity: 0;
39
+ visibility: hidden;
40
+ width: 0;
41
+ display: inline-block; /* Keep it in flow but hidden */
42
+ }
43
+
44
+ .sidebar .list-group-item span,
45
+ .sidebar .accordion-button span {
46
+ transition: opacity 0.2s ease, visibility 0.2s;
47
+ white-space: nowrap;
48
+ }
49
+
50
+ .sidebar.collapsed .accordion-button::after {
51
+ display: none !important;
52
+ }
53
+
54
+ .sidebar-ghost {
55
+ display: none;
56
+ width: 52px;
57
+ flex-shrink: 0;
58
+ }
59
+
60
+ @media (max-width: 1100px) {
61
+ .sidebar-ghost {
62
+ display: block;
63
+ }
64
+
65
+ .sidebar {
66
+ position: fixed;
67
+ /* Use dynamic offset even in fixed mode for consistency */
68
+ top: var(--sidebar-top-offset, 0px);
69
+ right: 0;
70
+ width: 250px;
71
+ transition: width 0.15s ease-in-out;
72
+ height: calc(100vh - var(--sidebar-top-offset, 0px));
73
+ z-index: 1000;
74
+ --sidebar-item-px: 6px;
75
+ }
76
+
77
+ .sidebar.collapsed {
78
+ width: 52px !important;
79
+ right: 0;
80
+ position: fixed;
81
+ }
82
+ }
83
+ /* Sidebar Styling Redesign */
84
+ .sidebar .list-group-item {
85
+ border: 1px solid transparent !important; /* Reserve space to prevent jumps */
86
+ font-size: 0.95rem !important;
87
+ font-weight: 600 !important;
88
+ color: #5a6474; /* Softer text color */
89
+ margin: 4px 0;
90
+ border-radius: 12px !important; /* Rounded pill shape */
91
+ transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
92
+ display: flex;
93
+ align-items: center;
94
+ gap: 10px;
95
+ padding: 12px var(--sidebar-item-px);
96
+ white-space: nowrap;
97
+ overflow: hidden;
98
+ }
99
+
100
+ .sidebar .list-group-item:hover {
101
+ background-color: transparent !important;
102
+ color: var(--primal) !important;
103
+ transform: translateX(-4px); /* Tactile slide for RTL */
104
+ }
105
+
106
+ .sidebar .list-group-item.active {
107
+ border: 1px solid transparent !important; /* Keep the 1px reserve */
108
+ background-color: rgba(35, 99, 195, 0.05) !important; /* Lighter soft blue */
109
+ color: var(--primal) !important;
110
+ font-weight: 700 !important;
111
+ box-shadow: 0 4px 12px rgba(35, 99, 195, 0.08) !important;
112
+ }
113
+
114
+ .sidebar .list-group-item i,
115
+ .sidebar .accordion-button i {
116
+ width: var(--sidebar-icon-width);
117
+ display: flex;
118
+ justify-content: center;
119
+ flex-shrink: 0;
120
+ font-size: 1.25rem;
121
+ transition: transform 0.2s ease, color 0.2s;
122
+ color: #8c98a4; /* Muted icon color by default */
123
+ }
124
+
125
+ .sidebar .list-group-item:hover i,
126
+ .sidebar .list-group-item.active i,
127
+ .sidebar .accordion-button:hover i,
128
+ .sidebar .accordion-button:not(.collapsed) i {
129
+ transform: scale(1.1);
130
+ color: var(--primal); /* Active/Hover icon color */
131
+ }
132
+
133
+ .sidebar .accordion-button {
134
+ font-size: 0.95rem !important;
135
+ font-weight: 600 !important;
136
+ color: #5a6474;
137
+ background-color: transparent !important;
138
+ border: 1px solid transparent !important; /* Reserve space here too */
139
+ border-radius: 12px !important;
140
+ margin: 4px 0;
141
+ padding: 12px var(--sidebar-item-px);
142
+ display: flex;
143
+ align-items: center;
144
+ gap: 10px;
145
+ white-space: nowrap;
146
+ overflow: hidden;
147
+ transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
148
+ }
149
+
150
+ .sidebar .accordion-button:not(.collapsed) {
151
+ background-color: rgba(35, 99, 195, 0.04) !important; /* Very subtle open state */
152
+ color: var(--primal) !important;
153
+ font-weight: 700 !important;
154
+ }
155
+
156
+ .sidebar .accordion-button:hover {
157
+ color: var(--primal) !important;
158
+ background-color: transparent !important;
159
+ transform: translateX(-4px);
160
+ }
161
+
162
+ .sidebar .accordion-item {
163
+ background-color: transparent !important;
164
+ border: none !important;
165
+ }
166
+
167
+ .sidebar .accordion-body {
168
+ background-color: transparent !important;
169
+ border: none !important;
170
+ padding-top: 0;
171
+ padding-bottom: 0;
172
+ }
173
+
174
+
175
+ .sidebar-toggle {
176
+ background-color: transparent;
177
+ color: #2c3e50;
178
+ border: none;
179
+ transition: background-color 0.3s, transform 0.1s;
180
+ min-width: 5vh;
181
+ min-height: 5vh;
182
+ font-size: 1.5rem;
183
+ }
184
+
185
+ .sidebar-toggle:hover {
186
+ background-color: #f8f9fa;
187
+ color: #0d6efd;
188
+ }
189
+
190
+ .sidebar-toggle:active {
191
+ transform: scale(0.95);
192
+ }
193
+
194
+ .tooltip-custom .tooltip-inner {
195
+ font-size: 1.2rem;
196
+ background-color: var(--title);
197
+ color: white;
198
+ padding: 8px 12px;
199
+ border-radius: 5px;
200
+ }
@@ -22,23 +22,15 @@ document.addEventListener("DOMContentLoaded", function () {
22
22
  function adjustSidebarForWindowSize() {
23
23
  const screenWidth = window.innerWidth;
24
24
  const titlebar = document.querySelector('.titlebar');
25
- const titlebarHeight = titlebar ? titlebar.offsetHeight : 0;
25
+ const titlebarHeight = (titlebar && window.getComputedStyle(titlebar).display !== 'none') ? titlebar.offsetHeight : 0;
26
+
27
+ // Set dynamic CSS variable for the sidebar
28
+ sidebar.style.setProperty('--sidebar-top-offset', titlebarHeight + 'px');
26
29
 
27
30
  if (screenWidth < 1100) {
28
31
  // Always collapse sidebar on small screens
29
32
  sidebar.classList.add("collapsed");
30
33
  initializeTooltips();
31
-
32
- // Dynamic positioning to anchor to titlebar
33
- // Dynamic positioning to anchor to titlebar
34
- if (titlebarHeight > 0) {
35
- sidebar.style.top = titlebarHeight + 'px';
36
- sidebar.style.height = (window.innerHeight - titlebarHeight) + 'px';
37
- } else {
38
- // Failsafe: Stick to top if no titlebar
39
- sidebar.style.top = '0px';
40
- sidebar.style.height = '100vh';
41
- }
42
34
  } else {
43
35
  // Reset styles for large screens to let CSS take over (sticky)
44
36
  sidebar.style.top = '';
@@ -99,6 +91,20 @@ document.addEventListener("DOMContentLoaded", function () {
99
91
  setTimeout(triggerAutoscale, 250);
100
92
  });
101
93
  }
94
+
95
+ // Proactively hide tooltips when any sidebar click occurs
96
+ // This fixes the "sticking to top of screen" glitch during transitions
97
+ sidebar.addEventListener("click", function (event) {
98
+ // Find all tooltips in the sidebar and dispose them immediately
99
+ // This ensures they are completely removed from the DOM before any transition
100
+ const sidebarItems = sidebar.querySelectorAll(".list-group-item, .accordion-button");
101
+ sidebarItems.forEach(item => {
102
+ if (item._tooltip) {
103
+ item._tooltip.dispose();
104
+ delete item._tooltip;
105
+ }
106
+ });
107
+ });
102
108
  });
103
109
 
104
110
  // Close sidebar when clicking outside (only for small screens)
@@ -138,7 +144,8 @@ function initializeTooltips() {
138
144
  item._tooltip = new bootstrap.Tooltip(item, {
139
145
  title: item.querySelector("span").textContent,
140
146
  placement: "right",
141
- customClass: "tooltip-custom"
147
+ customClass: "tooltip-custom",
148
+ trigger: 'hover' // Explicitly disable click/focus triggers
142
149
  });
143
150
  });
144
151
  }
@@ -1,6 +1,6 @@
1
1
  {% load static %}
2
- <link rel="stylesheet" href="{% static 'sidebar/style.css' %}">
3
- <script src="{% static 'sidebar/js/sidebar.js' %}" nonce="{{ request.csp_nonce }}" defer></script>
2
+ <link rel="stylesheet" href="{% static 'sidebar/sidebar.css' %}">
3
+ <script src="{% static 'sidebar/sidebar.js' %}" nonce="{{ request.csp_nonce }}" defer></script>
4
4
  <!-- Ghost Sidebar for small screens layout stability -->
5
5
  <div class="sidebar-ghost"></div>
6
6
 
@@ -9,16 +9,30 @@
9
9
  id="sidebar"
10
10
  data-toggle-url="{% url 'toggle_sidebar' %}"
11
11
  data-session-collapsed="{{ request.session.sidebarCollapsed|yesno:'true,false' }}">
12
+ <script>
13
+ // Immediate FOUC fix for small screens
14
+ (function() {
15
+ var screenWidth = window.innerWidth;
16
+ var sidebar = document.currentScript.parentElement;
17
+ if (screenWidth < 1100) {
18
+ sidebar.classList.add('collapsed');
19
+ // Temporarily disable transition to avoid "sliding shut" flicker on load
20
+ sidebar.style.transition = 'none';
21
+ setTimeout(function() { sidebar.style.transition = ''; }, 100);
22
+ }
23
+ })();
24
+ </script>
12
25
  <div class="list-group flex-shrink-0">
26
+ {% block items %}
13
27
 
14
28
  <!-- DEFAULT CONTENT / INSTRUCTIONS -->
15
29
  <div class="p-3 text-center text-muted">
16
30
  <i class="bi bi-info-circle mb-2" style="font-size: 24px;"></i>
17
31
  <p class="small">
18
32
  <strong>Default Sidebar</strong><br>
19
- To customize this menu, create a file at:<br>
20
- <code>templates/sidebar/content.html</code><br>
21
- in your Django project.
33
+ To customize this menu, create a template extending:<br>
34
+ <code>sidebar/main.html</code><br>
35
+ and override the <code>items</code> block.
22
36
  </p>
23
37
  </div>
24
38
 
@@ -27,5 +41,6 @@
27
41
  <span>Example Home</span>
28
42
  </a>
29
43
 
44
+ {% endblock %}
30
45
  </div>
31
46
  </div>
@@ -1,83 +0,0 @@
1
- # Micro Sidebar
2
-
3
- A reusable RTL Django sidebar app for Web Apps.
4
-
5
- ## Requirements
6
-
7
- - **Django**: >= 5.1
8
- - **Bootstrap**: 5 (Required for consistent styling)
9
-
10
- ## Installation
11
-
12
- 1. **Install the package:**
13
- ```bash
14
- pip install micro-sidebar
15
- ```
16
-
17
- 2. **Add to `INSTALLED_APPS`:**
18
- In your `settings.py`:
19
- ```python
20
- INSTALLED_APPS = [
21
- ...
22
- 'sidebar',
23
- ...
24
- ]
25
- ```
26
-
27
- 3. **Configure URLs:**
28
- In your project's `urls.py`:
29
- ```python
30
- from django.urls import path, include
31
-
32
- urlpatterns = [
33
- ...
34
- path('sidebar/', include('sidebar.urls')),
35
- ...
36
- ]
37
- ```
38
-
39
- 4. **Add to your Base Template:**
40
- In your `base.html` (or equivalent), include the sidebar. It is designed to sit to the right of your main content.
41
-
42
- Example structure using Flexbox:
43
- ```html
44
- <body>
45
- <div class="d-flex">
46
- <!-- Sidebar -->
47
- {% include "sidebar/content.html" %}
48
-
49
- <!-- Main Content -->
50
- <div class="flex-grow-1">
51
- {% block content %}{% endblock %}
52
- </div>
53
- </div>
54
-
55
- <!-- Bootstrap JS (Required) -->
56
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
57
- </body>
58
- ```
59
-
60
- ## Customization
61
-
62
- ### Overriding Content
63
- The sidebar comes with a default template. To customize the links and content, create a file named `content.html` inside `templates/sidebar/` in your project's `templates` directory.
64
-
65
- **Path:** `your_project/templates/sidebar/content.html`
66
-
67
- The default sidebar logic expects specific classes like `.list-group-item` and `.accordion-item` for the collapsible features to work correctly with the provided JS.
68
-
69
- ### Positioning
70
- 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.
71
-
72
- ## RTL / LTR Support
73
- This sidebar is primarily designed for **RTL (Right-to-Left)** interfaces (e.g., Arabic).
74
- While it may theoretically work in LTR environments if standard Bootstrap files are used instead of RTL versions, this has **not been fully tested**.
75
- > *Future updates are planned to support dynamic language switching between RTL and LTR.*
76
-
77
- ## Version History
78
-
79
- | Version | Changes |
80
- | :--- | :--- |
81
- | **v1.0.0** | Initial Release. |
82
- | **v1.0.1** | Fixed titlebar positioning bug causing overlap/gaps. |
83
- | **v1.0.2** | Improved documentation clarity and added usage instructions. |
@@ -1,93 +0,0 @@
1
-
2
- .sidebar {
3
- z-index: 900;
4
- transition: width 0.15s ease-in-out;
5
- background-color: white;
6
- position: -webkit-sticky; /* For Safari */
7
- position: sticky;
8
- top: 0; /* Sticks the sidebar at the top of the parent container */
9
- overflow-y: auto;
10
- overflow-x: hidden;
11
- height: calc(100vh - 45px); /* Fallback/Base height for sticky behavior */
12
- /* Custom Scrollbar for Webkit */
13
- scrollbar-width: thin;
14
- scrollbar-color: rgba(0,0,0,0.2) transparent;
15
- }
16
-
17
- .sidebar::-webkit-scrollbar {
18
- width: 6px;
19
- }
20
- .sidebar::-webkit-scrollbar-track {
21
- background: transparent;
22
- }
23
- .sidebar::-webkit-scrollbar-thumb {
24
- background-color: rgba(0,0,0,0.2);
25
- border-radius: 20px;
26
- }
27
-
28
- .sidebar.collapsed {
29
- width: 52px !important;
30
- }
31
- .sidebar.collapsed .list-group-item span {
32
- display: none !important;
33
- }
34
- .sidebar.collapsed .accordion-button span {
35
- display: none !important;
36
- }
37
- .sidebar.collapsed .accordion-button::after {
38
- background-image: none;
39
- }
40
-
41
-
42
- .sidebar-ghost {
43
- display: none;
44
- width: 52px;
45
- flex-shrink: 0;
46
- }
47
-
48
- @media (max-width: 1100px) {
49
- .sidebar-ghost {
50
- display: block;
51
- }
52
-
53
- .sidebar {
54
- position: fixed;
55
- top: 45px; /* Fallback, JS calculates exact height */
56
- right: 0;
57
- width: 250px;
58
- transition: width 0.15s ease-in-out;
59
- height: calc(100vh - 45px); /* Fallback */
60
- z-index: 1000;
61
- }
62
-
63
- .sidebar.collapsed {
64
- width: 52px !important;
65
- right: 0;
66
- position: fixed;
67
- }
68
- }
69
- .sidebar .list-group-item {
70
- border: none !important;
71
- font-size: 18px !important;
72
- font-weight: 600 !important;
73
- height: 60px !important;
74
- white-space: nowrap;
75
- overflow: hidden;
76
- padding: 12px;
77
- align-items: center;
78
- }
79
-
80
- .sidebar .accordion-button {
81
- font-size: 18px !important;
82
- font-weight: 600 !important;
83
- border: none !important;
84
- height: 60px !important;
85
- white-space: nowrap;
86
- overflow: hidden;
87
- padding: 12px;
88
- align-items: center;
89
- }
90
-
91
- .sidebar .accordion-button:not(.collapsed) {
92
- background-color: var(--body) !important;
93
- }
File without changes
File without changes