website: update sub menu styles.

uiwjs · Jul 31, 2021 · 63b9f62 · 63b9f62
1 parent 4ac0134
commit 63b9f62
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 14 deletions.
diff --git a/website/src/component/Container/index.module.less b/website/src/component/Container/index.module.less
@@ -1,9 +1,9 @@
 .warpper {
-  max-width: 1024px;
   margin: 0 auto;
-  padding-top: 30px;
-  padding-bottom: 60px;
   display: flex;
-  padding-left: 10px;
-  padding-right: 10px;
+  padding-top: 60px;
 }
+
+.content {
+  padding: 30px 26px 60px 26px;
+}
diff --git a/website/src/component/Container/index.tsx b/website/src/component/Container/index.tsx
@@ -16,7 +16,7 @@ export default function Container(props: ContainerProps) {
         {data && data.length > 0 && (
           <SubMenus data={data} />
         )}
-        <div style={{ flex: 1, overflow: 'hidden' }}>
+        <div className={styles.content} style={{ flex: 1, overflow: 'hidden' }}>
           {children}
         </div>
       </div>

diff --git a/website/src/component/Header/index.module.less b/website/src/component/Header/index.module.less
@@ -2,6 +2,11 @@
   box-shadow: 0 4px 13px -3px rgb(0 0 0 / 10%);
   border-bottom: 1px solid #d2d2d2;
   padding: 0 26px 0 22px;
+  backdrop-filter: saturate(180%) blur(0.4rem);
+  background-color: hsla(0, 0%, 100%, .75);
+  position: fixed;
+  z-index: 1;
+  width: 100%;
 }
 
 .inner {

diff --git a/website/src/component/Header/index.tsx b/website/src/component/Header/index.tsx
@@ -17,6 +17,7 @@ export default function Header() {
           <NavLink to="/home">首页</NavLink>
           <NavLink to="/docs">文档</NavLink>
           <NavLink to="/components/">RN组件</NavLink>
+          <a target="__blank" href="https://github.com/uiwjs/react-native-uiw/issues">问题反馈</a>
           <a target="__blank" href="https://uiwjs.github.io">Web 组件</a>
           <a target="__blank" href="https://github.com/uiwjs/react-native-uiw">GitHub</a>
         </div>

diff --git a/website/src/component/Markdown/index.tsx b/website/src/component/Markdown/index.tsx
@@ -4,13 +4,13 @@ import MarkdownPreview from '@uiw/react-markdown-preview';
 import rehypeAttr from 'rehype-attr';
 import { useEffect } from 'react';
 
-export interface MarkdownProps {
+export interface MarkdownProps extends React.HTMLAttributes<HTMLDivElement> {
   path?: string;
   renderPage?: () => Promise<string>;
 }
 
 export default function Markdown(props: MarkdownProps) {
-  const { renderPage } = props;
+  const { renderPage, style } = props;
   const [mdStr, setMdStr] = useState('');
   useEffect(() => {
     if (renderPage) {
@@ -23,7 +23,7 @@ export default function Markdown(props: MarkdownProps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
   return (
-    <div>
+    <div style={style}>
       <MarkdownPreview
         source={mdStr}
         // className={styles.markdown}

diff --git a/website/src/component/SubMenus/index.module.less b/website/src/component/SubMenus/index.module.less
@@ -1,27 +1,44 @@
 .warpper {
-  border-right: 1px solid #eaeaea;
-  margin-right: 26px;
   padding-right: 16px;
-  min-width: 230px;
+  position: relative;
   a {
     color: #5a5a5a;
     padding: 10px 0;
     display: block;
     transition: all .3s;
+    margin-left: 10px;
     &:hover {
       color: #1890ff;
     }
     &:global(.active) {
       color: #1890ff;
       background-color: #f5f8fa;
       padding-left: 10px;
+      margin-right: 1px;
     }
   }
 }
 
 .divider {
   padding: 5px 0;
+  margin-left: 10px;
   margin-bottom: 10px;
   color: #bdbdbd;
   border-bottom: 1px solid #eaeaea;
+}
+
+.warpper, .inner {
+  border-right: 1px solid #eaeaea;
+  min-width: 260px;
+}
+
+.inner {
+  overflow: auto;
+  padding-left: 23px;
+  padding-bottom: 30px;
+  padding-top: 20px;
+  box-sizing: border-box;
+  height: 100%;
+  position: fixed;
+  top: 60px;
 }
diff --git a/website/src/component/SubMenus/index.tsx b/website/src/component/SubMenus/index.tsx
@@ -15,7 +15,7 @@ export default function Submenu(props: SubmenuProps) {
   const { data = [] } = props;
   return (
     <div className={styles.warpper}>
-      <div style={{ overflow: 'auto', height: '100%' }}>
+      <div className={styles.inner} style={{  }}>
         {data.map((data, key) => {
           if (data.divider) {
             return <div key={key} className={styles.divider}>{data.name}</div>

diff --git a/website/src/routes/menus.ts b/website/src/routes/menus.ts
@@ -2,7 +2,7 @@ import { MenuData } from '../component/SubMenus';
 
 export const componentMenus: MenuData[] = [
   { path: '/components/about', name: '关于 UIW' },
-  { href: 'https://github.com/uiwjs/react-native-uiw/releases', name: '更新日志' },
+  { href: 'https://github.com/uiwjs/react-native-uiw/releases', target: '_blank', name: '更新日志' },
   { divider: true, name: "通用" },
   { path: "/components/button", name: "Button 按钮" },
   { path: "/components/icon", name: "Icon 图标" },