Update templates

Author: RobiNN1

assets/css/styles.css

@@ -1172,11 +1172,6 @@ svg {
   padding-bottom: 0.75rem;
 }
 
-.px-1 {
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-}
-
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -1878,6 +1873,10 @@ svg {
     flex-direction: row;
   }
 
+  .md\:items-center {
+    align-items: center;
+  }
+
   .md\:justify-end {
     justify-content: flex-end;
   }
@@ -1886,6 +1885,10 @@ svg {
     justify-content: center;
   }
 
+  .md\:justify-between {
+    justify-content: space-between;
+  }
+
   .md\:gap-2 {
     gap: 0.5rem;
   }

assets/icons/menu.svg

@@ -39,13 +39,8 @@
         <div class="container mx-auto px-3 py-3 lg:max-w-7xl">
             <div class="relative flex flex-col justify-between md:flex-row">
                 <div class="flex justify-items-stretch">
-                    <button class="z-50 block py-2 px-1" type="button" id="togglebtn">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
-                            <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
-                        </svg>
-                    </button>
-
-                    <a class="mx-auto block py-2 px-1 text-lg font-bold text-gray-900" href="index.php">phpCacheAdmin</a>
+                    <button class="z-50 block" type="button" id="togglebtn">{{ svg('menu', 20) }}</button>
+                    <a class="mx-auto block text-lg font-bold text-gray-900" href="index.php">phpCacheAdmin</a>
                 </div>
             </div>
         </div>

templates/layout.twig

@@ -1,24 +1,26 @@
-{% if extension_version %}
-    <div class="mb-3 text-xl">
-        PHP <span class="font-semibold">{{ title }}</span> extension
-        {{ include('components/badge.twig', {text: 'v' ~ extension_version, text_sm: true, bg: 'bg-' ~ color ~ '-500'}) }}
-    </div>
-{% endif %}
+<div class="flex flex-col md:flex-row md:items-center md:justify-between">
+    {% if extension_version %}
+        <div class="mb-5 text-xl">
+            PHP <span class="font-semibold">{{ title }}</span> extension
+            {{ include('components/badge.twig', {text: 'v' ~ extension_version, text_sm: true, bg: 'bg-' ~ color ~ '-500'}) }}
+        </div>
+    {% endif %}
 
-{% if panels_toggler is not defined %}
-    <label for="toggle-panels" class="mb-3 flex cursor-pointer items-center lg:justify-end">
-        <span class="relative block h-6 w-10 rounded-full bg-gray-400 shadow">
-            <input type="checkbox" id="toggle-panels"
-                   class="sr-only [&:checked~.dot]:translate-x-full [&:checked~.dot]:bg-gray-900 [&:checked~.dot]:text-white
-                   [&:checked~.dot>.open]:block [&:checked~.dot>.close]:hidden">
-            <span class="dot absolute left-1 top-1 inline-flex h-4 w-4 items-center justify-center rounded-full text-gray-600 bg-gray-50 transition-transform">
-                {{ svg('open', 10, 'open -mr-px hidden') }}
-                {{ svg('close', 10, 'close -mr-px') }}
+    {% if panels_toggler is not defined %}
+        <label for="toggle-panels" class="mb-5 flex items-center cursor-pointer">
+            <span class="relative block h-6 w-10 rounded-full bg-gray-400 shadow">
+                <input type="checkbox" id="toggle-panels"
+                       class="sr-only [&:checked~.dot]:translate-x-full [&:checked~.dot]:bg-gray-900 [&:checked~.dot]:text-white
+                       [&:checked~.dot>.open]:block [&:checked~.dot>.close]:hidden">
+                <span class="dot absolute left-1 top-1 inline-flex h-4 w-4 items-center justify-center rounded-full text-gray-600 bg-gray-50 transition-transform">
+                    {{ svg('open', 10, 'open -mr-px hidden') }}
+                    {{ svg('close', 10, 'close -mr-px') }}
+                </span>
             </span>
-        </span>
-        <span class="ml-1 text-sm leading-normal">Toggle panels</span>
-    </label>
-{% endif %}
+            <span class="ml-1 text-sm leading-normal">Show/Hide panels</span>
+        </label>
+    {% endif %}
+</div>
 
 {% if info.panels %}
     <div id="infopanels" style="display: block;">