合并 顶部导航栏菜单兼容性修复

src/UI/Components/Panel.tsx

@@ -16,7 +16,8 @@ interface TopPanelState
 {
     isLogin: boolean,//是否登录
     isOpen: boolean,//是否打开资源面板
-    toLogin: boolean //前往登录
+    toLogin: boolean, //前往登录
+    isCollapse: boolean;
 }
 //顶部标题栏.
 //TODO:Ajax请求，获得登录状态
@@ -29,7 +30,8 @@ export class TopPanel extends React.Component<{}, {}>
         this.state = {
             isLogin: true,
             isOpen: false,
-            toLogin: false
+            toLogin: false,
+            isCollapse: false
         }
     }
     handleClick = () =>
@@ -44,50 +46,67 @@ export class TopPanel extends React.Component<{}, {}>
     {
         return (
             <nav className="pt-navbar pt-dark .modifier" >
-                <div className="pt-navbar-group pt-align-left" >
-                    <div className="pt-navbar-heading logo" > CAD </ div >
+                <div className="pt-navbar-group pt-align-left logo" >
+                    <div className="pt-navbar-heading" > CAD </ div >
                     <input
                         className="pt-input"
                         placeholder=" 搜索文件..."
                         type=" text"
                         style={{
-                            width: window.innerWidth / 3
+                            width: "50%"
                         }}
                     />
                 </div>
-                <div className="pt-navbar-group pt-align-right" >
-                    < button className="pt-button pt-minimal pt-icon-home" > 主页 </ button >
-                    {
-                        this.state.isLogin ?
-                            <div>
-                                <button
-                                    className="pt-button pt-minimal pt-icon-document"
-                                    onClick={this.handleClick}
-                                > 文件 </ button >
-                                <span className="pt-navbar-divider" > </span>
-                                < button className="pt-button pt-minimal pt-icon-user" />
-                                < button className="pt-button pt-minimal pt-icon-notifications" />
-                                < button className="pt-button pt-minimal pt-icon-cog" onClick={this.handleClick} />
-                            </div> :
-                            <div>
-                                <span className="pt-navbar-divider" > </span>
-                                <button
-                                    className="pt-button pt-minimal"
-                                    onClick={() =>
-                                    {
-                                        this.setState({ toLogin: true })
-                                    }}
-                                >登陆</button>
-                                <button className="pt-button pt-minimal">免费注册</button>
-                            </div>
-                    }
-
-                    <Collapse isOpen={false}>
-                        <pre>
-                            EXIT
-                        </pre>
-                    </Collapse>
+                <div className="pt-navbar-group pt-align-right menu" >
+                    <button
+                        className="pt-button pt-icon-menu "
+                        onClick={() =>
+                        {
+                            this.setState({ isCollapse: !this.state.isCollapse })
+                        }}
+                    ></button>
                 </div>
+                {
+                    this.state.isLogin ?
+                        <div
+                            className="pt-navbar-group pt-align-right info"
+
+                            style={{
+                                height: this.state.isCollapse ? "auto" : 0
+                            }}
+                        >
+                            < button className="pt-button pt-minimal pt-icon-home" >
+                                <span className="hidden">
+                                    主页
+                                </span>
+                            </ button >
+                            <button
+                                className="pt-button pt-minimal pt-icon-document"
+                                onClick={this.handleClick}
+                            >
+                                <span className="hidden">
+                                    文件
+                                </span>
+                            </ button >
+                            <span className="pt-navbar-divider hidden" > </span>
+                            < button className="pt-button pt-minimal pt-icon-user" />
+                            <span></span>
+                            < button className="pt-button pt-minimal pt-icon-notifications" />
+                            < button className="pt-button pt-minimal pt-icon-cog" onClick={this.handleClick} />
+                        </div> :
+                        <div className="pt-navbar-group pt-align-right info" >
+                            < button className="pt-button pt-minimal pt-icon-home" > 主页 </ button >
+                            <span className="pt-navbar-divider" > </span>
+                            <button
+                                className="pt-button pt-minimal"
+                                onClick={() =>
+                                {
+                                    this.setState({ toLogin: true })
+                                }}
+                            >登陆</button>
+                            <button className="pt-button pt-minimal">免费注册</button>
+                        </div>
+                }
                 <Login
                     toggleDialog={this.handleCancel}
                     toLogin={this.state.toLogin}

src/UI/Components/SourceManage/SoucePanel.tsx

@@ -42,7 +42,8 @@ export default class SoucePanel extends React.Component<SoucePanelProps, SoucePa
             position: "absolute",
             top: 0,
             width: "80%",
-            height: window.innerHeight - 150
+            height: window.innerHeight - 150,
+            minWidth: 755
         }
         return (
             <Dialog

src/UI/Css/style.less

@@ -24,20 +24,8 @@ body {
     font-family: sans-serif;
 }
 
-#TopPanel .logo {
-    height: 50px;
-    line-height: 50px;
-    font-weight: bold;
-}
 
-.logo sup {
-    font-size: 9px;
-    font-style: italic;
-}
-#TopPanel .logo>a{
-    font-size: 32px;
-    color: #fff;
-}
+
 .panel {
     background: #444;
     border: 0px solid black;
@@ -365,6 +353,45 @@ input[type=radio] {
     pointer-events: none;
 }
 
+//导航栏样式
+#TopPanel .logo {
+    width: 50%;
+}
+#TopPanel .menu{
+    display: none;
+    transition: all .5s;
+}
+#TopPanel .info{
+    margin: 0;
+}
+// 媒体查询
+@media screen and (max-width: 599px){
+    #TopPanel .menu{
+        display: flex;
+    }
+    #TopPanel .info{
+        overflow: hidden;
+        flex-direction: column;
+        position: absolute;
+        right: 0;
+        top: 50px;
+        background: #394b59;
+    }
+    #TopPanel .hidden{
+        display: none;
+    }
+    #TopPanel .pt-dark .pt-button:not([class*="pt-intent-"])[class*="pt-icon-"]::before{
+        margin-right: 0
+    }
+}
+@media screen and (min-width: 600px){
+    #TopPanel .info{
+        margin: 0;
+        height: 50px !important;
+    }
+}
+
+
 /**********自定义通用样式*****************/
 ul,div{
     box-sizing: border-box;