Fix styling for Commercial sectin inside the main sidenav (#2133)

Author: juujisai

site/layouts/partials/sidenav/standard.html

@@ -128,24 +128,38 @@
       <li class="mx-1 mt-1">
         <a
           href="/pro/"
-          class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pl-[3.4rem] pr-6 text-[0.78rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-blue-100/20 hover:text-inherit hover:outline-none focus:bg-blue-200/20 focus:text-inherit focus:outline-none active:bg-blue-200/20 active:text-inherit active:outline-none data-[te-sidenav-state-active]:text-inherit data-[te-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-gray-300 dark:hover:bg-white/10 dark:focus:bg-white/10 dark:active:bg-white/10"
+          class="{{ if in .Page "/pro" }}
+            bg-[rgba(18,102,241,0.05)] dark:bg-white/20
+          {{ else }}
+            hover:bg-blue-100/20 dark:hover:bg-white/10 hover:text-inherit
+            hover:outline-none focus:bg-blue-200/20 focus:text-inherit
+            focus:outline-none active:bg-blue-200/20 active:text-inherit
+            active:outline-none
+          {{ end }} flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pl-[3.4rem] pr-6 text-[0.78rem] text-gray-600 outline-none transition duration-300 ease-linear data-[te-sidenav-state-active]:text-inherit data-[te-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-gray-300 dark:focus:bg-white/10 dark:active:bg-white/10"
           data-te-sidenav-link-ref=""
           tabindex="0">
           Pricing
         </a>
       </li>
 
-      <li class="mx-1 mt-1">
+      <li class="mx-1">
         <a
           href="/license/"
-          class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pl-[3.4rem] pr-6 text-[0.78rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-blue-100/20 hover:text-inherit hover:outline-none focus:bg-blue-200/20 focus:text-inherit focus:outline-none active:bg-blue-200/20 active:text-inherit active:outline-none data-[te-sidenav-state-active]:text-inherit data-[te-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-gray-300 dark:hover:bg-white/10 dark:focus:bg-white/10 dark:active:bg-white/10"
+          class="{{ if in .Page "license" }}
+            bg-[rgba(18,102,241,0.05)] dark:bg-white/20
+          {{ else }}
+            hover:bg-blue-100/20 dark:hover:bg-white/10 hover:text-inherit
+            hover:outline-none focus:bg-blue-200/20 focus:text-inherit
+            focus:outline-none active:bg-blue-200/20 active:text-inherit
+            active:outline-none
+          {{ end }} flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pl-[3.4rem] pr-6 text-[0.78rem] text-gray-600 outline-none transition duration-300 ease-linear data-[te-sidenav-state-active]:text-inherit data-[te-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-gray-300 dark:focus:bg-white/10 dark:active:bg-white/10"
           data-te-sidenav-link-ref=""
           tabindex="0">
           License
         </a>
       </li>
 
-      <li class="mx-1 mt-1">
+      <li class="mx-1">
         <a
           href="https://mdbootstrap.com/support/cat/twe"
           target="_blank"