From 7d1621767cec57e9e7217f620844655279ab1af5 Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Mon, 7 Aug 2023 06:51:10 -0300
Subject: ui settings view

---
 .../src/components/menu/SideBar.tsx                | 64 ++++++++++++++--------
 1 file changed, 40 insertions(+), 24 deletions(-)

(limited to 'packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx')

diff --git a/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx b/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx
index 6fee600eb..f3cf80b92 100644
--- a/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx
+++ b/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx
@@ -31,6 +31,7 @@ const VERSION = typeof __VERSION__ !== "undefined" ? __VERSION__ : undefined;
 
 interface Props {
   onLogout: () => void;
+  onShowSettings: () => void;
   mobile?: boolean;
   instance: string;
   admin?: boolean;
@@ -40,6 +41,7 @@ interface Props {
 export function Sidebar({
   mobile,
   instance,
+  onShowSettings,
   onLogout,
   admin,
   mimic,
@@ -78,21 +80,8 @@ export function Sidebar({
       <div class="menu is-menu-main">
         {instance ? (
           <Fragment>
-            <p class="menu-label">
-              <i18n.Translate>Instance</i18n.Translate>
-            </p>
             <ul class="menu-list">
-              <li>
-                <a href={"/update"} class="has-icon">
-                  <span class="icon">
-                    <i class="mdi mdi-square-edit-outline" />
-                  </span>
-                  <span class="menu-item-label">
-                    <i18n.Translate>Settings</i18n.Translate>
-                  </span>
-                </a>
-              </li>
-              <li>
+            <li>
                 <a href={"/orders"} class="has-icon">
                   <span class="icon">
                     <i class="mdi mdi-cash-register" />
@@ -132,6 +121,31 @@ export function Sidebar({
                   </span>
                 </a>
               </li>
+              {needKYC && (
+                <li>
+                  <a href={"/kyc"} class="has-icon">
+                    <span class="icon">
+                      <i class="mdi mdi-account-check" />
+                    </span>
+                    <span class="menu-item-label">KYC Status</span>
+                  </a>
+                </li>
+              )}
+            </ul>
+            <p class="menu-label">
+              <i18n.Translate>Configuration</i18n.Translate>
+            </p>
+            <ul class="menu-list">
+              <li>
+                <a href={"/update"} class="has-icon">
+                  <span class="icon">
+                    <i class="mdi mdi-square-edit-outline" />
+                  </span>
+                  <span class="menu-item-label">
+                    <i18n.Translate>Account</i18n.Translate>
+                  </span>
+                </a>
+              </li>
               <li>
                 <a href={"/reserves"} class="has-icon">
                   <span class="icon">
@@ -150,16 +164,6 @@ export function Sidebar({
                   </span>
                 </a>
               </li>
-              {needKYC && (
-                <li>
-                  <a href={"/kyc"} class="has-icon">
-                    <span class="icon">
-                      <i class="mdi mdi-account-check" />
-                    </span>
-                    <span class="menu-item-label">KYC Status</span>
-                  </a>
-                </li>
-              )}
             </ul>
           </Fragment>
         ) : undefined}
@@ -167,6 +171,18 @@ export function Sidebar({
           <i18n.Translate>Connection</i18n.Translate>
         </p>
         <ul class="menu-list">
+          <li>
+            <a class="has-icon is-state-info is-hoverable"
+              onClick={(): void => onShowSettings()}
+              >
+              <span class="icon">
+                <i class="mdi mdi-newspaper" />
+              </span>
+              <span class="menu-item-label">
+                <i18n.Translate>Settings</i18n.Translate>
+              </span>
+            </a>
+          </li>
           <li>
             <div>
               <span style={{ width: "3rem" }} class="icon">
-- 
cgit v1.2.3