How to show empty view while opening dashboard home page in html?

How to show empty view while opening dashboard home page in html? - javascript

When running first time the home page dashboard shows project details and selected project name in side menu. here is the screenshot of currently showing
What exactly, I need is
here is the code i used:
<div class="container-fluid">
<div class="row">
<nav class="col-md-2 d-none d-md-block bg-light sidebar">
<div id="projectlist" class="sidebar-sticky">
<ul class="nav flex-column nav-pills">
<li class="nav-item">
<a name="EventDrivenLLC" class="nav-link active" href="#">
<img class="img-fluid" style="width:8%" src="./Cloud Thrifty_files/generic_gcp.png">
EventDrivenLLC
<div>
<small>
ProjectId:
</small>
</div>
</a>
</li>
<li class="nav-item">
<a name="NickaJack" class="nav-link" href="#">
<img class="img-fluid" style="width:8%" src="./Cloud Thrifty_files/generic_gcp.png">
NickaJack
<div>
<small>
ProjectId:
</small>
</div>
</a>
</li>
<li class="nav-item">
<a name="NickaJack" class="nav-link" href="#">
<img class="img-fluid" style="width:8%" src="./Cloud Thrifty_files/generic_gcp.png">
NickaJack
<div>
<small>
ProjectId:
</small>
</div>
</a>
</li>
<li class="nav-item">
<a name="alarmist" class="nav-link" href="#">
<img class="img-fluid" style="width:8%" src="./Cloud Thrifty_files/generic_gcp.png">
alarmist
<div>
<small>
ProjectId: alarmist-172522
</small>
</div>
</a>
</li>
Details showned while project selected - project listed are listed from side menu, if any of side menu project is selected then it shows the details of project and project is highlighted.
<div id="decodingideas-147616" class="d-none justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom ">
<h1 class="h2">Project:decodingideas</h1>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary">Compute API Enabled</button>
</div>
<div class="btn-group mr-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-secondary">Service Account Key</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-secondary">Other Errors</button>
</div>
</div>
<div class="container">
<h4>Compute Instances (0)</h4>
<table class="table table-striped h6">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Type</th>
<th scope="col">GCP Zone</th>
<th scope="col">Startup</th>
<th scope="col">Shutdown</th>
</tr>

Look at your code more closely. Look where you have:
<a name="EventDrivenLLC" class="nav-link active" href="#">
And change it to:
<a name="EventDrivenLLC" class="nav-link" href="#">
I'm not sure this will entirely fix it as I don't see your full coding for that page, but try that first.

Related

How To Keep Sidebar Open When Click Sub Menu

I use bootstrap 5, i want when a sidebar item is clicked it will be active and when a sub sidebar item is clicked it will also be active
And when reloading the item that was selected earlier it is still stored
Here my code
<div class="row row-offcanvas row-offcanvas-left vh-100" style="width: 1700px">
<div class="col-md-3 col-lg-2 sidebar-offcanvas h-100 overflow-auto bg-light pl-0" id="sidebar" role="navigation">
<ul class="nav flex-column sticky-top pl-2 mt-0">
<li>
<a href="/home">
<i class="nc-icon nc-bank"></i>
<p>Dashboard</p>
</a>
</li>
{{-- Menu Manajemen Karyawan --}}
<li>
<a class="nav-link" href="#submenu1" data-toggle="collapse" data-target="#submenu1">
<i class="nc-icon nc-tile-56"></i>
Manajemen Karyawan
</a>
<ul class="sub-menu list-unstyled flex-column collapse pl-2" id="submenu1" aria-expanded="false">
<li style="margin-top: -15px">
<a href="{{ route('karyawan.index') }}">
<i class="nc-icon nc-badge"></i>
<p>Karyawan </p>
<p></p>
</a>
</li>
<li style="margin-top: -15px">
<a href="#">
<i class="nc-icon nc-ruler-pencil"></i>
<p>Pengkinian Data </p>
<p></p>
</a>
</li>
<li class="dropdown" style="margin-top: -15px">
<a href="" data-toggle="dropdown" aria-expanded="false">
<i class="nc-icon nc-chart-bar-32"></i>
<p class="dropdown-toggle" id="navbarDropdownMenuLink">Pergerakan Karir </p>
<p></p>
</a>
<div class="dropdown-menu dropdown-primary dropdown-menu-right">
<a class="dropdown-item" href="{{ route('mutasi.index') }}">Mutasi</a>
<a class="dropdown-item" href="{{ route('demosi.index') }}">Demosi</a>
<a class="dropdown-item" href="{{ route('promosi.index') }}">Promosi</a>
<a class="dropdown-item" href="{{ route('karyawan.penonaktifan') }}">Penonaktifan</a>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
can anyone help ?

