From 2efc3acd94724110713c9169f2d559d8bb19dd26 Mon Sep 17 00:00:00 2001
From: kandrusyak <kandrusyak@t1-consulting.ru>
Date: Tue, 6 Dec 2022 20:12:10 +0300
Subject: [PATCH] add cursor pointer, add server detail animation

---
 src/pages/services/VPNServers.jsx | 185 ++++++++++++++++--------------
 src/partials/SidebarLinkGroup.jsx |   2 +-
 2 files changed, 97 insertions(+), 90 deletions(-)

diff --git a/src/pages/services/VPNServers.jsx b/src/pages/services/VPNServers.jsx
index c95f427..cb11310 100644
--- a/src/pages/services/VPNServers.jsx
+++ b/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,107 +151,113 @@ PersistentKeepalive = 25
             </div>
 
             {/* Sidebar */}
-            {servers?.length > 0 && servers?.[selectedServer]?.state && (
-              <div>
-                <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">
-                      <div>
-                        <div className="text-slate-800 font-semibold text-center mb-6">
-                          {servers?.[selectedServer]?.country} -{' '}
-                          {servers?.[selectedServer]?.region}
-                        </div>
 
-                        {/* Credit Card */}
-                        <div className="flex justify-center">
-                          <QRCodeSVG
-                            value={qrContent}
-                            size={200}
-                            includeMargin
-                            level="L"
-                          />
-                        </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">
+                    <div>
+                      <div className="text-slate-800 font-semibold text-center mb-6">
+                        {servers?.[selectedServer]?.country} -{' '}
+                        {servers?.[selectedServer]?.region}
+                      </div>
 
-                        {/* Details */}
-                        <div className="mt-6">
-                          <div className="text-sm font-semibold text-slate-800 mb-1">
-                            Details
-                          </div>
-                          <ul>
-                            <li className="flex items-center justify-between py-3 border-b border-slate-200">
-                              <div className="text-sm">Server address</div>
-                              <div className="text-sm font-medium text-slate-800 ml-2">
-                                {servers?.[selectedServer]?.endpoint}
-                              </div>
-                            </li>
-                            <li className="flex items-center justify-between py-3 border-b border-slate-200">
-                              <div className="text-sm">Status</div>
-                              <div className="flex items-center whitespace-nowrap">
-                                {servers?.[selectedServer]?.state ? (
-                                  <>
-                                    <div className="w-2 h-2 rounded-full bg-emerald-500 mr-2" />
-                                    <div className="text-sm font-medium text-slate-800">
-                                      Active
-                                    </div>
-                                  </>
-                                ) : (
-                                  <>
-                                    <div className="w-2 h-2 rounded-full mr-2 bg-amber-500" />
-                                    <div className="text-sm font-medium text-slate-800">
-                                      Offline
-                                    </div>
-                                  </>
-                                )}
-                              </div>
-                            </li>
-                          </ul>
-                        </div>
+                      {/* Credit Card */}
+                      <div className="flex justify-center">
+                        <QRCodeSVG
+                          value={qrContent}
+                          size={200}
+                          includeMargin
+                          level="L"
+                        />
+                      </div>
 
-                        {/* Payment Limits */}
-                        <div className="mt-6">
-                          <div className="text-sm font-semibold text-slate-800 mb-4">
-                            Transfer
-                          </div>
-                          <div className="pb-4 border-b border-slate-200">
-                            <div className="flex justify-between text-sm mb-2">
-                              <div>Spent This Month</div>
-                              <div className="italic">
-                                {servers?.[selectedServer]?.transferSum}{' '}
-                                <span className="text-slate-400">/</span> 50.00
-                                GB
-                              </div>
+                      {/* Details */}
+                      <div className="mt-6">
+                        <div className="text-sm font-semibold text-slate-800 mb-1">
+                          Details
+                        </div>
+                        <ul>
+                          <li className="flex items-center justify-between py-3 border-b border-slate-200">
+                            <div className="text-sm">Server address</div>
+                            <div className="text-sm font-medium text-slate-800 ml-2">
+                              {servers?.[selectedServer]?.endpoint}
                             </div>
-                            <div className="relative w-full h-2 bg-slate-300">
-                              <div
-                                className="absolute inset-0 bg-indigo-500"
-                                aria-hidden="true"
-                                style={{
-                                  width: `${servers?.[selectedServer]?.trafficUsed}%`,
-                                }}
-                              />
+                          </li>
+                          <li className="flex items-center justify-between py-3 border-b border-slate-200">
+                            <div className="text-sm">Status</div>
+                            <div className="flex items-center whitespace-nowrap">
+                              {servers?.[selectedServer]?.state ? (
+                                <>
+                                  <div className="w-2 h-2 rounded-full bg-emerald-500 mr-2" />
+                                  <div className="text-sm font-medium text-slate-800">
+                                    Active
+                                  </div>
+                                </>
+                              ) : (
+                                <>
+                                  <div className="w-2 h-2 rounded-full mr-2 bg-amber-500" />
+                                  <div className="text-sm font-medium text-slate-800">
+                                    Offline
+                                  </div>
+                                </>
+                              )}
                             </div>
+                          </li>
+                        </ul>
+                      </div>
+
+                      {/* Payment Limits */}
+                      <div className="mt-6">
+                        <div className="text-sm font-semibold text-slate-800 mb-4">
+                          Transfer
+                        </div>
+                        <div className="pb-4 border-b border-slate-200">
+                          <div className="flex justify-between text-sm mb-2">
+                            <div>Spent This Month</div>
+                            <div className="italic">
+                              {servers?.[selectedServer]?.transferSum}{' '}
+                              <span className="text-slate-400">/</span> 50.00 GB
+                            </div>
+                          </div>
+                          <div className="relative w-full h-2 bg-slate-300">
+                            <div
+                              className="absolute inset-0 bg-indigo-500"
+                              aria-hidden="true"
+                              style={{
+                                width: `${servers?.[selectedServer]?.trafficUsed}%`,
+                              }}
+                            />
                           </div>
                         </div>
                       </div>
-
-                      <button
-                        className="btn w-full border-slate-200 hover:border-slate-300 text-slate-600"
-                        onClick={downloadTxtFile}
-                      >
-                        <svg
-                          className="w-4 h-4 fill-current text-slate-400 shrink-0 rotate-180"
-                          viewBox="0 0 16 16"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path d="M8 4c-.3 0-.5.1-.7.3L1.6 10 3 11.4l4-4V16h2V7.4l4 4 1.4-1.4-5.7-5.7C8.5 4.1 8.3 4 8 4ZM1 2h14V0H1v2Z" />
-                        </svg>
-                        <span className="ml-2">Download</span>
-                      </button>
                     </div>
+
+                    <button
+                      className="btn w-full border-slate-200 hover:border-slate-300 text-slate-600"
+                      onClick={downloadTxtFile}
+                    >
+                      <svg
+                        className="w-4 h-4 fill-current text-slate-400 shrink-0 rotate-180"
+                        viewBox="0 0 16 16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path d="M8 4c-.3 0-.5.1-.7.3L1.6 10 3 11.4l4-4V16h2V7.4l4 4 1.4-1.4-5.7-5.7C8.5 4.1 8.3 4 8 4ZM1 2h14V0H1v2Z" />
+                      </svg>
+                      <span className="ml-2">Download</span>
+                    </button>
                   </div>
                 </div>
               </div>
-            )}
+            </Transition>
           </div>
         </main>
       </div>
diff --git a/src/partials/SidebarLinkGroup.jsx b/src/partials/SidebarLinkGroup.jsx
index 64dd6b4..4dd1d32 100644
--- a/src/partials/SidebarLinkGroup.jsx
+++ b/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'
       }`}
     >