Add option to display label on sidebar

Author: juggler31

atlas/configuration/config.py.example

@@ -51,6 +51,9 @@ NOM_APPLICATION = "Nom de l application"
 # ex "/atlas" pour une URL: http://mon-domaine/atlas OU "" si l'application est accessible à la racine du domaine
 URL_APPLICATION = "/atlas"
 
+# Afficher ou non les labels dans la barre latérale
+AFFICHAGE_LABEL_SIDEBAR = False
+
 #################################
 #################################
 ###### Modules activation #######

atlas/configuration/config_schema.py

@@ -174,6 +174,7 @@ class Meta:
     AFFICHAGE_EN_CE_MOMENT = fields.Boolean(load_default=True)
     AFFICHAGE_RANG_STAT = fields.Boolean(load_default=True)
     AFFICHAGE_NOUVELLES_ESPECES = fields.Boolean(load_default=True)
+    AFFICHAGE_LABEL_SIDEBAR = fields.Boolean(load_default=False)
     AFFICHAGE_RECHERCHE_AVANCEE = fields.Boolean(load_default=False)
     AFFICHAGE_GRAPH_ALTITUDES = fields.Boolean(load_default=True)
     AFFICHAGE_GRAPH_PHENOLOGIE = fields.Boolean(load_default=True)

atlas/static/css/atlas.css

@@ -388,7 +388,6 @@ sidebar {
 #sidebar_menu li {
     height: 60px !important;
     min-height: 60px;
-    line-height: 60px;
     color: white;
     cursor: pointer;
     text-align: center;

atlas/templates/core/sideBar.html

@@ -1,20 +1,48 @@
+<style>
+    {% if configuration.AFFICHAGE_LABEL_SIDEBAR %}
+        #sidebar_menu {
+            width: 120px;
+            li {
+                height: unset !important;
+
+                .short_title {
+                    padding-top: 0.5rem;
+                    font-size: 0.8rem;
+                    font-weight: bold;
+                    text-transform: uppercase;
+                }
+            }
+        }
+        main {
+            margin-left: 120px;
+        }
+    {% else %}
+        .sidebar-brand > a {
+            justify-content: center;
+        }
+    {% endif %}
+</style>
+
 <ul id="sidebar_menu" class="sidebar-nav">
 
     <li class="sidebar-brand">
         <a href="{{ url_for('main.index') }}" id="menu-toggle"
-           class="d-flex justify-content-center align-items-center p-3 w-100 h-100"
+           class="d-flex align-items-center flex-column p-3 w-100 h-100"
            data-bs-toggle="tooltip"
            title="{{ _('back.to.home') }}"
            data-bs-placement="right">
             <span id="main_icon" class="fa fa-home"></span>
+            {% if configuration.AFFICHAGE_LABEL_SIDEBAR %}
+                <div class="short_title">{{ _("home") | upper }}</div>
+            {% endif %}
         </a>
     </li>
 
     {% for page_key, page_values in configuration.STATIC_PAGES.items()|sort(attribute='1.order') %}
         {% if 'url' in page_values %}
             <li class="sidebar-brand">
                 <a href="{{ page_values.url }}" target="_blank"
-                   class="d-flex justify-content-center align-items-center p-3 w-100 h-100"
+                   class="d-flex align-items-center flex-column p-3 w-100 h-100"
                    data-bs-toggle="tooltip"
                    title="{{ page_values.title }}"
                    data-bs-placement="right">
@@ -25,12 +53,15 @@
                     {% else %}
                         <span class="fas {{ page_values.picto }}"></span>
                     {% endif %}
+                    {% if configuration.AFFICHAGE_LABEL_SIDEBAR and 'label' in page_values %}
+                        <div class="short_title">{{ page_values.short_title }}</div>
+                    {% endif %}
                 </a>
             </li>
         {% else %}
             <li class="sidebar-brand">
                 <a href="{{ url_for('main.get_staticpages', page=page_key) }}"
-                   class="d-flex justify-content-center align-items-center p-3 w-100 h-100"
+                   class="d-flex flex-column  align-items-center p-3 w-100 h-100"
                    data-bs-toggle="tooltip"
                    title="{{ page_values.title }}"
                    data-bs-placement="right">
@@ -41,29 +72,38 @@
                     {% else %}
                         <span class="fas {{ page_values.picto }}"></span>
                     {% endif %}
+                    {% if configuration.AFFICHAGE_LABEL_SIDEBAR and 'short_title' in page_values %}
+                        <div class="short_title">{{ page_values.short_title }}</div>
+                    {% endif %}
                 </a>
             </li>
         {% endif %}
     {% endfor %}
     {% if configuration.AFFICHAGE_RECHERCHE_AVANCEE %}
         <li class="sidebar-brand">
             <a href="{{ url_for('main.advanced_search') }}"
-               class="d-flex justify-content-center align-items-center p-3 w-100 h-100"
+               class="d-flex flex-column  align-items-center p-3 w-100 h-100"
                data-bs-toggle="tooltip"
                title="{{ _('advanced_search') }}"
                data-bs-placement="right">
                 <span class="fa fa-search"></span>
+                {% if configuration.AFFICHAGE_LABEL_SIDEBAR %}
+                    <div class="short_title">{{ _("advanced_search") | upper }}</div>
+                {% endif %}
             </a>
         </li>
     {% endif %}
 
     <li class="sidebar-brand">
         <a href="{{ url_for('main.photos') }}"
-           class="d-flex justify-content-center align-items-center p-3 w-100 h-100"
+           class="d-flex flex-column  align-items-center p-3 w-100 h-100"
            data-bs-toggle="tooltip"
            title="{{ _('gallery.title') }}"
            data-bs-placement="right">
             <span class="fa fa-camera"></span>
+            {% if configuration.AFFICHAGE_LABEL_SIDEBAR %}
+                <div class="short_title">{{ _("photos") | upper }}</div>
+            {% endif %}
         </a>
     </li>