Unable to paste copied text or url in an HTML form text input area

I have an HTML page designed in Bootstrap 5 which has a simple form with a single text input field. When I test the page in my desktop or laptop, I am able to copy any text or web link and paste it into the form's text input field. If the test the same page from my live website and test it in my mobile phone's browser, the paste operation sometimes works and sometimes does not.
On older Android phones, if I copy some text and then try to paste it into my form, it works. But, if I use a relatively new Android phone, I am unable to paste the copied text. It appears as if the text was not copied properly, i.e. the clipboard is empty.
Is this an issue with my code or JavaScript loaded in my html or is this an issue with my mobile device?
Please advise.
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top">
<div class="container-fluid">
<!-- Navbar Brand -->
<a class="navbar-brand" href="index.html">
<img class="img-fluid ps-5 pt-2" src="https://via.placeholder.com/150" alt="Example Logo" width="150" height="50" style="position:absolute; top:0; left:0">
</a>
<!-- Toggler/Collapsible Button -->
<button class="navbar-toggler ms-auto ms-sm-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-center" id="navbarCollapse">
<ul class="navbar-nav ms-2 align-items-end">
<li class="nav-item">
<a class="nav-link active" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="register.html">Register</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.html">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="faq.html">FAQ</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<br>
<!-- Headline -->
<div class="container mt-5 pt-3 pb-1" style="width: 70%;">
<h3>Example Website</h3>
<p>Demonstrate HTML5 Forms</p>
</div>
<!-- Form Input Area -->
<div class="container rounded mt-3 pt-3 pb-1 bg-dark text-white" style="width: 70%;">
<form method="post" class="needs-validation" novalidate>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-addon"><img src="https://via.placeholder.com/35" width="35" height="35"></span>
</div>
<input type="text" class="form-control" placeholder="Enter your name" name="fullname" required>
<div class="input-group-append">
<button class="btn btn-primary" type="submit">Submit</button>
</div>
<div class="invalid-feedback">Compulsory field</div>
</div>
<div class="form-check ms-2">
<input class="form-check-input" type="checkbox" id="check1" name="checkrules" value="accept" required>
<label class="form-check-label">I accept the rules policy.</label>
</div>
</form>
</div>
<br>
<div class="container mt-5 pt-3 pb-1" style="width: 70%;">
<div class="row">
<div class="col-xl-4">
<img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/100" alt="test1">
<p class="text-center mt-2">Test 1</p>
</div>
<div class="col-xl-4">
<img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/100" alt="test2">
<p class="text-center mt-2">Test 2</p>
</div>
<div class="col-xl-4">
<img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/100" alt="test3">
<p class="text-center mt-2">Test 3</p>
</div>
</div>
</div>
<!-- Description -->
<div class="container mt-5 pt-3 pb-1" style="width: 70%;">
<h5>Welcome to Example.com</h5>
<ul>
<li>Sentence 1</li>
<li>Sentence 2</li>
<li>Sentence 3</li>
<li>Sentence 4</li>
<li>Sentence 5</li>
</ul>
</div>
<footer class="footer mt-auto py-3 bg-light">
<div class="container">
<br>
<p class="text-muted text-center">Copyright &copy
<script>
document.write(new Date().getFullYear())
</script> Example</p>
<p class="text-muted text-center">Rules</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>

Integrate AdminLTE with MVC 5 Application

