update

Author: spektra2147

resources/css/interactive_sidebar.css

@@ -5,7 +5,17 @@
 #sidebar a {
     color: #f1f1f1 !important;
     opacity: 0.7;
-    display: block;
+    justify-content: space-between;
+    display: flex !important;
+    align-items: center;
+    font-weight:300;
+    font-size: 16px;
+}
+
+#sidebar .title-box {
+    justify-content: space-between;
+    display: flex;
+    max-width: 190px;
 }
 
 #sidebar a:hover, #sidebar a:active, #sidebar a:focus {

resources/css/theme.css

@@ -531,7 +531,7 @@ transition: width 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
     margin: 8px 0;
     display: block;
     padding: 0 10px;
-    font-size: 18px;
+    font-size: 16px;
     line-height: 39px;
     position: relative;
     text-align: center;

resources/views/partials/interactiveMenu.twig

@@ -26,9 +26,11 @@
             <li class="{{ navigation.active ? 'active' }} variant-border" data-slug="{{ navigation.slug }}">
                 <a title="{{ trans(navigation.title) }}" data-toggle="collapse"
                    data-target="#{{ navigation_key }}">
-                    <span class="icon">{{navigation.icon.output|raw}}</span>
-                    <span class="title">{{ trans(navigation.title) }}</span>
-                    <span class="list-arrow"><em class="fa fa-chevron-down"></em></span>
+                    <div class="title-box">
+                        <span class="icon">{{ navigation.icon.output|raw }}</span>
+                        <span class="title text-truncate">{{ trans(navigation.title) }}</span>
+                    </div>
+{#                    <span class="list-arrow"><em class="fa fa-chevron-down"></em></span>#}
                 </a>
                 <div class="collapse ml-2" id="{{ navigation_key }}" aria-expanded="false">
                     <ul class="flex-column px-2 nav">
@@ -37,14 +39,14 @@
                                 <a title="{{ trans(navigation.title) }}" class=""
                                    data-toggle="collapse"
                                    data-target="#{{ navigation_key }}sub">
-                                    <span class="title">{{ trans(navigation.title) }}</span>
-                                    <span class="list-arrow"><em class="fa fa-chevron-down"></em></span>
+                                    <span class="title text-truncate">{{ trans(navigation.title) }}</span>
+{#                                    <span class="list-arrow"><em class="fa fa-chevron-down"></em></span>#}
                                 </a>
                                 <div class="collapse ml-2" id="{{ navigation_key }}sub" aria-expanded="false">
                                     <ul class="flex-column px-1 nav">
                                         {% for main_navigation in navigation.menus.main %}
                                             <li class="nav-item">
-                                                <a class="nav-link py-0"
+                                                <a class="nav-link py-0 d-block"
                                                    href="{{ url(main_navigation.href) }}">{{ trans(main_navigation.title) }}</a>
                                             </li>
                                         {% endfor %}
@@ -56,13 +58,16 @@
                                     <a title="{{ trans(sub_menus.title) }}" class=""
                                        data-toggle="collapse"
                                        data-target="#{{ navigation_key }}{{ sub_menus_key }}">
-                                        <span class="title">{{ trans(sub_menus.title) }}</span>
-                                        <span class="list-arrow"><em class="fa fa-chevron-down"></em></span>
+                                        <span class="title text-truncate">{{ trans(sub_menus.title) }}</span>
+{#                                        <span class="list-arrow"><em class="fa fa-chevron-down"></em></span>#}
                                     </a>
-                                    <div class="collapse ml-2" id="{{ navigation_key }}{{ sub_menus_key }}" aria-expanded="false">
+                                    <div class="collapse ml-2" id="{{ navigation_key }}{{ sub_menus_key }}"
+                                         aria-expanded="false">
                                         <ul class="flex-column px-1 nav">
                                             {% for sub_menu in sub_menus.links %}
-                                                <li class="nav-item"><a class="nav-link py-0" href="{{ url(sub_menu.href) }}">{{ trans(sub_menu.title) }}</a></li>
+                                                <li class="nav-item"><a class="nav-link py-0 d-block"
+                                                                        href="{{ url(sub_menu.href) }}">{{ trans(sub_menu.title) }}</a>
+                                                </li>
                                             {% endfor %}
                                         </ul>
                                     </div>
@@ -73,7 +78,7 @@
                                 <li class="nav-item">
                                     <a href="{{ url(main_navigation.href) }}"
                                        title="{{ trans(main_navigation.title) }}">
-                                        <span class="title">{{ trans(main_navigation.title) }}</span>
+                                        <span class="title text-truncate">{{ trans(main_navigation.title) }}</span>
                                     </a>
                                 </li>
                             {% endfor %}