add breadcrumbs

frontend/main.js

@@ -12,6 +12,8 @@ import './styles/mobilemenu.css'
 import './styles/toc.css'
 import './styles/login.css'
 import './styles/toolbar.css'
+import './styles/breadcrumbs.css'
+
 
 import './styles/admin.css'
 //import './styles/fontawesone.css'

frontend/styles/breadcrumbs.css

+/* Основное оформление хлебных крошек */
+.breadcrumbs {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    font-size: 14px;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.breadcrumbs a {
+    text-decoration: none;
+    color: #007bff;
+    padding: 0 5px;
+    transition: color 0.3s;
+}
+
+.breadcrumbs a:hover {
+    color: #0056b3;
+}
+
+/* Оформление разделителя (например, "/") */
+.breadcrumbs .divider {
+    margin: 0 5px;
+    color: #6c757d;
+}
+
+/* Оформление текущей страницы (неактивная ссылка) */
+.breadcrumbs span {
+    color: #6c757d;
+}
+
+/* Стиль для двунаправленного текста внутри bdi */
+.breadcrumbs bdi {
+    direction: auto;
+    unicode-bidi: isolate;
+}
+
+/* Упрощенное оформление для мобильных устройств */
+@media (max-width: 600px) {
+    .breadcrumbs {
+        font-size: 12px;
+    }
+}

frontend/styles/main.css

@@ -108,6 +108,7 @@ aside {
 
 .content {
     flex-grow: 1;
+    margin-top: 22px;
 }
 
 /* Стили для ссылок */
@@ -134,7 +135,7 @@ a:hover {
     content: '';
     display: block; /* Для правильного отображения SVG */
     width: 500px; /* Ширина SVG */
-    height: 50px; /* Высота SVG */
+    height: 30px; /* Высота SVG */
     background-image: url('/lib/tpl/ak/frontend/assets/imgs/long_dividers.svg'); /* Путь к вашему SVG */
     background-size: contain; /* Масштабирование изображения */
     background-repeat: no-repeat; /* Без повторений */
@@ -145,7 +146,7 @@ a:hover {
     content: '';
     display: block; /* Для правильного отображения SVG */
     width: 500px; /* Ширина SVG */
-    height: 50px; /* Высота SVG */
+    height: 35px; /* Высота SVG */
     background-image: url('/lib/tpl/ak/frontend/assets/imgs/long_dividers.svg'); /* Путь к вашему SVG */
     background-size: contain; /* Масштабирование изображения */
     background-repeat: no-repeat; /* Без повторений */

main.php

@@ -129,8 +129,12 @@ $showSidebar = $hasSidebar && ($ACT == 'show');
     <main class="wrapper container">
        
         <section class="content">
+        <div class="breadcrumbs"><?php tpl_breadcrumbs()?></div>
             <?php tpl_content(); // Основной контент ?>
         </section>
+
+        
+
     </main>
 
 

tpl_functions.php

@@ -2,7 +2,7 @@
 
 // Fallback script for compatibility with Bootstrap Wrapper and Icons plugins
 
-define('VITE_ENV', 'prod'); 
+define('VITE_ENV', 'dev'); 
 
 define('VITE_SERVER', 'http://localhost:5173');
 define('VITE_ENTRY_POINT', '/main.js');