add menu bantuan

components/Layout/Menu.js

@@ -92,6 +92,16 @@ const Menu = [
 		icon: "icon-film",
 		translate: "sidebar.nav.Riwayat",
 	},
+	{
+		heading: "Bantuan",
+		translate: "sidebar.heading.BANTUAN",
+	},
+	{
+		name: "Buku Panduan",
+		path: "/app/Bantuan",
+		icon: "fas fa-book",
+		translate: "sidebar.nav.Bantuan",
+	},
 ];
 
 export default Menu;

components/Layout/MenuLLDIKTI.js

@@ -86,6 +86,16 @@ const Menu = [
 		icon: "icon-film",
 		translate: "sidebar.nav.PEMANTAUAN_PERBAIKAN",
 	},
+	{
+		heading: "Bantuan",
+		translate: "sidebar.heading.BANTUAN",
+	},
+	{
+		name: "Buku Panduan",
+		path: "/app/Bantuan",
+		icon: "fas fa-book",
+		translate: "sidebar.nav.Bantuan",
+	},
 ];
 
 export default Menu;

components/Layout/MenuPT.js

@@ -49,6 +49,16 @@ const MenuPT = [
 			},
 		],
 	},
+	{
+		heading: "Bantuan",
+		translate: "sidebar.heading.BANTUAN",
+	},
+	{
+		name: "Buku Panduan",
+		path: "/pt/bantuanPT",
+		icon: "fas fa-book",
+		translate: "sidebar.nav.Bantuan",
+	},
 ];
 
 export default MenuPT;

pages/app/Bantuan/index.js

@@ -0,0 +1,56 @@
+import React from "react";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Jumbotron, Col, Button } from "reactstrap";
+import Link from "next/link";
+
+class Bantuan extends React.Component {
+    render() {
+        return (
+            <div>
+                <ContentWrapper>
+                    <div className="content-heading">
+                        <span className="font-color-white">Buku Panduan</span>
+                        <div className="ml-auto"></div>
+                    </div>
+                    <Jumbotron>
+                        <Row className="home-1-1">
+                            <Col lg={5} className="d-flex flex-column justify-content-center align-items-start">
+                                <h1 className="display-5 home-2 txt-size">Buku Panduan</h1>
+                                <h1 className="display-5 txt-size">Penggunaan Aplikasi SIDALI</h1>
+                                <hr className="my-4" />
+                                <p className="txt-size">Buku Panduan ini dapat membantu Anda dalam menggunakan Aplikasi SIDALI. Pelajari lebih lanjut Aplikasi SIDALI dengan mengunduh buku panduan dibawah ini.</p>
+                                <p className="lead">
+                                    {/* <Link href="/laporan/new">
+										<button className="btn btn-info btn-lg"><img className="icon-buatlaporan" src="/static/img/icon-buat-laporan.png" alt="icon"/>Buat Laporan</button>
+									</Link> */}
+                                    <a href="/static/img/buku_panduan_DIKTI.pdf" download="Buku Panduan Sidali">
+                                        <span className="btn-radius">
+                                            <Button color="" className="btn-labeled">
+                                                <h4 className="p-1 font-color-white mt-2">Download</h4>
+                                            </Button>
+                                        </span>
+                                    </a>
+                                    <a target="_blank" rel="noopener noreferrer" href="/static/img/buku_panduan_DIKTI.pdf">
+                                        <span className="btn-radius">
+                                            <Button color className="btn-labeled-3">
+                                                <h4 className="p-0 mt-2">Buka Buku Panduan</h4>
+                                            </Button>
+                                        </span>
+                                    </a>
+                                </p>
+
+                            </Col>
+                            <Col lg={5}>
+                                <img className="responsive-1" src="/static/img/Ilustrasi.png" alt="gambar" />
+                            </Col>
+                        </Row>
+                    </Jumbotron>
+                </ContentWrapper>
+
+            </div>
+
+        )
+    }
+}
+
+export default Bantuan;

pages/app/pt/bantuanPT/index.js