I have a very basic MVC 5 Application which I am attempting to add AdminLTE to. I downloaded the AdminLTE Nuget package and added the code from the startup.html page to my MVC application's _Layout.cshtml page. I updated all the CSS and JS links to point to the right directory for my application.
Here is the code in the _Layout.cshtml file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title</title>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<!-- Theme style -->
<link href="~/admin-lte/css/AdminLTE.css" rel="stylesheet" />
<link href="~/Content/font-awesome.css" rel="stylesheet" />
<link href="~/admin-lte/css/skins/skin-blue.css" rel="stylesheet" />
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition sidebar-mini">
#if (Request.IsAuthenticated)
{
<div class="wrapper">
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#"><i class="fas fa-bars"></i></a>
</li>
<li class="nav-item d-none d-sm-inline-block">
Home
</li>
<li class="nav-item d-none d-sm-inline-block">
Contact
</li>
</ul>
<!-- SEARCH FORM -->
<form class="form-inline ml-3">
<div class="input-group input-group-sm">
<input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-navbar" type="submit">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</form>
<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<!-- Messages Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="far fa-comments"></i>
<span class="badge badge-danger navbar-badge">3</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="dist/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 mr-3 img-circle">
<div class="media-body">
<h3 class="dropdown-item-title">
Brad Diesel
<span class="float-right text-sm text-danger"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">Call me whenever you can...</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="dist/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
<div class="media-body">
<h3 class="dropdown-item-title">
John Pierce
<span class="float-right text-sm text-muted"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">I got your message bro</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="dist/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
<div class="media-body">
<h3 class="dropdown-item-title">
Nora Silvester
<span class="float-right text-sm text-warning"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">The subject goes here</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
See All Messages
</div>
</li>
<!-- Notifications Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="far fa-bell"></i>
<span class="badge badge-warning navbar-badge">15</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<span class="dropdown-header">15 Notifications</span>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-envelope mr-2"></i> 4 new messages
<span class="float-right text-muted text-sm">3 mins</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-users mr-2"></i> 8 friend requests
<span class="float-right text-muted text-sm">12 hours</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-file mr-2"></i> 3 new reports
<span class="float-right text-muted text-sm">2 days</span>
</a>
<div class="dropdown-divider"></div>
See All Notifications
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#">
<i class="fas fa-th-large"></i>
</a>
</li>
</ul>
</nav>
<!-- /.navbar -->
<!-- Main Sidebar Container -->
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<!-- Brand Logo -->
<a href="index3.html" class="brand-link">
<img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
style="opacity: .8">
<span class="brand-text font-weight-light">AdminLTE 3</span>
</a>
<!-- Sidebar -->
<div class="sidebar">
<!-- Sidebar user panel (optional) -->
<div class="user-panel mt-3 pb-3 mb-3 d-flex">
<div class="image">
<img src="dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
</div>
<div class="info">
Alexander Pierce
</div>
</div>
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<!-- Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library -->
<li class="nav-item has-treeview menu-open">
<a href="#" class="nav-link active">
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>
Starter Pages
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link active">
<i class="far fa-circle nav-icon"></i>
<p>Active Page</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Inactive Page</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-th"></i>
<p>
Simple Link
<span class="right badge badge-danger">New</span>
</p>
</a>
</li>
</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0 text-dark">Starter Page</h1>
</div><!-- /.col -->
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item active">Starter Page</li>
</ol>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->
<!-- Main content -->
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's
content.
</p>
Card link
Another link
</div>
</div>
<div class="card card-primary card-outline">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's
content.
</p>
Card link
Another link
</div>
</div><!-- /.card -->
</div>
<!-- /.col-md-6 -->
<div class="col-lg-6">
<div class="card">
<div class="card-header">
<h5 class="m-0">Featured</h5>
</div>
<div class="card-body">
<h6 class="card-title">Special title treatment</h6>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
<div class="card card-primary card-outline">
<div class="card-header">
<h5 class="m-0">Featured</h5>
</div>
<div class="card-body">
<h6 class="card-title">Special title treatment</h6>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<!-- /.col-md-6 -->
</div>
<!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Control sidebar content goes here -->
<div class="p-3">
<h5>Title</h5>
<p>Sidebar content</p>
</div>
</aside>
<!-- /.control-sidebar -->
<!-- Main Footer -->
<footer class="main-footer">
<!-- To the right -->
<div class="float-right d-none d-sm-inline">
Anything you want
</div>
<!-- Default to the left -->
<strong>Copyright © 2014-2019 AdminLTE.io.</strong> All rights reserved.
</footer>
</div>
}
<div class="container body-content">
#RenderBody()
</div>
<script src="~/Scripts/jquery-3.1.1.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
</body>
</html>
Here is what the Home page currently looks like. It seems like not all the JS and/or CSS is being loaded but I have no idea what is missing as the Chrome console is not showing any errors. What am I missing here?

Vue Router view not working in laravel blade page

