Skip to content

Commit 2e0705e

Browse files
largereptilelargereptile
committed
use blocks to override segments of sidebar instead of duplicating the whole sidebar code
1 parent 04e57c5 commit 2e0705e

2 files changed

Lines changed: 86 additions & 188 deletions

File tree

‎src/templates/app/media_list.html‎

Lines changed: 53 additions & 173 deletions
Original file line numberDiff line numberDiff line change
@@ -188,183 +188,63 @@ <h3 class="text-xl font-semibold mb-2">No {{ media_type|media_type_readable_plur
188188
</div>
189189
{% endblock content %}
190190

191-
{% block sidebar %}
192-
<aside class="fixed top-0 left-0 z-40 h-screen w-64 bg-[#1a1d20] transform transition-transform duration-300 ease-in-out border-r border-[#2c3136] -translate-x-full lg:translate-x-0 lg:sticky flex flex-col"
193-
:class="isMobileMenuOpen ? 'translate-x-0' : ''">
194-
<div class="h-16 border-b border-[#2c3136] flex items-center px-6">
195-
<h1 class="text-2xl font-semibold text-gray-100">Yamtrack</h1>
196-
</div>
197-
<nav class="p-4 flex-1 overflow-y-auto">
198-
<ul class="space-y-1 mb-6">
199-
{% if request.user.is_authenticated %}
200-
<li>
201-
<a href="{% url 'home' %}"
202-
class="flex items-center space-x-3 px-4 py-2 rounded-md transition-colors duration-200 text-sm {% if request.path == "/" %}text-white bg-[#2c3136]{% else %}text-gray-400 hover:text-white hover:bg-[#23272b]{% endif %}">
203-
{% if request.path|str_equals:"/" %}
204-
{% include "app/icons/house.svg" with classes="w-5 h-5 text-indigo-400 " %}
205-
206-
{% else %}
207-
{% include "app/icons/house.svg" with classes="w-5 h-5" %}
208-
209-
{% endif %}
210-
<span>Home</span>
211-
</a>
212-
</li>
213-
{% get_sidebar_media_types request.user as sidebar_media_types %}
214-
{% for item in sidebar_media_types %}
215-
<li>
216-
<a href="{% url 'medialist' username=request.user.username media_type=item.media_type %}"
217-
class="flex items-center space-x-3 px-4 py-2 rounded-md transition-colors duration-200 text-sm text-gray-400 hover:text-white hover:bg-[#23272b]">
218-
{% icon item.media_type is_active=False %}
219-
<span>{{ item.display_name }}</span>
220-
</a>
221-
</li>
222-
{% endfor %}
223-
{% endif %}
224-
{% if target_user != request.user %}
225-
<div {% if request.user.is_authenticated %}class="border-t border-[#2c3136] pt-4"{% endif %}>
226-
<li>
227-
<span class="flex font-bold items-center space-x-3 px-4 py-2 rounded-md transition-colors duration-200 text-sm text-white">{{ target_user.username }}'s Media:</span>
228-
</li>
229-
</div>
230-
{% get_sidebar_media_types target_user as sidebar_media_types %}
231-
{% for item in sidebar_media_types %}
232-
<li>
233-
<a href="{% url 'medialist' username=target_user.username media_type=item.media_type %}"
234-
class="flex items-center space-x-3 px-4 py-2 rounded-md transition-colors duration-200 text-sm {% if media_type == item.media_type %}text-white bg-[#2c3136]{% else %}text-gray-400 hover:text-white hover:bg-[#23272b]{% endif %}">
235-
{% icon item.media_type is_active=media_type|str_equals:item.media_type %}
236-
<span>{{ item.display_name }}</span>
237-
238-
</a>
239-
</li>
240-
{% endfor %}
241-
</ul>
242-
{% endif %}
243-
{% if request.user.is_authenticated %}
244-
<div class="border-t border-[#2c3136] pt-4">
245-
<ul class="space-y-1">
246-
{% url 'create_entry' as create_entry_url %}
247-
<li>
248-
<a href="{{ create_entry_url }}"
249-
class="flex items-center space-x-3 px-4 py-2 rounded-md transition-colors duration-200 text-sm {% if request.path == create_entry_url %}text-white bg-[#2c3136]{% else %}text-gray-400 hover:text-white hover:bg-[#23272b]{% endif %}">
250-
{% if request.path|str_equals:create_entry_url %}
251-
{% include "app/icons/circle-plus.svg" with classes="w-5 h-5 text-indigo-400 " %}
252-
253-
{% else %}
254-
{% include "app/icons/circle-plus.svg" with classes="w-5 h-5" %}
255-
256-
{% endif %}
257-
<span>Create Custom</span>
258-
</a>
259-
</li>
260-
261-
{% url 'statistics' as statistics_url %}
262-
<li>
263-
<a href="{{ statistics_url }}"
264-
class="flex items-center space-x-3 px-4 py-2 rounded-md transition-colors duration-200 text-sm {% if request.path == statistics_url %}text-white bg-[#2c3136]{% else %}text-gray-400 hover:text-white hover:bg-[#23272b]{% endif %}">
265-
{% if request.path|str_equals:statistics_url %}
266-
{% include "app/icons/bars-pyramid.svg" with classes="w-5 h-5 text-indigo-400 " %}
267-
268-
{% else %}
269-
{% include "app/icons/bars-pyramid.svg" with classes="w-5 h-5" %}
270-
271-
{% endif %}
272-
<span>Statistics</span>
273-
</a>
274-
</li>
275-
276-
{% url 'lists' as lists_url %}
277-
<li>
278-
<a href="{{ lists_url }}"
279-
class="flex items-center space-x-3 px-4 py-2 rounded-md transition-colors duration-200 text-sm {% if request.path == lists_url %}text-white bg-[#2c3136]{% else %}text-gray-400 hover:text-white hover:bg-[#23272b]{% endif %}">
280-
{% if request.path|str_equals:lists_url %}
281-
{% include "app/icons/folder-plus.svg" with classes="w-5 h-5 text-indigo-400 " %}
282-
283-
{% else %}
284-
{% include "app/icons/folder-plus.svg" with classes="w-5 h-5" %}
285-
286-
{% endif %}
287-
<span>Lists</span>
288-
</a>
289-
</li>
290-
291-
{% url 'calendar' as calendar_url %}
292-
<li>
293-
<a href="{{ calendar_url }}"
294-
class="flex items-center space-x-3 px-4 py-2 rounded-md transition-colors duration-200 text-sm {% if request.path == calendar_url %}text-white bg-[#2c3136]{% else %}text-gray-400 hover:text-white hover:bg-[#23272b]{% endif %}">
295-
{% if request.path|str_equals:calendar_url %}
296-
{% include "app/icons/calendar.svg" with classes="w-5 h-5 text-indigo-400 " %}
297-
298-
{% else %}
299-
{% include "app/icons/calendar.svg" with classes="w-5 h-5" %}
300-
301-
{% endif %}
302-
<span>Calendar</span>
303-
</a>
304-
</li>
305-
</ul>
306-
</div>
307-
</nav>
308-
{% endif %}
309-
310-
{% if request.user.is_authenticated %}
311-
<div class="p-4 border-t border-[#2c3136] mt-auto">
312-
<div class="space-y-2">
313-
{% url 'account' as account_url %}
314-
{% url 'notifications' as notifications_url %}
315-
{% url 'sidebar' as sidebar_url %}
316-
{% url 'integrations' as integrations_url %}
317-
{% url 'import_data' as import_url %}
318-
{% url 'export_data' as export_url %}
319-
<a href="{{ account_url }}"
320-
class="flex items-center space-x-3 px-4 py-2 rounded-md transition-colors duration-200 text-sm {% if request.path == account_url or request.path == notifications_url or request.path == sidebar_url or request.path == integrations_url or request.path == import_url or request.path == export_url %}text-white bg-[#2c3136]{% else %}text-gray-400 hover:text-white hover:bg-[#23272b]{% endif %}">
321-
{% if request.path == account_url or request.path == notifications_url or request.path == sidebar_url or request.path == integrations_url or request.path == import_url or request.path == export_url %}
322-
{% include "app/icons/settings.svg" with classes="w-5 h-5 text-indigo-400 " %}
323-
324-
{% else %}
325-
{% include "app/icons/settings.svg" with classes="w-5 h-5" %}
326-
327-
{% endif %}
328-
<span>Settings</span>
191+
{% block sidebar_own_media %}
192+
{% if request.user.is_authenticated %}{{ block.super }}{% endif %}
193+
{% endblock sidebar_own_media %}
194+
195+
{% block sidebar_external_media_view %}
196+
{% if target_user != request.user %}
197+
<ul class="space-y-1 mb-6 {% if request.user.is_authenticated %}border-t border-[#2c3136] pt-4{% endif %}">
198+
<li>
199+
<span class="flex font-bold items-center space-x-3 px-4 py-2 rounded-md transition-colors duration-200 text-sm text-white">{{ target_user.username }}'s Media:</span>
200+
</li>
201+
{% get_sidebar_media_types target_user as sidebar_media_types %}
202+
{% for item in sidebar_media_types %}
203+
<li>
204+
<a href="{% url 'medialist' username=target_user.username media_type=item.media_type %}"
205+
class="flex items-center space-x-3 px-4 py-2 rounded-md transition-colors duration-200 text-sm {% if media_type == item.media_type %}text-white bg-[#2c3136]{% else %}text-gray-400 hover:text-white hover:bg-[#23272b]{% endif %}">
206+
{% icon item.media_type is_active=media_type|str_equals:item.media_type %}
207+
<span>{{ item.display_name }}</span>
329208
</a>
209+
</li>
210+
{% endfor %}
211+
</ul>
212+
{% endif %}
213+
{% endblock sidebar_external_media_view %}
330214

331-
<form method="post" action="{% url 'account_logout' %}" class="w-full">
332-
{% csrf_token %}
333-
<button type="submit"
334-
class="w-full flex items-center space-x-3 px-4 py-2 rounded-md text-gray-400 hover:bg-[#23272b] hover:text-white transition-colors duration-200 text-sm cursor-pointer">
335-
{% include "app/icons/logout.svg" with classes="w-5 h-5" %}
215+
{% block sidebar_utilities %}
216+
{% if request.user.is_authenticated %}{{ block.super }}{% endif %}
217+
{% endblock sidebar_utilities %}
336218

337-
<span>Logout</span>
338-
</button>
339-
</form>
340-
</div>
341-
</div>
342-
{% else %}
343-
<div class="p-4 border-t border-[#2c3136] mt-auto">
344-
<div class="space-y-2">
345-
<a href="/accounts/login/?next={{ request.path }}"
346-
class="mt-4 p-3 rounded-lg w-full flex items-center justify-center gap-2 text-white duration-300 cursor-pointer bg-indigo-600 hover:bg-indigo-700 ">
347-
<svg xmlns="http://www.w3.org/2000/svg"
348-
width="18"
349-
height="18"
350-
viewBox="0 0 24 24"
351-
fill="none"
352-
stroke="currentColor"
353-
stroke-width="2"
354-
stroke-linecap="round"
355-
stroke-linejoin="round">
356-
<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
357-
<polyline points="10 17 15 12 10 7"></polyline>
358-
<line x1="15" x2="3" y1="12" y2="12"></line>
359-
</svg>
360-
Sign In
361-
</a>
362-
</div>
219+
{% block sidebar_logout %}
220+
{% if request.user.is_authenticated %}{{ block.super }}{% endif %}
221+
{% endblock sidebar_logout %}
222+
223+
{% block anonymous_login %}
224+
{% if not request.user.is_authenticated %}
225+
<div class="p-4 border-t border-[#2c3136] mt-auto">
226+
<div class="space-y-2">
227+
<a href="/accounts/login/?next={{ request.path }}"
228+
class="mt-4 p-3 rounded-lg w-full flex items-center justify-center gap-2 text-white duration-300 cursor-pointer bg-indigo-600 hover:bg-indigo-700 ">
229+
<svg xmlns="http://www.w3.org/2000/svg"
230+
width="18"
231+
height="18"
232+
viewBox="0 0 24 24"
233+
fill="none"
234+
stroke="currentColor"
235+
stroke-width="2"
236+
stroke-linecap="round"
237+
stroke-linejoin="round">
238+
<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
239+
<polyline points="10 17 15 12 10 7"></polyline>
240+
<line x1="15" x2="3" y1="12" y2="12"></line>
241+
</svg>
242+
Sign In
243+
</a>
363244
</div>
364-
{% endif %}
365-
366-
</aside>
367-
{% endblock sidebar %}
245+
</div>
246+
{% endif %}
247+
{% endblock anonymous_login %}
368248

369249
{% block search_bar %}
370250
{% if request.user.is_authenticated %}{{ block.super }}{% endif %}

‎src/templates/base.html‎

Lines changed: 33 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -65,13 +65,13 @@
6565
@click="isMobileMenuOpen = false"></div>
6666

6767
{# Sidebar #}
68-
{% block sidebar %}
69-
<aside class="fixed top-0 left-0 z-40 h-screen w-64 bg-[#1a1d20] transform transition-transform duration-300 ease-in-out border-r border-[#2c3136] -translate-x-full lg:translate-x-0 lg:sticky flex flex-col"
70-
:class="isMobileMenuOpen ? 'translate-x-0' : ''">
71-
<div class="h-16 border-b border-[#2c3136] flex items-center px-6">
72-
<h1 class="text-2xl font-semibold text-gray-100">Yamtrack</h1>
73-
</div>
74-
<nav class="p-4 flex-1 overflow-y-auto">
68+
<aside class="fixed top-0 left-0 z-40 h-screen w-64 bg-[#1a1d20] transform transition-transform duration-300 ease-in-out border-r border-[#2c3136] -translate-x-full lg:translate-x-0 lg:sticky flex flex-col"
69+
:class="isMobileMenuOpen ? 'translate-x-0' : ''">
70+
<div class="h-16 border-b border-[#2c3136] flex items-center px-6">
71+
<h1 class="text-2xl font-semibold text-gray-100">Yamtrack</h1>
72+
</div>
73+
<nav class="p-4 flex-1 overflow-y-auto">
74+
{% block sidebar_own_media %}
7575
<ul class="space-y-1 mb-6">
7676
<li>
7777
<a href="{% url 'home' %}"
@@ -90,15 +90,28 @@ <h1 class="text-2xl font-semibold text-gray-100">Yamtrack</h1>
9090
{% get_sidebar_media_types user as sidebar_media_types %}
9191
{% for item in sidebar_media_types %}
9292
<li>
93-
<a href="{% url 'medialist' username=user.username media_type=item.media_type %}"
94-
class="flex items-center space-x-3 px-4 py-2 rounded-md transition-colors duration-200 text-sm {% if media_type == item.media_type %}text-white bg-[#2c3136]{% else %}text-gray-400 hover:text-white hover:bg-[#23272b]{% endif %}">
95-
{% icon item.media_type is_active=media_type|str_equals:item.media_type %}
96-
<span>{{ item.display_name }}</span>
97-
</a>
93+
{% if target_user is None or target_user == request.user %}
94+
<a href="{% url 'medialist' username=user.username media_type=item.media_type %}"
95+
class="flex items-center space-x-3 px-4 py-2 rounded-md transition-colors duration-200 text-sm {% if media_type == item.media_type %}text-white bg-[#2c3136]{% else %}text-gray-400 hover:text-white hover:bg-[#23272b]{% endif %}">
96+
{% icon item.media_type is_active=media_type|str_equals:item.media_type %}
97+
<span>{{ item.display_name }}</span>
98+
</a>
99+
{% else %}
100+
<a href="{% url 'medialist' username=user.username media_type=item.media_type %}"
101+
class="flex items-center space-x-3 px-4 py-2 rounded-md transition-colors duration-200 text-sm text-gray-400 hover:text-white hover:bg-[#23272b]">
102+
{% icon item.media_type is_active=False %}
103+
<span>{{ item.display_name }}</span>
104+
</a>
105+
{% endif %}
98106
</li>
99107
{% endfor %}
100108
</ul>
109+
{% endblock sidebar_own_media %}
110+
111+
{% block sidebar_external_media_view %}
112+
{% endblock sidebar_external_media_view %}
101113

114+
{% block sidebar_utilities %}
102115
<div class="border-t border-[#2c3136] pt-4">
103116
<ul class="space-y-1">
104117
{% url 'create_entry' as create_entry_url %}
@@ -162,8 +175,10 @@ <h1 class="text-2xl font-semibold text-gray-100">Yamtrack</h1>
162175
</li>
163176
</ul>
164177
</div>
165-
</nav>
178+
{% endblock sidebar_utilities %}
179+
</nav>
166180

181+
{% block sidebar_logout %}
167182
<div class="p-4 border-t border-[#2c3136] mt-auto">
168183
<div class="space-y-2">
169184
{% url 'account' as account_url %}
@@ -195,8 +210,11 @@ <h1 class="text-2xl font-semibold text-gray-100">Yamtrack</h1>
195210
</form>
196211
</div>
197212
</div>
198-
</aside>
199-
{% endblock sidebar %}
213+
{% endblock sidebar_logout %}
214+
215+
{% block anonymous_login %}
216+
{% endblock anonymous_login %}
217+
</aside>
200218

201219
{# Main content #}
202220
<div class="flex-1 min-w-0 flex flex-col min-h-screen">

0 commit comments

Comments
 (0)