feat: mobile

subquery · Jun 6, 2024 · 3766aa2 · 3766aa2
1 parent dd22180
commit 3766aa2
Show file tree

Hide file tree

Showing 7 changed files with 152 additions and 70 deletions.
diff --git a/components/app/header/Header.less b/components/app/header/Header.less
@@ -46,10 +46,10 @@
       color: #fff;
 
       &:hover {
-        color: var(--sq-primary-blue);
+        color: var(--sq-blue600);
       }
       &--active {
-        color: var(--sq-primary-blue);
+        color: var(--sq-blue600);
       }
     }
   }
@@ -59,6 +59,7 @@
 .@{middle} {
   margin-left: 24px;
   &__menu {
+
     &--dark.@{middle}__menu--dark.@{middle}__menu--dark {
       background-color: var(--dark-mode-card);
       padding: 0;
@@ -115,15 +116,15 @@
 
   &:hover {
     text-decoration: underline;
-    color: var(--sq-primary-blue);
+    color: var(--sq-blue600);
   }
 
   &--active {
-    color: var(--sq-primary-blue);
+    color: var(--sq-blue600);
   }
 }
 
-@media  screen and (max-width: 700px) {
+@media  screen and (max-width: 768px) {
 
   .@{left} {
     margin-left: 0;
@@ -133,6 +134,7 @@
     &__wrapper {
       width: 100%;
       margin-top: 4px;
+      margin-right: 0;
     }
 
     &--dark {
@@ -184,7 +186,13 @@
       }
 
       &-item.@{middle}__menu-item.@{middle}__menu-item {
-        padding: 16px 0;
+        padding: 10px 32px;
+        width: 100vw;
+        margin-left: -24px;
+
+        &--active {
+          background: #4388DD1A;
+        }
       }
     }
 
@@ -211,10 +219,38 @@
     }
 
     &__menu {
+      .ant-drawer-header {
+        padding: 20px;
+      }
+
+      .ant-drawer-header-title {
+        display: none;
+      }
+      .ant-drawer-extra {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .ant-drawer-body {
+        padding: 0;
+      }
+
+      .@{left} {
+        border-bottom: 1px solid var(--sq-gray200);
+      }
+
+      .@{middle} {
+        &__item {
+          border-bottom: 1px solid var(--sq-gray200);
+        }
+      }
+
       &--dark {
         .@{middle} {
           &__item {
-            border-bottom: 1px solid #34414B;
+            border-bottom: 1px solid var(--dark-mode-border);
           }
         }
       }
@@ -226,11 +262,11 @@
       color: #fff;
       &:hover {
         text-decoration: underline;
-        color: var(--sq-primary-blue);
+        color: var(--sq-blue600);
       }
 
       &--active {
-        color: var(--sq-primary-blue);
+        color: var(--sq-blue600);
       }
     }
   }

diff --git a/components/app/header/Header.tsx b/components/app/header/Header.tsx
@@ -3,7 +3,7 @@
 
 import * as React from 'react';
 import clsx from 'clsx';
-import { Space } from 'antd';
+import { Drawer, Space } from 'antd';
 import useScreen from 'use-screen';
 import { matchPath } from 'react-router-dom';
 import { AiOutlineMenu } from 'react-icons/ai';
@@ -128,7 +128,11 @@ const MiddleHeader = ({
     <>
       <>{middleElement}</>
       {!middleElement && appNavigation && (
-        <Space className={clsx(bem({ wrapper: 'wrapper' }))} direction={isMobile ? 'vertical' : 'horizontal'} size={24}>
+        <Space
+          className={clsx(bem({ wrapper: 'wrapper' }))}
+          direction={isMobile ? 'vertical' : 'horizontal'}
+          size={isMobile ? 0 : 24}
+        >
           {appNavigation.map((nav, index) => {
             if (nav.dropdown) {
               return (
@@ -139,9 +143,19 @@ const MiddleHeader = ({
                     menuitem={nav.dropdown.map((menu) => ({
                       key: menu.link,
                       label: <Typography>{menu.label}</Typography>,
-                      className: clsx(bem('menu-item'), theme === 'dark' && bem('menu-item', { dark: 'dark' })), // should refoctor
+                      className: clsx(
+                        bem('menu-item', {
+                          active: active?.(menu.link) ? 'active' : undefined,
+                          dark: theme === 'dark' ? 'dark' : undefined,
+                        }),
+                      ), // should refoctor
                     }))}
                     label={nav.label}
+                    active={
+                      nav.dropdown
+                        ? active?.(nav.link || '????') || nav.dropdown.some((i) => active?.(i.link))
+                        : active?.(nav.link || '????')
+                    }
                     trigger={[isMobile ? 'click' : 'hover']}
                     onMenuItemClick={({ key }) => {
                       if (nav.onClick) {
@@ -193,6 +207,7 @@ export interface HeaderProps extends MiddleHeaderProps {
   leftElement?: React.ReactElement;
   rightElement?: React.ReactElement;
   className?: string;
+  closeDrawerAfterNavigate?: boolean;
 }
 
 export const Header: React.FC<React.PropsWithChildren<HeaderProps>> = ({
@@ -207,6 +222,7 @@ export const Header: React.FC<React.PropsWithChildren<HeaderProps>> = ({
   children,
   navigate,
   active,
+  closeDrawerAfterNavigate,
 }) => {
   const { theme } = React.useContext(Context);
   const bem = useBem('subql-header');
@@ -241,19 +257,52 @@ export const Header: React.FC<React.PropsWithChildren<HeaderProps>> = ({
               style={{ cursor: 'pointer' }}
             />
           </div>
-          {showMenu && (
-            <div className={clsx(mobileHeaderBem('menu', { dark: theme === 'dark' ? 'dark' : null }))}>
-              <LeftHeader leftElement={leftElement} dropdownLinks={dropdownLinks} showDivider isMobile />
-              <MiddleHeader
-                middleElement={middleElement}
-                appNavigation={appNavigation}
-                isMobile
-                navigate={navigate}
-                active={active}
-              />
-              <>{rightElement}</>
-            </div>
-          )}
+          <Drawer
+            open={showMenu}
+            placement="left"
+            onClose={() => {
+              setShowMenu(false);
+            }}
+            width={'100vw'}
+            rootClassName={clsx(mobileHeaderBem('menu', { dark: theme === 'dark' ? 'dark' : null }))}
+            extra={
+              <>
+                <div>
+                  {customLogo ? (
+                    customLogo
+                  ) : (
+                    <a href={logoLink ?? '/'}>
+                      <img src={logoMobile} alt="SubQuery Logo" width={48} />
+                    </a>
+                  )}
+                </div>
+
+                <MenuIcon
+                  onClick={() => {
+                    setShowMenu(!showMenu);
+                  }}
+                  size={40}
+                  style={{ cursor: 'pointer' }}
+                />
+              </>
+            }
+          >
+            <LeftHeader leftElement={leftElement} dropdownLinks={dropdownLinks} showDivider isMobile />
+            <MiddleHeader
+              middleElement={middleElement}
+              appNavigation={appNavigation}
+              isMobile
+              navigate={(link) => {
+                if (closeDrawerAfterNavigate) {
+                  navigate?.(link);
+                  setShowMenu(false);
+                }
+                navigate?.(link);
+              }}
+              active={active}
+            />
+            <>{rightElement}</>
+          </Drawer>
         </div>
       ) : (
         <div className={clsx(bem(), theme === 'dark' ? bem({ dark: 'dark' }) : '', className)}>

diff --git a/components/common/dropdown/Dropdown.less b/components/common/dropdown/Dropdown.less
@@ -0,0 +1,30 @@
+.subql-dropdown {
+  cursor: pointer;
+  height: 100%;
+
+  &__icon {
+    font-size: 12px;
+    color: var(--sq-gray600);
+
+    &--dark {
+      color: #fff;
+    }
+  }
+
+  &--active {
+    color: var(--sq-blue600);
+    .subql-typography {
+      color: var(--sq-blue600);
+    }
+
+    .subql-dropdown__icon {
+      color: var(--sq-blue600);
+    }
+  }
+
+  &-desc {
+    &__title {
+      margin: 0.25rem 0;
+    }
+  }
+}
diff --git a/components/common/dropdown/Dropdown.module.css b/components/common/dropdown/Dropdown.module.css
diff --git a/components/common/dropdown/Dropdown.tsx b/components/common/dropdown/Dropdown.tsx
@@ -6,9 +6,10 @@ import clsx from 'clsx';
 import { DropDownProps as AntdDropdownProps, Dropdown as AntdDropdown, Menu, Space } from 'antd';
 import DownOutlined from '@ant-design/icons/DownOutlined';
 import { ItemType, MenuClickEventHandler } from 'rc-menu/lib/interface';
-import styles from './Dropdown.module.css';
+import './Dropdown.less';
 import { Typography } from '../typography';
 import { Context } from '../provider';
+import { useBem } from 'components/utilities/useBem';
 
 export interface DropdownProps extends Partial<AntdDropdownProps> {
   label?: string;
@@ -33,9 +34,10 @@ export const Dropdown: React.FC<DropdownProps> = ({
   ...props
 }) => {
   const { theme } = React.useContext(Context);
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const [, setIsOpen] = React.useState<boolean>(false);
+  const bem = useBem('subql-dropdown');
   const sortedLabel = (
-    <Space className={clsx(styles.dropdownLabel, styles.pointer, (isOpen || active) && styles.isOnHover)}>
+    <Space className={clsx(bem({ active: active ? 'active' : undefined }))}>
       {LeftLabelIcon}
       <Typography
         onClick={() => {
@@ -48,12 +50,7 @@ export const Dropdown: React.FC<DropdownProps> = ({
         {LeftLabelIcon ? undefined : RightLabelIcon ? (
           RightLabelIcon
         ) : (
-          <DownOutlined
-            style={{
-              fontSize: 12,
-              color: theme === 'dark' ? '#fff' : 'var(--sq-gray600)',
-            }}
-          />
+          <DownOutlined className={clsx(bem('icon', { dark: theme === 'dark' ? 'dark' : undefined }))} />
         )}
       </Typography>
     </Space>
@@ -91,9 +88,11 @@ export interface MenuWithDescProps {
   width?: string | number;
 }
 export const MenuWithDesc = ({ title, description, className, width }: MenuWithDescProps) => {
+  const bem = useBem('subql-dropdown-desc');
+
   return (
-    <div className={clsx(styles.menuWithDesc, className)} style={{ width }}>
-      <Typography weight={500} className={styles.title}>
+    <div className={clsx(bem(), className)} style={{ width }}>
+      <Typography weight={500} className={clsx(bem('title'))}>
         {title}
       </Typography>
       <Typography variant="small" type="secondary">

diff --git a/components/common/subqlCard/subqlCard.less b/components/common/subqlCard/subqlCard.less
@@ -20,7 +20,7 @@
     padding-top: 12px;
   }
 
-  &--split {
+  &__split {
     width: 100%;
     height: 1px;
     background: var(--sq-gray300);

diff --git a/components/common/subqlCard/subqlCard.tsx b/components/common/subqlCard/subqlCard.tsx
@@ -52,7 +52,7 @@ export const SubqlCard: FC<SubqlCardProps> = ({
       }
       style={{ width: width ? `${width}px` : 'auto', ...style }}
     >
-      {children && <div className={clsx(bem(['split']))}></div>}
+      {children && <div className={clsx(bem('split'))}></div>}
       {children}
     </Card>
   );