I am new in vue js. I have tried to run ExampleComponent.vue and it run ok in my admin panel showing its content. Now I want to import routes from external file (new_route_list.js) and load it via AdminMaster.vue router-view. But now the problem is that in admin panel it not working with . Nothing shown when I hit in 'project-name/home'. But It should load AdminHome.vue content.
Also, npm run watch & browser's vue js console showing no error.
Please help me to figure out where is the problem.
In app.js
require('./bootstrap');
window.Vue = require('vue');
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import {v_routes} from './new_route_list.js';
Vue.component('admin-main', require('./components/admin/AdminMaster.vue'));
const router = new VueRouter({
v_routes,
mode:'history'
})
const app = new Vue({
el: '#app',
router
});
AdminHome.vue
<template>
<div>
<!-- Main content -->
<section class="content">
<div class="card">
<div class="card-header">
<h3 class="card-title">Title</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
<i class="fa fa-minus"></i></button>
<button type="button" class="btn btn-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
<i class="fa fa-times"></i></button>
</div>
</div>
<div class="card-body">
Start creating your amazing application .....!
</div>
<div class="card-footer">
Footer
</div>
<!-- /.card-footer-->
</div>
</section>
<!-- /.content -->
</div>
AdminMaster.vue
<template>
<div id="adminmain">
<router-view></router-view>
</div>
new_route_list.js
import AdminHome from './components/admin/AdminHome.vue'
export const v_routes = [
{
path:'/home',
component: AdminHome
}
]
In admin_master.blade.php I have added:
<div class="wrapper" id="app">
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<!-- Left navbar links -->
<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<!-- Messages Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="far fa-comments"></i>
<span class="badge badge-danger navbar-badge">3</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="{{ asset('assets/admin/default/admin.png')}}" alt="User Avatar" class="img-size-50 mr-3 img-circle">
<div class="media-body">
<h3 class="dropdown-item-title">
Brad Diesel
<span class="float-right text-sm text-danger"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">Call me whenever you can...</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="{{ asset('assets/admin/default/admin.png')}}" alt="User Avatar" class="img-size-50 img-circle mr-3">
<div class="media-body">
<h3 class="dropdown-item-title">
John Pierce
<span class="float-right text-sm text-muted"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">I got your message bro</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="{{ asset('assets/admin/default/admin.png')}}" alt="User Avatar" class="img-size-50 img-circle mr-3">
<div class="media-body">
<h3 class="dropdown-item-title">
Nora Silvester
<span class="float-right text-sm text-warning"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">The subject goes here</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
See All Messages
</div>
</li>
<!-- Notifications Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="far fa-bell"></i>
<span class="badge badge-warning navbar-badge">15</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<span class="dropdown-item dropdown-header">15 Notifications</span>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-envelope mr-2"></i> 4 new messages
<span class="float-right text-muted text-sm">3 mins</span>
</a>
<div class="dropdown-divider"></div>
<div class="dropdown-divider"></div>
See All Notifications
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#">
<i class="fas fa-th-large"></i>
</a>
</li>
</ul>
</nav>
<!-- /.navbar -->
<!-- Main Sidebar Container -->
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<!-- Brand Logo -->
<a href="../../index3.html" class="brand-link">
<img src="{{ asset('assets/admin/default/AdminLTELogo.png')}}"
alt="AdminLTE Logo"
class="brand-image img-circle elevation-3"
style="opacity: .8">
<span class="brand-text font-weight-light">Admin Panel</span>
</a>
<!-- Sidebar -->
<div class="sidebar">
<!-- Sidebar user (optional) -->
<div class="user-panel mt-3 pb-3 mb-3 d-flex">
<div class="image">
<img src="{{ asset('assets/admin/default/admin.png')}}" class="img-circle elevation-2" alt="User Image">
</div>
<div class="info">
{{Auth::user()->name}}
</div>
</div>
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<!-- Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library -->
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>
Dashboard
<i class="right fas fa-angle-left"></i>
</p>
</a>
</li>
<li class="nav-item">
<a href="../widgets.html" class="nav-link">
<i class="nav-icon fas fa-th"></i>
<p>
Posts
<span class="right badge badge-danger">New</span>
</p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-copy"></i>
<p>
Layout Options
<i class="fas fa-angle-left right"></i>
<span class="badge badge-info right">6</span>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../layout/top-nav.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Top Navigation</p>
</a>
</li>
<li class="nav-item">
<a href="../layout/collapsed-sidebar.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Collapsed Sidebar</p>
</a>
</li>
</ul>
</li>
</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1>Admin Home Page</h1>
</div>
<div class="col-sm-6">
</div>
</div>
</div><!-- /.container-fluid -->
</section>
<!-- Main content -->
<admin-main></admin-main>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Control sidebar content goes here -->
</aside>
<!-- /.control-sidebar -->
</div>

