feat: minor ui fixes

kadena-community · Nov 7, 2023 · 96e31e2 · 96e31e2
1 parent 6d83714
commit 96e31e2
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 15 deletions.
diff --git a/packages/apps/tools/locales/en/common.json b/packages/apps/tools/locales/en/common.json
@@ -140,7 +140,7 @@
   "for PACT developers": "for PACT developers",
   "This option is meant for developers who need more sophisticated options within the user interface.": "This option is meant for developers who need more sophisticated options within the user interface.",
   "dApp Developers": "dApp Developers",
-  "for Javascript developers": "for Javascript developerssss",
+  "for Javascript developers": "for JavaScript developers",
   "The coins have been funded to the given account.": "The coins have been funded to the given account.",
   "coins have been funded to": "coins have been funded to",
   "form-status-title-erroneous": "Something went wrong",

diff --git a/packages/apps/tools/src/components/Common/Layout/index.tsx b/packages/apps/tools/src/components/Common/Layout/index.tsx
@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import type { FC, ReactNode } from 'react';
 import React from 'react';
 import { Header, Sidebar } from './partials';
-import { gridItemMainStyle, headerStyle } from './styles.css';
+import { gridItemMainStyle, headerStyle, sidebarStyle } from './styles.css';
 
 interface IProps {
   children?: ReactNode;
@@ -17,7 +17,9 @@ export const Layout: FC<IProps> = ({ children }: IProps) => {
       <header className={headerStyle}>
         <Header />
       </header>
-      <Sidebar />
+      <aside className={classNames(sidebarStyle, { isMenuOpen })}>
+          <Sidebar />
+      </aside>
       <main className={classNames(gridItemMainStyle, { isMenuOpen })}>
         {children}
       </main>

diff --git a/packages/apps/tools/src/components/Common/Layout/partials/Sidebar/Menu.tsx b/packages/apps/tools/src/components/Common/Layout/partials/Sidebar/Menu.tsx
@@ -73,6 +73,7 @@ export const Menu: FC = () => {
                   key={`menu-link-${index}`}
                   href={item.href}
                   active={item.href === router.pathname}
+                  target={item.target}
                 />
               ))}
             </Accordion.Root>

diff --git a/packages/apps/tools/src/components/Common/Layout/partials/Sidebar/MenuLinkButton.tsx b/packages/apps/tools/src/components/Common/Layout/partials/Sidebar/MenuLinkButton.tsx
@@ -2,40 +2,33 @@ import { Tooltip } from '@kadena/react-ui';
 import classNames from 'classnames';
 import Link from 'next/link';
 import type { ButtonHTMLAttributes, FC } from 'react';
-import React, { useRef } from 'react';
+import React from 'react';
 import { gridMiniMenuLinkButtonStyle } from './styles.css';
 
 export interface IMenuLinkButtonProps
   extends ButtonHTMLAttributes<HTMLButtonElement> {
   title?: string;
   href?: string;
   active?: boolean;
+  target?: string;
 }
 
 export const MenuLinkButton: FC<IMenuLinkButtonProps> = ({
   active,
   title,
   href,
+  target = '_self',
   ...rest
 }) => {
-  const tooltipRef = useRef<HTMLDivElement>(null);
-
   const button = (
     <>
       <button
         className={classNames(gridMiniMenuLinkButtonStyle, { active })}
-        onMouseEnter={(e) => Tooltip.handler(e, tooltipRef)}
-        onMouseLeave={(e) => Tooltip.handler(e, tooltipRef)}
         {...rest}
         aria-label={title}
       >
         {title}
       </button>
-      {!!title && (
-        <Tooltip.Root placement="right" ref={tooltipRef}>
-          {title}
-        </Tooltip.Root>
-      )}
     </>
   );
 

diff --git a/packages/apps/tools/src/components/Common/Layout/partials/Sidebar/styles.css.ts b/packages/apps/tools/src/components/Common/Layout/partials/Sidebar/styles.css.ts
@@ -70,7 +70,6 @@ export const gridMiniMenuLinkButtonStyle = style([
     fontWeight: '$bold',
   }),
   {
-    transition: 'all 0.1s ease',
     width: '100%',
     borderBottom: `1px solid ${vars.colors.$borderDefault}`,
     selectors: {

diff --git a/packages/apps/tools/src/components/Common/Layout/styles.css.ts b/packages/apps/tools/src/components/Common/Layout/styles.css.ts
@@ -16,9 +16,9 @@ export const gridItemMainStyle = style([
     paddingTop: '$20',
     paddingBottom: '$16',
     paddingRight: '$6',
+    width: 'max-content',
   }),
   {
-    width: '680px',
     paddingLeft: `calc(${vars.sizes.$20} + ${vars.sizes.$2})`,
     selectors: {
       '&.isMenuOpen': {
@@ -29,3 +29,17 @@ export const gridItemMainStyle = style([
     },
   },
 ]);
+
+export const sidebarStyle = style([
+  sprinkles({
+    width: '$16',
+  }),
+  {
+    transition: 'width 0.1s ease',
+    selectors: {
+      '&.isMenuOpen': {
+        width: `calc(${vars.sizes.$64} + ${vars.sizes.$35})`,
+      },
+    },
+  },
+]);