add cursor pointer, add server detail animation

src/pages/services/VPNServers.jsx

@@ -8,6 +8,7 @@ import VPNServeIcon from '../../images/vpn_server_icon.png';
 import { Filters } from '../../components/Filters';
 import { observer } from 'mobx-react-lite';
 import ReactCountryFlag from 'react-country-flag';
+import Transition from '../../utils/Transition';
 
 const filters = {
   'View All': 'all',
@@ -150,8 +151,16 @@ PersistentKeepalive = 25
             </div>
 
             {/* Sidebar */}
-            {servers?.length > 0 && servers?.[selectedServer]?.state && (
-              <div>
+
+            <Transition
+              show={servers?.length > 0 && servers?.[selectedServer]?.state}
+              enter="transition-transform duration-200 ease-in"
+              enterStart="translate-x-full"
+              enterEnd="translate-x-"
+              leave="transition-transform duration-200 ease-out"
+              leaveStart="translate-x-"
+              leaveEnd="translate-x-full"
+            >
               <div className="lg:sticky lg:top-16 bg-slate-50 lg:overflow-x-hidden lg:overflow-y-auto no-scrollbar lg:shrink-0 border-t lg:border-t-0 lg:border-l border-slate-200 lg:w-[390px] lg:h-[calc(100vh-64px)]">
                 <div className="py-8 px-4 lg:px-8 h-full">
                   <div className="max-w-sm mx-auto lg:max-w-none flex flex-col justify-between h-full">
@@ -216,8 +225,7 @@ PersistentKeepalive = 25
                             <div>Spent This Month</div>
                             <div className="italic">
                               {servers?.[selectedServer]?.transferSum}{' '}
-                                <span className="text-slate-400">/</span> 50.00
-                                GB
+                              <span className="text-slate-400">/</span> 50.00 GB
                             </div>
                           </div>
                           <div className="relative w-full h-2 bg-slate-300">
@@ -249,8 +257,7 @@ PersistentKeepalive = 25
                   </div>
                 </div>
               </div>
-              </div>
-            )}
+            </Transition>
           </div>
         </main>
       </div>

src/partials/SidebarLinkGroup.jsx

@@ -9,7 +9,7 @@ function SidebarLinkGroup({ children, activecondition }) {
 
   return (
     <li
-      className={`px-3 py-2 rounded-sm mb-0.5 last:mb-0 ${
+      className={`px-3 py-2 rounded-sm mb-0.5 cursor-pointer last:mb-0 ${
         activecondition && 'bg-slate-900'
       }`}
     >