[apisix-website] branch master updated: fix: tag header's mobile style (#1267)

[bzp2010]

This is an automated email from the ASF dual-hosted git repository.

bzp2010 pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/apisix-website.git


The following commit(s) were added to refs/heads/master by this push:
     new 8f67bb3cbaa fix: tag header's mobile style (#1267)
8f67bb3cbaa is described below

commit 8f67bb3cbaa5f3d38cb992177d38493e2aa83ab5
Author: Young <isk...@outlook.com>
AuthorDate: Thu Aug 4 10:17:05 2022 +0800

    fix: tag header's mobile style (#1267)
---
 blog/src/theme/BlogLayout/index.tsx                | 29 ++++++++++---------
 blog/src/theme/BlogLayout/style.module.scss        | 12 ++++++++
 .../NavbarItem/LocaleDropdownNavbarItem/index.tsx  | 33 ++++++++++++++--------
 3 files changed, 49 insertions(+), 25 deletions(-)

diff --git a/blog/src/theme/BlogLayout/index.tsx 
b/blog/src/theme/BlogLayout/index.tsx
index d8ad69fbd68..f8db2223b99 100644
--- a/blog/src/theme/BlogLayout/index.tsx
+++ b/blog/src/theme/BlogLayout/index.tsx
@@ -75,19 +75,22 @@ const tags = [
   },
 ];
 
-const TagsHeader: FC = () => (
-  <Sticky innerZ={199} className={style.placeholder}>
-    {(s) => (
-      <div className={clsx(style.tagsHeader, s.status === Sticky.STATUS_FIXED 
&& style.expand)}>
-        {tags.map((tag) => (
-          <Link key={tag.url} to={tag.url} target="_parent">
-            {tag.label}
-          </Link>
-        ))}
-      </div>
-    )}
-  </Sticky>
-);
+const TagsHeader: FC = () => {
+  const windowType = useWindowType();
+  return (
+    <Sticky innerZ={199} className={style.placeholder} enabled={windowType !== 
'mobile'}>
+      {(s) => (
+        <div className={clsx(style.tagsHeader, s.status === 
Sticky.STATUS_FIXED && style.expand)}>
+          {tags.map((tag) => (
+            <Link key={tag.url} to={tag.url} target="_parent">
+              {tag.label}
+            </Link>
+          ))}
+        </div>
+      )}
+    </Sticky>
+  );
+};
 
 const BlogLayout: FC<Props> = (props) => {
   const {
diff --git a/blog/src/theme/BlogLayout/style.module.scss 
b/blog/src/theme/BlogLayout/style.module.scss
index ad3cb76ba59..2ecfc56436e 100644
--- a/blog/src/theme/BlogLayout/style.module.scss
+++ b/blog/src/theme/BlogLayout/style.module.scss
@@ -1,3 +1,5 @@
+@import "../../css/util";
+
 .shareSection {
   button {
     margin-right: 0.5rem;
@@ -22,6 +24,8 @@
 .tagsHeader {
   display: flex;
   justify-content: flex-end;
+  width: 100%;
+  flex-wrap: wrap;
   padding: 0.25rem 1rem;
   transition: all 0.3s ease-in-out;
   border-bottom: 1px solid #e8e8ed;
@@ -61,4 +65,12 @@
       padding: 0 1rem;
     }
   }
+
+  @include respond-below(sm) {
+    justify-content: space-between;
+
+    a {
+      min-width: 110px;
+    }
+  }
 }
diff --git a/blog/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx 
b/blog/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx
index 57f934a37cb..c3504478332 100644
--- a/blog/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx
+++ b/blog/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx
@@ -14,33 +14,42 @@ import useDocusaurusContext from 
'@docusaurus/useDocusaurusContext';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { useAlternatePageUtils } from '@docusaurus/theme-common';
 import { useLocation } from '@docusaurus/router';
+import useWindowType from '@theme/hooks/useWindowSize';
 import Link from '@docusaurus/Link';
 import styles from './styles.module.css';
 
-interface LocaleDropdownNavbarItemProps extends Omit<Props, 'items'>{
-  readonly dropdownItemsBefore: readonly LinkLikeNavbarItemProps[],
-  readonly dropdownItemsAfter: readonly LinkLikeNavbarItemProps[]
+interface LocaleDropdownNavbarItemProps extends Omit<Props, 'items'> {
+  readonly dropdownItemsBefore: readonly LinkLikeNavbarItemProps[];
+  readonly dropdownItemsAfter: readonly LinkLikeNavbarItemProps[];
 }
 
 const LocaleDropdownNavbarItem: FC<LocaleDropdownNavbarItemProps> = (props) => 
{
   const {
-    mobile,
-    dropdownItemsBefore,
-    dropdownItemsAfter,
-    ...others
+    mobile, dropdownItemsBefore, dropdownItemsAfter, ...others
   } = props;
   const {
     i18n: { currentLocale, locales, localeConfigs },
   } = useDocusaurusContext();
   const alternatePageUtils = useAlternatePageUtils();
   const { pathname } = useLocation();
+  const windowType = useWindowType();
 
-  if (pathname.startsWith('/zh/blog')) {
-    return <Link autoAddBaseUrl={false} to="pathname:///blog" 
target="_parent">English Blog</Link>;
-  }
+  if (windowType !== 'mobile') {
+    if (pathname.startsWith('/zh/blog')) {
+      return (
+        <Link autoAddBaseUrl={false} to="pathname:///blog" target="_parent">
+          English Blog
+        </Link>
+      );
+    }
 
-  if (pathname.startsWith('/blog')) {
-    return <Link autoAddBaseUrl={false} to="pathname:///zh/blog" 
target="_parent">中文博客</Link>;
+    if (pathname.startsWith('/blog')) {
+      return (
+        <Link autoAddBaseUrl={false} to="pathname:///zh/blog" target="_parent">
+          中文博客
+        </Link>
+      );
+    }
   }
 
   function getLocaleLabel(locale) {