@@ -0,0 +1,56 @@
+import React from "react";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Jumbotron, Col, Button } from "reactstrap";
+import Link from "next/link";
+
+class Bantuan extends React.Component {
+    render() {
+        return (
+            <div>
+                <ContentWrapper>
+                    <div className="content-heading">
+                        <span className="font-color-white">Buku Panduan</span>
+                        <div className="ml-auto"></div>
+                    </div>
+                    <Jumbotron>
+                        <Row className="home-1-1">
+                            <Col lg={5} className="d-flex flex-column justify-content-center align-items-start">
+                                <h1 className="display-5 home-2 txt-size">Buku Panduan</h1>
+                                <h1 className="display-5 txt-size">Penggunaan Aplikasi SIDALI</h1>
+                                <hr className="my-4" />
+                                <p className="txt-size">Buku Panduan ini dapat membantu Anda dalam menggunakan Aplikasi SIDALI. Pelajari lebih lanjut Aplikasi SIDALI dengan mengunduh buku panduan dibawah ini.</p>
+                                <p className="lead">
+                                    {/* <Link href="/laporan/new">
+										<button className="btn btn-info btn-lg"><img className="icon-buatlaporan" src="/static/img/icon-buat-laporan.png" alt="icon"/>Buat Laporan</button>
+									</Link> */}
+                                    <a href="/static/img/buku_panduan_PT.pdf" download="Buku Panduan Sidali">
+                                        <span className="btn-radius">
+                                            <Button color="" className="btn-labeled">
+                                                <h4 className="p-1 font-color-white mt-2">Download</h4>
+                                            </Button>
+                                        </span>
+                                    </a>
+                                    <a target="_blank" rel="noopener noreferrer" href="/static/img/buku_panduan_PT.pdf">
+                                        <span className="btn-radius">
+                                            <Button color className="btn-labeled-3">
+                                                <h4 className="p-0 mt-2">Buka Buku Panduan</h4>
+                                            </Button>
+                                        </span>
+                                    </a>
+                                </p>
+
+                            </Col>
+                            <Col lg={5}>
+                                <img className="responsive-1" src="/static/img/Ilustrasi.png" alt="gambar" />
+                            </Col>
+                        </Row>
+                    </Jumbotron>
+                </ContentWrapper>
+
+            </div>
+
+        )
+    }
+}
+
+export default Bantuan;

pages/pt/bantuanPT/index.js

@@ -0,0 +1,53 @@
+import React from "react";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Jumbotron, Col, Button } from "reactstrap";
+import Link from "next/link";
+
+class Bantuan extends React.Component {
+    render() {
+        return (
+            <div>
+                <ContentWrapper>
+                    <div className="content-heading">
+                        <span className="font-color-white">Buku Panduan</span>
+                        <div className="ml-auto"></div>
+                    </div>
+                    <Jumbotron>
+                        <Row className="home-1-1">
+                            <Col lg={5} className="d-flex flex-column justify-content-center align-items-start">
+                                <h1 className="display-5 home-2 txt-size">Buku Panduan</h1>
+                                <h1 className="display-5 txt-size">Penggunaan Aplikasi SIDALI</h1>
+                                <hr className="my-4" />
+                                <p className="txt-size">Buku Panduan ini dapat membantu Anda dalam menggunakan Aplikasi SIDALI. Pelajari lebih lanjut Aplikasi SIDALI dengan mengunduh buku panduan dibawah ini.</p>
+                                <p className="lead">
+                                    <a href="/static/img/buku_panduan_PT.pdf" download="Buku Panduan Sidali">
+                                        <span className="btn-radius">
+                                            <Button color="" className="btn-labeled">
+                                                <h4 className="p-1 font-color-white mt-2">Download</h4>
+                                            </Button>
+                                        </span>
+                                    </a>
+                                    <a target="_blank" rel="noopener noreferrer" href="/static/img/buku_panduan_PT.pdf">
+                                        <span className="btn-radius">
+                                            <Button color className="btn-labeled-3">
+                                                <h4 className="p-0 mt-2">Buka Buku Panduan</h4>
+                                            </Button>
+                                        </span>
+                                    </a>
+                                </p>
+
+                            </Col>
+                            <Col lg={5}>
+                                <img className="responsive-1" src="/static/img/Ilustrasi.png" alt="gambar" />
+                            </Col>
+                        </Row>
+                    </Jumbotron>
+                </ContentWrapper>
+
+            </div>
+
+        )
+    }
+}
+
+export default Bantuan;

styles/bootstrap/_buttons.scss

@@ -215,6 +215,22 @@ input[type="button"] {
     background-color: $colorbutton; opacity: 0.9;
 }
 }
+.btn-labeled-3{
+  border: #3e3a8e solid 2px;
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-top: 3%;
+  color: #3e3a8e;
+  background:transparent;
+  transition: ease background-color 250ms;
+  &:hover {
+    background-color: #e9e8e8; opacity: 0.9;
+    color: #3e3a8e;
+}}
+
+.btn-radius .btn-labeled-3{
+  border-radius: 7px;
+}
 .btn-login {
   background: $colorbutton;
   transition: ease background-color 250ms;

styles/bootstrap/_card.scss

@@ -328,12 +328,18 @@
   margin-right: 10px;
   margin-top: 20px;
 }
+.home-1-1{
+  margin-left: 20px;
+  margin-right: 10px;
+  margin-top: -40px;
+}
 .home-2 {
   margin-top: 10%;
 }
 @media screen and (max-width: 450px) {
   .txt-size {
     font-weight: 400;
+    color: black;
   }
   .home-1 {
     margin: 0;
@@ -402,3 +408,7 @@ float: right;
 .invalid-mv:focus:valid{
   border: solid 1px green;
 }
+.getover{
+  overflow: auto;
+  font-size: 0.8rem;
+}

styles/bootstrap/_images.scss

@@ -134,4 +134,18 @@
   }
 .width-50{
   width: 60px;
+}
+// .responsive-1{
+//   min-height: 500px;
+//   width: 100%;
+// }
+@media screen and (max-width: 1320px) {
+  .responsive-1 {
+      width: 170%
+  }
+  @media screen and (max-width: 991px) {
+    .responsive-1 {
+        width: 100%
+    }
+  }
 }