The reason why it wasn't working is because of the way the const was named in the new_route_list.js file. You have to name it routes since it is short for
new VueRouter({
routes: [
///routes here
],
mode:'history'
});
This is shown in this example here:
https://router.vuejs.org/guide/#javascript
Another thing I noticed was the AdminMaster.vue file. It feels redundant, so I would recommend removing it and just do this in your admin_master.blade.php:
<!-- Main content -->
<router-view></router-view>
<!-- /.content -->
Edit: Your files will need to be updated for this change
Here is app.js:
require('./bootstrap');
window.Vue = require('vue');
import VueRouter from 'vue-router'
import { routes } from './new_route_list.js'
Vue.use(VueRouter)
const router = new VueRouter({
routes,
mode:'history'
});
const app = new Vue({
router
}).$mount("#app");
I updated the new Vue() with .$mount() and removed el:'#app' per the the example shown in the link above.
Here is the update to new_route_list.js:
import adminHome from './AdminHome.vue';
export const routes = [
{
path:'/',
component: adminHome
}
]
Update AdminHome.vue too. You need to wrap the template in the closing </template> tag and then you need to have script tags that export the component like shown below:
<template>
<div>
<!-- Main content -->
<section class="content">
<div class="card">
<div class="card-header">
<h3 class="card-title">Title</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
<i class="fa fa-minus"></i></button>
<button type="button" class="btn btn-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
<i class="fa fa-times"></i></button>
</div>
</div>
<div class="card-body">
Start creating your amazing application .....!
</div>
<div class="card-footer">
Footer
</div>
<!-- /.card-footer-->
</div>
</section>
<!-- /.content -->
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>

jQuery toggle sidebar submenu based on active

I have a sidebar menu that's built using Bootstrap 4. To create a submenu that expanded right utilizing jQuery. It looks like this:
<div class="container-fluid">
<div class="row">
<nav class="col-md-1 d-none d-md-block sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link d-flex align-items-center flex-column sidebar" href="#" data-toggle="collapse" data-target="#submenu" aria-expanded="false" id="sidebarCollapse" >
<%= image_tag 'products.png' %>
<p>Products</p>
</a>
</li>
</ul>
</div>
</nav>
<!--Product Sidebar-->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
</div>
<ul class="list-unstyled components">
<li class="active">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
Main Item
</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Item 1
</li>
<li>
Item 2
</li>
<li>
Item 3
</li>
</ul>
</li>
</ul>
</nav>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">Dashboard</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group mr-2">
<button class="btn btn-sm btn-outline-secondary">Share</button>
<button class="btn btn-sm btn-outline-secondary">Export</button>
</div>
</div>
</div>
<canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas>
</main>
</div>
</div>
Then the jQuery:
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
This mostly works correctly. I click on the anchor tag of Products and the submenu/sidebar opens up to the right. However the problem is when not active it will show Bootstrap Sidebar and Main Item. How do I get it so that when not active that the sidebar has a visibility of hidden?
I've tried the following with jQuery with no luck:
$(document).ready(function () {
$('#sidebar').hide();
$('#sidebarCollapse').on('click', function (e) {
e.preventDefault();
$('#sidebar', this).toggle('active');
});
});

Do you have your CSS set up to hide it initially?
#sidebar {
display:none;
}
#sidebar.active{
display:block;
}

We Keep Coding

JavaScript is the programming language of the Web.

How to show empty view while opening dashboard home page in html? - javascript

Look at your code more closely. Look where you have: <a name="EventDrivenLLC" class="nav-link active" href="#"> And change it to: <a name="EventDrivenLLC" class="nav-link" href="#"> I'm not sure this will entirely fix it as I don't see your full coding for that page, but try that first.

Related

How To Keep Sidebar Open When Click Sub Menu

Unable to paste copied text or url in an HTML form text input area

Integrate AdminLTE with MVC 5 Application

Vue Router view not working in laravel blade page

jQuery toggle sidebar submenu based on active

Categories

Resources