You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
141 lines
4.5 KiB
141 lines
4.5 KiB
import React from "react";
|
|
import NavBar from "./NavList/navList";
|
|
import MainPage from "../pages/main";
|
|
import ReactDOM from "react-dom";
|
|
export default class AppConteiner extends React.Component {
|
|
ui = {
|
|
BackButton: {
|
|
text: "Назад"
|
|
},
|
|
button: {
|
|
sync: {
|
|
text: "Обновить",
|
|
icon:
|
|
"https://im0-tub-ru.yandex.net/i?id=82aba01eaa9844244dfae87e7a7e5583&n=13%22"
|
|
}
|
|
}
|
|
};
|
|
toBack() {
|
|
document.getElementById("backBtn").style.display = "none";
|
|
//document.getElementById("pTitle").textContent = "Рекомендации";
|
|
/*ReactDOM.render(
|
|
<MainPage
|
|
icons={this.props.icons}
|
|
rec={this.props.rec}
|
|
useDes={this.props.useDes}
|
|
/>,
|
|
document.getElementById("HomePage")
|
|
);*/
|
|
|
|
window.location.reload();
|
|
//document.getElementById('pTitle').textContent = this.props.menuItems[]
|
|
}
|
|
viewSideBar() {
|
|
if (!this.VVSB) {
|
|
document.getElementById("MainContent").style.paddingLeft = "300px";
|
|
document.getElementById("btn-toggle").style.paddingLeft = "300px";
|
|
document.getElementById("btn-toggle").style.float = "righ";
|
|
document.getElementById("navBar").style.left = "0px";
|
|
this.VVSB = true;
|
|
} else {
|
|
document.getElementById("MainContent").style.paddingLeft = "0px";
|
|
document.getElementById("btn-toggle").style.paddingLeft = "0px";
|
|
document.getElementById("navBar").style.left = "-280px";
|
|
this.VVSB = false;
|
|
}
|
|
}
|
|
ViewTitle() {
|
|
for (let i = 0; i++; this.props.menuItems.length) {
|
|
if (window.location.href.split(this.props.menuItems[i]).length >= 2) {
|
|
document.getElementById("pTitle").textContent = this.props.menuItems[
|
|
i
|
|
].text;
|
|
}
|
|
console.log(i);
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div>
|
|
<NavBar
|
|
category={this.props.category}
|
|
menuItem={this.props.menuItems}
|
|
aliases={this.props.aliases}
|
|
Ipkgs={this.props.Ipkg}
|
|
/>
|
|
|
|
<div className="page-wrapper chiller-theme toggled">
|
|
<ul
|
|
id="btn-toggle"
|
|
class="btn-toggle"
|
|
style={{
|
|
display: "inline",
|
|
padding: "20px",
|
|
margin: "0px",
|
|
borderBottom: "1px solid #AAA",
|
|
width: "100%",
|
|
background: "#2e323f",
|
|
position: "fixed",
|
|
top: "0",
|
|
color: "#FFF"
|
|
}}
|
|
>
|
|
<svg
|
|
style={{
|
|
float: "left",
|
|
paddingLeft: "20px",
|
|
paddingRight: "10px"
|
|
}}
|
|
onClick={() => this.viewSideBar()}
|
|
stroke="currentColor"
|
|
fill="currentColor"
|
|
stroke-width="0"
|
|
viewBox="0 0 448 512"
|
|
height="1.4em"
|
|
width="1.4em"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path>
|
|
</svg>
|
|
<div
|
|
id="backBtn"
|
|
style={{ paddingLeft: "20px", float: "left", display: "none" }}
|
|
onClick={() => this.toBack()}
|
|
>
|
|
<img
|
|
style={{ width: "1.4em", height: "1.4em" }}
|
|
src="https://cdn-icons-png.flaticon.com/512/189/189254.png"
|
|
/>
|
|
</div>
|
|
<b>
|
|
<div
|
|
id="pTitle"
|
|
style={{
|
|
float: "left",
|
|
width: "50vw",
|
|
marginleft: "20px",
|
|
textAlign: "center",
|
|
fontSize: "1.4em",
|
|
color: "#FFF"
|
|
}}
|
|
>
|
|
{" "}
|
|
""
|
|
</div>
|
|
</b>
|
|
{this.ViewTitle()}
|
|
</ul>
|
|
<main
|
|
id="MainContent"
|
|
className="page-content"
|
|
style={{ paddingLeft: "10px", margin: "10px" }}
|
|
>
|
|
<div className="container">{this.props.children}</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|