commit

components/Layout/Menu.js

@@ -11,19 +11,25 @@ const Menu = [
 	},
 	{
 		name: "Pelaporan",
+		path: "/app/pelaporan",
 		icon: "icon-notebook",
-		translate: "sidebar.nav.LAPORAN",
-		submenu: [
-			{
-				name: "List Laporan",
-				path: "/app/pelaporan",
-			},
-			{
-				name: "Laporan ditutup",
-				path: "/app/laporan-ditutup",
-			},
-		],
+		translate: "sidebar.nav.PELAPORAN",
 	},
+	// {
+	// 	name: "Pelaporan",
+	// 	icon: "icon-notebook",
+	// 	translate: "sidebar.nav.LAPORAN",
+	// 	submenu: [
+	// 		{
+	// 			name: "List Laporan",
+	// 			path: "/app/pelaporan",
+	// 		},
+	// 		{
+	// 			name: "Laporan ditutup",
+	// 			path: "/app/laporan-ditutup",
+	// 		},
+	// 	],
+	// },
 	{
 		name: "Penjadwalan Evaluasi",
 		path: "/app/penjadwalan",

components/Layout/MenuLLDIKTI.js

@@ -11,19 +11,25 @@ const Menu = [
 	},
 	{
 		name: "Pelaporan",
+		path: "/app/pelaporan",
 		icon: "icon-notebook",
-		translate: "sidebar.nav.LAPORAN",
-		submenu: [
-			{
-				name: "List Laporan",
-				path: "/app/pelaporan",
-			},
-			{
-				name: "Laporan ditutup",
-				path: "/app/laporan-ditutup",
-			},
-		],
+		translate: "sidebar.nav.PELAPORAN",
 	},
+	// {
+	// 	name: "Pelaporan",
+	// 	icon: "icon-notebook",
+	// 	translate: "sidebar.nav.LAPORAN",
+	// 	submenu: [
+	// 		{
+	// 			name: "List Laporan",
+	// 			path: "/app/pelaporan",
+	// 		},
+	// 		{
+	// 			name: "Laporan ditutup",
+	// 			path: "/app/laporan-ditutup",
+	// 		},
+	// 	],
+	// },
 	{
 		name: "Penjadwalan Evaluasi",
 		path: "/app/penjadwalan",

pages/app/index.js

@@ -40,7 +40,8 @@ class App extends Component {
 			<div>
 				<Navbar className="navbar-color" expand="md" dark>
 					<NavbarBrand href="/">
-						<img className="img-fluid" src="/static/img/Logo-vputih.png" alt="App Logo" /><img className="img-text-vputih" src="/static/img/Logo-text-vputih.png" alt="App Logo" />
+						<img className="img-fluid" src="/static/img/Logo-vputih.png" alt="App Logo" />
+						<img className="img-text-vputih" src="/static/img/Logo-text-vputih.png" alt="App Logo" />
 					</NavbarBrand>
 					<NavbarToggler onClick={this.toggleCollapse} />
 					<Collapse isOpen={this.state.isOpen} navbar>
@@ -68,14 +69,20 @@ class App extends Component {
 										<button className="btn btn-info btn-lg"><img className="icon-buatlaporan" src="/static/img/icon-buat-laporan.png" alt="icon"/>Buat Laporan</button>
 									</Link> */}
 									<Link href="/laporan/new">
-									<Button color="info" className="btn-labeled">
-                        				<span className="btn-label"><img className="icon-buatlaporan" src="/static/img/icon-buat-laporan.png" alt="icon"/></span><text className="text-home-1">Buat Laporan</text>
-                    				</Button>
+										<Button color="info" className="btn-labeled">
+											<span className="btn-label">
+												<img className="icon-buatlaporan" src="/static/img/icon-buat-laporan.png" alt="icon" />
+											</span>
+											<text className="text-home-1">Buat Laporan</text>
+										</Button>
 									</Link>
-									<Link href="/laporan/new">
-									<Button color="info" className="btn-labeled-2">
-                        				<span className="btn-label"><img className="icon-pemantauan" src="/static/img/icon-pemantauan.png" alt="icon"/></span><text className="text-home-1">Pemantauan</text>
-                    				</Button>
+									<Link href="/pemantauan">
+										<Button color="info" className="btn-labeled-2">
+											<span className="btn-label">
+												<img className="icon-pemantauan" src="/static/img/icon-pemantauan.png" alt="icon" />
+											</span>
+											<text className="text-home-1">Pemantauan</text>
+										</Button>
 									</Link>
 								</p>
 							</Col>

styles/themes/theme-a.scss

@@ -2,178 +2,181 @@
 @import "../bootstrap/functions";
 @import "../bootstrap/variables";
 @import "../bootstrap/mixins";
-@import '../app/common/variables';
-
+@import "../app/common/variables";
 
 // LAYOUT
 
-$content-bg:                    #f5f7fa;
-$aside-bg:                      #fff;
+$content-bg: #f5f7fa;
+$aside-bg: #fff;
 
 // NAVBAR TOP
 
-$nav-top-bg:                    $info;
-$nav-top-bg-start:              $nav-top-bg;
-$nav-top-bg-end:                $info-light;
-$nav-header-bg:                 transparent;
+$nav-top-bg: #6fb9de;
+$nav-top-bg-start: $nav-top-bg;
+$nav-top-bg-end: $info-light;
+$nav-header-bg: transparent;
 
-$nav-top-item:                  #fff;
-$nav-top-item-active:           darken($nav-top-bg, 20%);
+$nav-top-item: #fff;
+$nav-top-item-active: darken($nav-top-bg, 20%);
 
 // SIDEBAR
 
-$sidebar-bg:                      $aside-bg;
+$sidebar-bg: $aside-bg;
 
-$sidebar-item-color:              #515253;
-$sidebar-item-color-active:       $nav-top-bg;
-$sidebar-item-bg-active:          darken($sidebar-bg, 1%);
+$sidebar-item-color: #515253;
+$sidebar-item-color-active: $nav-top-bg;
+$sidebar-item-bg-active: darken($sidebar-bg, 1%);
 
-$sidebar-icon-color:              inherits;
-$sidebar-icon-color-active:       $nav-top-bg;
+$sidebar-icon-color: inherits;
+$sidebar-icon-color-active: $nav-top-bg;
 
-$sidebar-bullet-color:            rgba(0,0,0,.25);
-$sidebar-bullet-color-active:     $sidebar-icon-color-active;
+$sidebar-bullet-color: rgba(0, 0, 0, 0.25);
+$sidebar-bullet-color-active: $sidebar-icon-color-active;
 
 // $sidebar-heading-color:           #919DA8;
-$sidebar-heading-color:           #6FB9DE;
-$sidebar-label-color:             $sidebar-item-color;
+$sidebar-heading-color: #6fb9de;
+$sidebar-label-color: $sidebar-item-color;
 
 // OFFSIDEBAR
 
-$offsidebar-bg:           #fff;
+$offsidebar-bg: #fff;
 $offsidebar-border-color: greyscale(darken($offsidebar-bg, 20%));
-$offsidebar-color:        $body-color;
+$offsidebar-color: $body-color;
 
 .theme-a {
-
-    /* ========================================================================
+	/* ========================================================================
        Component: layout
      ========================================================================== */
-    &.wrapper {
-        background-color: $content-bg;
-    }
+	&.wrapper {
+		background-color: $content-bg;
+	}
 
-    /* ========================================================================
+	/* ========================================================================
        Component: top-navbar
      ========================================================================== */
-    .topnavbar {
-        background-color: $nav-top-bg;
-        @include gradient-x($nav-top-bg-start, $nav-top-bg-end);
-
-        @include media-breakpoint-up(lg) {
-            .navbar-nav > .nav-item.show > .nav-link {
-                &, &:hover, &:focus {
-                    box-shadow: 0 -3px 0 darken($nav-top-bg, 6%) inset;
-                }
-            }
-        }
-
-        .navbar-nav > .nav-item > .navbar-text {
-            color: $nav-top-item;
-        }
-
-        .navbar-nav > .nav-item > .nav-link,
-        .navbar-nav > .nav-item.show > .nav-link {
-            color: $nav-top-item;
-            &:hover, &:focus {
-                color: $nav-top-item-active;
-            }
-        }
-
-        .dropdown-item.active, .dropdown-item:active {
-            background-color: $nav-top-bg;
-        }
-    }
-
-    /* ========================================================================
+	.topnavbar {
+		background-color: $nav-top-bg;
+		@include gradient-x($nav-top-bg-start, $nav-top-bg-end);
+
+		@include media-breakpoint-up(lg) {
+			.navbar-nav > .nav-item.show > .nav-link {
+				&,
+				&:hover,
+				&:focus {
+					box-shadow: 0 -3px 0 darken($nav-top-bg, 6%) inset;
+				}
+			}
+		}
+
+		.navbar-nav > .nav-item > .navbar-text {
+			color: $nav-top-item;
+		}
+
+		.navbar-nav > .nav-item > .nav-link,
+		.navbar-nav > .nav-item.show > .nav-link {
+			color: $nav-top-item;
+			&:hover,
+			&:focus {
+				color: $nav-top-item-active;
+			}
+		}
+
+		.dropdown-item.active,
+		.dropdown-item:active {
+			background-color: $nav-top-bg;
+		}
+	}
+
+	/* ========================================================================
        Component: sidebar
      ========================================================================== */
-    .sidebar {
-        background-color: $sidebar-bg;
-
-        .nav-heading {
-            color: $sidebar-heading-color;
-        }
-    }
-
-    // Items
-    .sidebar-nav {
-        > li {
-            > a, > .nav-item {
-                color: $sidebar-item-color;
-
-                &:focus, &:hover {
-                    color: $sidebar-item-color-active;
-                }
-
-                // Item icon
-                > em {
-                    color: $sidebar-icon-color;
-                }
-
-            }
-
-            // Active item state
-            &.active, &.open {
-                &, > a, > .nav-item, .sidebar-nav {
-                    background-color: $sidebar-item-bg-active;
-                    color: $sidebar-item-color-active;
-                }
-
-                > .nav-item > em, > a > em {
-                    color: $sidebar-icon-color-active;
-                }
-
-            }
-
-            &.active {
-                border-left-color: $sidebar-item-color-active;
-            }
-
-        }
-
-    }
-
-    .sidebar-subnav {
-        background-color: $sidebar-bg;
-
-        > .sidebar-subnav-header {
-            color: $sidebar-item-color;
-        }
-
-        > li {
-            > a, > .nav-item {
-                color: $sidebar-item-color;
-
-                &:focus, &:hover {
-                    color: $sidebar-item-color-active;
-                }
-
-            }
-
-            &.active {
-                > a, > .nav-item {
-                    color: $sidebar-icon-color-active;
-
-                    &:after {
-                        border-color: $sidebar-bullet-color-active;
-                        background-color: $sidebar-bullet-color-active;
-                    }
-
-                }
-
-            }
-
-        }
-
-    }
-
-    /* ========================================================================
+	.sidebar {
+		background-color: $sidebar-bg;
+
+		.nav-heading {
+			color: $sidebar-heading-color;
+		}
+	}
+
+	// Items
+	.sidebar-nav {
+		> li {
+			> a,
+			> .nav-item {
+				color: $sidebar-item-color;
+
+				&:focus,
+				&:hover {
+					color: $sidebar-item-color-active;
+				}
+
+				// Item icon
+				> em {
+					color: $sidebar-icon-color;
+				}
+			}
+
+			// Active item state
+			&.active,
+			&.open {
+				&,
+				> a,
+				> .nav-item,
+				.sidebar-nav {
+					background-color: $sidebar-item-bg-active;
+					color: $sidebar-item-color-active;
+				}
+
+				> .nav-item > em,
+				> a > em {
+					color: $sidebar-icon-color-active;
+				}
+			}
+
+			&.active {
+				border-left-color: $sidebar-item-color-active;
+			}
+		}
+	}
+
+	.sidebar-subnav {
+		background-color: $sidebar-bg;
+
+		> .sidebar-subnav-header {
+			color: $sidebar-item-color;
+		}
+
+		> li {
+			> a,
+			> .nav-item {
+				color: $sidebar-item-color;
+
+				&:focus,
+				&:hover {
+					color: $sidebar-item-color-active;
+				}
+			}
+
+			&.active {
+				> a,
+				> .nav-item {
+					color: $sidebar-icon-color-active;
+
+					&:after {
+						border-color: $sidebar-bullet-color-active;
+						background-color: $sidebar-bullet-color-active;
+					}
+				}
+			}
+		}
+	}
+
+	/* ========================================================================
        Component: offsidebar
      ========================================================================== */
-    .offsidebar {
-        border-left: 1px solid $offsidebar-border-color;
-        background-color: $offsidebar-bg;
-        color: $offsidebar-color;
-    }
+	.offsidebar {
+		border-left: 1px solid $offsidebar-border-color;
+		background-color: $offsidebar-bg;
+		color: $offsidebar-color;
+	}
 }

styles/themes/theme-e.scss

@@ -2,177 +2,180 @@
 @import "../bootstrap/functions";
 @import "../bootstrap/variables";
 @import "../bootstrap/mixins";
-@import '../app/common/variables';
-
+@import "../app/common/variables";
 
 // LAYOUT
 
-$content-bg:                    #f5f7fa;
-$aside-bg:                      $gray-dark;
+$content-bg: #f5f7fa;
+$aside-bg: $gray-dark;
 
 // NAVBAR TOP
 
-$nav-top-bg:                    $info-dark;
-$nav-top-bg-start:              $nav-top-bg;
-$nav-top-bg-end:                $info;
-$nav-header-bg:                 transparent;
+$nav-top-bg: #6fb9de;
+$nav-top-bg-start: $nav-top-bg;
+$nav-top-bg-end: $info-light;
+$nav-header-bg: transparent;
 
-$nav-top-item:                  #fff;
-$nav-top-item-active:           darken($nav-top-bg, 20%);
+$nav-top-item: #fff;
+$nav-top-item-active: darken($nav-top-bg, 20%);
 
 // SIDEBAR
 
-$sidebar-bg:                      $aside-bg;
+$sidebar-bg: $aside-bg;
 
-$sidebar-item-color:              #e1e2e3;
-$sidebar-item-color-active:       $nav-top-bg;
-$sidebar-item-bg-active:          darken($sidebar-bg, 1%);
+$sidebar-item-color: #e1e2e3;
+$sidebar-item-color-active: $nav-top-bg;
+$sidebar-item-bg-active: darken($sidebar-bg, 1%);
 
-$sidebar-icon-color:              inherits;
-$sidebar-icon-color-active:       $nav-top-bg;
+$sidebar-icon-color: inherits;
+$sidebar-icon-color-active: $nav-top-bg;
 
-$sidebar-bullet-color:            rgba(0,0,0,.25);
-$sidebar-bullet-color-active:     $sidebar-icon-color-active;
+$sidebar-bullet-color: rgba(0, 0, 0, 0.25);
+$sidebar-bullet-color-active: $sidebar-icon-color-active;
 
-$sidebar-heading-color:           #919DA8;
-$sidebar-label-color:             $sidebar-item-color;
+$sidebar-heading-color: #919da8;
+$sidebar-label-color: $sidebar-item-color;
 
 // OFFSIDEBAR
 
-$offsidebar-bg:           #fff;
+$offsidebar-bg: #fff;
 $offsidebar-border-color: greyscale(darken($offsidebar-bg, 20%));
-$offsidebar-color:        $body-color;
+$offsidebar-color: $body-color;
 
 .theme-e {
-
-    /* ========================================================================
+	/* ========================================================================
        Component: layout
      ========================================================================== */
-    &.wrapper {
-        background-color: $content-bg;
-    }
+	&.wrapper {
+		background-color: $content-bg;
+	}
 
-    /* ========================================================================
+	/* ========================================================================
        Component: top-navbar
      ========================================================================== */
-    .topnavbar {
-        background-color: $nav-top-bg;
-        @include gradient-x($nav-top-bg-start, $nav-top-bg-end);
-
-        @include media-breakpoint-up(lg) {
-            .navbar-nav > .nav-item.show > .nav-link {
-                &, &:hover, &:focus {
-                    box-shadow: 0 -3px 0 darken($nav-top-bg, 6%) inset;
-                }
-            }
-        }
-
-        .navbar-nav > .nav-item > .navbar-text {
-            color: $nav-top-item;
-        }
-
-        .navbar-nav > .nav-item > .nav-link,
-        .navbar-nav > .nav-item.show > .nav-link {
-            color: $nav-top-item;
-            &:hover, &:focus {
-                color: $nav-top-item-active;
-            }
-        }
-
-        .dropdown-item.active, .dropdown-item:active {
-            background-color: $nav-top-bg;
-        }
-    }
-
-    /* ========================================================================
+	.topnavbar {
+		background-color: $nav-top-bg;
+		@include gradient-x($nav-top-bg-start, $nav-top-bg-end);
+
+		@include media-breakpoint-up(lg) {
+			.navbar-nav > .nav-item.show > .nav-link {
+				&,
+				&:hover,
+				&:focus {
+					box-shadow: 0 -3px 0 darken($nav-top-bg, 6%) inset;
+				}
+			}
+		}
+
+		.navbar-nav > .nav-item > .navbar-text {
+			color: $nav-top-item;
+		}
+
+		.navbar-nav > .nav-item > .nav-link,
+		.navbar-nav > .nav-item.show > .nav-link {
+			color: $nav-top-item;
+			&:hover,
+			&:focus {
+				color: $nav-top-item-active;
+			}
+		}
+
+		.dropdown-item.active,
+		.dropdown-item:active {
+			background-color: $nav-top-bg;
+		}
+	}
+
+	/* ========================================================================
        Component: sidebar
      ========================================================================== */
-    .sidebar {
-        background-color: $sidebar-bg;
-
-        .nav-heading {
-            color: $sidebar-heading-color;
-        }
-    }
-
-    // Items
-    .sidebar-nav {
-        > li {
-            > a, > .nav-item {
-                color: $sidebar-item-color;
-
-                &:focus, &:hover {
-                    color: $sidebar-item-color-active;
-                }
-
-                // Item icon
-                > em {
-                    color: $sidebar-icon-color;
-                }
-
-            }
-
-            // Active item state
-            &.active, &.open {
-                &, > a, > .nav-item, .sidebar-nav {
-                    background-color: $sidebar-item-bg-active;
-                    color: $sidebar-item-color-active;
-                }
-
-                > .nav-item > em, > a > em {
-                    color: $sidebar-icon-color-active;
-                }
-
-            }
-
-            &.active {
-                border-left-color: $sidebar-item-color-active;
-            }
-
-        }
-
-    }
-
-    .sidebar-subnav {
-        background-color: $sidebar-bg;
-
-        > .sidebar-subnav-header {
-            color: $sidebar-item-color;
-        }
-
-        > li {
-            > a, > .nav-item {
-                color: $sidebar-item-color;
-
-                &:focus, &:hover {
-                    color: $sidebar-item-color-active;
-                }
-
-            }
-
-            &.active {
-                > a, > .nav-item {
-                    color: $sidebar-icon-color-active;
-
-                    &:after {
-                        border-color: $sidebar-bullet-color-active;
-                        background-color: $sidebar-bullet-color-active;
-                    }
-
-                }
-
-            }
-
-        }
-
-    }
-
-    /* ========================================================================
+	.sidebar {
+		background-color: $sidebar-bg;
+
+		.nav-heading {
+			color: $sidebar-heading-color;
+		}
+	}
+
+	// Items
+	.sidebar-nav {
+		> li {
+			> a,
+			> .nav-item {
+				color: $sidebar-item-color;
+
+				&:focus,
+				&:hover {
+					color: $sidebar-item-color-active;
+				}
+
+				// Item icon
+				> em {
+					color: $sidebar-icon-color;
+				}
+			}
+
+			// Active item state
+			&.active,
+			&.open {
+				&,
+				> a,
+				> .nav-item,
+				.sidebar-nav {
+					background-color: $sidebar-item-bg-active;
+					color: $sidebar-item-color-active;
+				}
+
+				> .nav-item > em,
+				> a > em {
+					color: $sidebar-icon-color-active;
+				}
+			}
+
+			&.active {
+				border-left-color: $sidebar-item-color-active;
+			}
+		}
+	}
+
+	.sidebar-subnav {
+		background-color: $sidebar-bg;
+
+		> .sidebar-subnav-header {
+			color: $sidebar-item-color;
+		}
+
+		> li {
+			> a,
+			> .nav-item {
+				color: $sidebar-item-color;
+
+				&:focus,
+				&:hover {
+					color: $sidebar-item-color-active;
+				}
+			}
+
+			&.active {
+				> a,
+				> .nav-item {
+					color: $sidebar-icon-color-active;
+
+					&:after {
+						border-color: $sidebar-bullet-color-active;
+						background-color: $sidebar-bullet-color-active;
+					}
+				}
+			}
+		}
+	}
+
+	/* ========================================================================
        Component: offsidebar
      ========================================================================== */
-    .offsidebar {
-        border-left: 1px solid $offsidebar-border-color;
-        background-color: $offsidebar-bg;
-        color: $offsidebar-color;
-    }
+	.offsidebar {
+		border-left: 1px solid $offsidebar-border-color;
+		background-color: $offsidebar-bg;
+		color: $offsidebar-color;
+	}
 }