Merge pull request #152 from hocgin/feature-scss

Feature scss
hocgin · Nov 3, 2023 · 1c446ca · 1c446ca
2 parents 882eef8 + be1c7d5
commit 1c446ca
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 8 deletions.
diff --git a/src/Header/components/Header/index.tsx → src/Header/components/Header/header.tsx b/src/Header/components/Header/index.tsx → src/Header/components/Header/header.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { useResponsive, useRequest } from 'ahooks';
+import { useResponsive, useRequest, configResponsive } from 'ahooks';
 import classnames from 'classnames';
 import {
   MenuOutlined,
@@ -16,6 +16,8 @@ import qs from 'query-string';
 
 type Mode = 'none' | 'fixed' | 'sticky';
 
+configResponsive({ small: 0, middle: 800, large: 1200 });
+
 type Props = {
   prefixCls?: string;
   menus?: { label: any }[];
@@ -150,7 +152,7 @@ export const TextLogo: React.FC<{
   );
 };
 
-const Index: React.FC<{
+type HeaderProps = {
   menus?: { label: any }[];
   mode?: Mode;
   className?: string | undefined;
@@ -161,7 +163,9 @@ const Index: React.FC<{
   prefix?: any;
   logo?: any;
   logined?: boolean;
-}> = ({
+  maxWidth?: number;
+};
+const Header: React.FC<HeaderProps> = ({
   className,
   style,
   containerClassName,
@@ -176,6 +180,7 @@ const Index: React.FC<{
     </a>
   ),
   logined,
+  maxWidth = 1024,
 }) => {
   let { getPrefixCls } = React.useContext(ConfigContext);
   let prefixCls = getPrefixCls('header');
@@ -193,7 +198,7 @@ const Index: React.FC<{
     >
       <div
         className={classnames(`${prefixCls}-container`, containerClassName)}
-        style={containerStyle}
+        style={{ maxWidth, ...containerStyle }}
       >
         {logo}
         <HeaderMenu
@@ -207,4 +212,4 @@ const Index: React.FC<{
   );
 };
 
-export default Index;
+export default Header;
diff --git a/src/Header/index.tsx b/src/Header/index.tsx
@@ -1,5 +1,5 @@
-import OriginHeader from './components/Header';
-import { TextLogo } from './components/Header';
+import OriginHeader from './components/Header/header';
+import { TextLogo } from './components/Header/header';
 import './style';
 
 type HtmlType = typeof OriginHeader & {

diff --git a/src/Header/style/index.scss b/src/Header/style/index.scss
@@ -12,6 +12,8 @@ $header-menu-prefix-cls: $header-prefix-cls + '-menu';
   align-items: center;
   justify-content: center;
   position: relative;
+  padding-left: 1rem;
+  padding-right: 1rem;
 
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
   'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
@@ -42,7 +44,6 @@ $header-menu-prefix-cls: $header-prefix-cls + '-menu';
     align-items: center;
     justify-content: space-between;
     position: relative;
-    max-width: 1024px;
     width: 100%;
   }