Article page: offcanvas-lg sidebar (sticky desktop, right slide mobile), compact action row; persistent accordion state (localStorage)

web/src/main/resources/templates/learn/article.html

@@ -3,8 +3,14 @@
 <head><title th:text="${article.title} + ' — LMS'">Статья</title></head>
 <body>
 <div id="content">
-    <div class="learn-layout">
-        <aside class="learn-side">
+    <div class="row g-4 align-items-start">
+        <div class="col-12 col-lg-3 order-lg-1 order-2">
+        <aside class="learn-side offcanvas-lg offcanvas-end" tabindex="-1" id="articleSide" aria-label="Содержание">
+            <div class="offcanvas-header d-lg-none">
+                <span class="offcanvas-title">Содержание</span>
+                <button type="button" class="navbar-close" data-bs-dismiss="offcanvas" aria-label="Закрыть">✕</button>
+            </div>
+            <div class="offcanvas-body p-0">
             <div class="card card-body">
                 <p class="text-sm text-muted mb-2">Содержание</p>
                 <div th:each="c : ${tree.chapters}">
@@ -26,9 +32,11 @@
                     </div>
                 </div>
             </div>
+            </div>
         </aside>
+        </div>
 
-        <div class="learn-main">
+        <div class="col-12 col-lg-9 order-1">
             <nav class="text-sm mb-4 breadcrumb">
                 <a th:href="@{/learn}" class="nav-link">Материалы</a>
                 <span class="nav-sep">/</span>
@@ -40,12 +48,18 @@
                 <span th:text="${article.title}">Статья</span>
             </nav>
 
-            <h1 class="page-title">
-                <span th:text="${article.title}">Статья</span>
-                <span th:if="${!article.published}" class="badge badge-warn ml-2">скрыто от студентов</span>
-            </h1>
+            <div class="d-flex align-items-start justify-content-between gap-2 mb-3">
+                <h1 class="page-title m-0">
+                    <span th:text="${article.title}">Статья</span>
+                    <span th:if="${!article.published}" class="badge badge-warn ml-2">скрыто от студентов</span>
+                </h1>
+                <button class="btn btn-secondary btn-sm d-lg-none" type="button"
+                        data-bs-toggle="offcanvas" data-bs-target="#articleSide" aria-controls="articleSide">
+                    Содержание
+                </button>
+            </div>
 
-            <div th:if="${currentUser != null and currentUser.admin}" class="flex flex-wrap gap-2 mb-4">
+            <div th:if="${currentUser != null and currentUser.admin}" class="flex flex-wrap gap-2 mb-4 action-row">
                 <button class="btn btn-secondary btn-sm p-2" type="button" data-action="article-edit" title="Править статью" aria-label="Править статью"><i class="ico bi bi-pencil" aria-hidden="true"></i></button>
                 <form class="inline-form" th:action="@{/admin/content/articles/toggle-published}" method="post">
                     <input type="hidden" name="_csrf" th:value="${csrfToken}">

web/src/main/resources/templates/learn/chapter.html

@@ -14,7 +14,7 @@
         <span th:if="${!chapter.published}" class="badge badge-warn ml-2">скрыто</span>
     </h1>
 
-    <div th:if="${currentUser != null and currentUser.admin}" class="flex flex-wrap gap-2 mb-4">
+    <div th:if="${currentUser != null and currentUser.admin}" class="flex flex-wrap gap-2 mb-4 action-row">
         <button class="btn btn-primary" type="button" data-modal="modal-new-section">+ Раздел</button>
         <button class="btn btn-secondary btn-sm p-2" type="button" data-modal="modal-rename-chapter" title="Переименовать главу" aria-label="Переименовать главу"><i class="cell-ico ico bi bi-pencil" aria-hidden="true"></i></button>
         <form class="inline-form" th:action="@{/admin/content/chapters/toggle-published}" method="post">

web/src/main/resources/templates/learn/section.html

@@ -16,7 +16,7 @@
         <span th:if="${!section.published}" class="badge badge-warn ml-2">скрыто</span>
     </h1>
 
-    <div th:if="${currentUser != null and currentUser.admin}" class="flex flex-wrap gap-2 mb-4">
+    <div th:if="${currentUser != null and currentUser.admin}" class="flex flex-wrap gap-2 mb-4 action-row">
         <button class="btn btn-primary" type="button" data-modal="modal-new-article">+ Статья</button>
         <button class="btn btn-secondary btn-sm p-2" type="button" data-modal="modal-rename-section" title="Переименовать раздел" aria-label="Переименовать раздел"><i class="cell-ico ico bi bi-pencil" aria-hidden="true"></i></button>
         <form class="inline-form" th:action="@{/admin/content/sections/toggle-published}" method="post">