Skip to content

Commit

Permalink
- Fix bug on multiple dropdown when using top navigation layout
Browse files Browse the repository at this point in the history 
- Create navigation menu on sidebar (WIP)
  • Loading branch information
@ianriizky
ianriizky committed Jan 31, 2022
1 parent 7fcceb3 commit 375d717
Show file tree
Hide file tree
Showing 2 changed files with 127 additions and 23 deletions.
10 changes: 10 additions & 0 deletions resources/js/stisla/scripts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -272,6 +272,11 @@ $(function() {

sidebar_dropdown();
$(".main-wrapper").removeClass("container");

let dropdownMenuMobileElement = main_sidebar.find(".dropdown-menu-mobile");
const dropdownMenuMobileClass = main_sidebar.find(".dropdown-menu-mobile").attr("data-dropdown-menu-mobile-class");

dropdownMenuMobileElement.addClass(dropdownMenuMobileClass).removeClass("dropdown-menu");
}
}else{
$("body").removeClass("sidebar-gone sidebar-show");
Expand All @@ -297,6 +302,11 @@ $(function() {
$(".main-wrapper").addClass("container");
// if(sidebar_nicescroll != null)
// sidebar_nicescroll.remove();

let dropdownMenuMobileElement = main_sidebar.find(".dropdown-menu-mobile");
const dropdownMenuMobileClass = main_sidebar.find(".dropdown-menu-mobile").attr("data-dropdown-menu-mobile-class");

dropdownMenuMobileElement.addClass("dropdown-menu").removeClass(dropdownMenuMobileClass);
}else if(now_layout_class == 'layout-2') {
$("body").addClass("layout-2");
}else{
Expand Down
140 changes: 117 additions & 23 deletions resources/views/components/sidebar.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,132 @@
@push('styles')
<style>
span.narrow-line-height {
line-height: 15px !important;
}
@media (max-width: 1024px) {
ul.dropdown-submenu {
position: relative;
}
ul.dropdown-submenu > ul.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
}
ul.dropdown-submenu:hover > ul.dropdown-menu {
display: block;
}
ul.dropdown-submenu:hover > a:after {
border-left-color: #fff;
}
ul.dropdown-submenu.pull-left {
float: none;
}
ul.dropdown-submenu.pull-left > ul.dropdown-menu {
left: -100%;
margin-left: 10px;
}
}
</style>
@endpush

<nav class="navbar navbar-secondary navbar-expand-lg">
<div class="container">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a href="#" data-toggle="dropdown" class="nav-link has-dropdown"><i class="fas fa-fire"></i><span>Dashboard</span></a>
<li class="nav-item dropdown @if (Route::is('education.*')) active @endif">
<a href="#" data-toggle="dropdown" class="nav-link has-dropdown">
<i class="fas @lang('icon.education')"></i> <span>@lang('Educate')</span>
</a>

<ul class="dropdown-menu">
<li class="nav-item"><a href="index-0.html" class="nav-link">General Dashboard</a></li>
<li class="nav-item"><a href="index.html" class="nav-link">Ecommerce Dashboard</a></li>
<li class="nav-item dropdown">
<a href="#" data-toggle="dropdown" class="nav-link has-dropdown">
<span class="narrow-line-height">Webinar Literasi Keuangan</span>
</a>

<ul class="dropdown-menu dropdown-menu-mobile" data-dropdown-menu-mobile-class="dropdown-submenu">
<li class="nav-item mb-xl-0 mb-4">
<a href="#" class="nav-link">
<span class="narrow-line-height">Template Surat Penawaran Webinar</span>
</a>
</li>

<li class="nav-item mb-xl-0 mb-4">
<a href="#" class="nav-link">
<span class="narrow-line-height">Template Presentasi Webinar Literasi Keuangan</span>
</a>
</li>

<li class="nav-item mb-xl-0 mb-4">
<a href="#" class="nav-link">
<span class="narrow-line-height">Template Rundown Webinar Literasi Keuangan</span>
</a>
</li>

<li class="nav-item mb-xl-0 mb-4">
<a href="#" class="nav-link">
<span class="narrow-line-height">Pemetaan Sekolah / Kampus Potensi Webinar</span>
</a>
</li>

<li class="nav-item mb-xl-0 mb-4">
<a href="#" class="nav-link">
<span class="narrow-line-height">Input Rencana Penyelenggaraan Webinar</span>
</a>
</li>
</ul>
</li>

<li class="nav-item">
<a href="#" class="nav-link">
<span class="narrow-line-height">Video Pembukaan Rekening Online</span>
</a>
</li>

<li class="nav-item">
<a href="#" class="nav-link">
<span class="narrow-line-height">Employee Get CiN</span>
</a>
</li>
</ul>
</li>

<li class="nav-item active">
<a href="#" class="nav-link"><i class="far fa-heart"></i><span>Top Navigation</span></a>
<li class="nav-item dropdown @if (Route::is('monitoring.*')) active @endif">
<a href="#" data-toggle="dropdown" class="nav-link has-dropdown">
<i class="fas @lang('icon.monitoring')"></i> <span>@lang('Monitoring')</span>
</a>

<ul class="dropdown-menu">
<li class="nav-item">
<a href="#" class="nav-link">
<span class="narrow-line-height">Input Pencapaian Harian</span>
</a>
</li>
</ul>
</li>

<li class="nav-item dropdown">
<a href="#" data-toggle="dropdown" class="nav-link has-dropdown"><i class="far fa-clone"></i><span>Multiple Dropdown</span></a>
<li class="nav-item dropdown @if (Route::is('achievement.*')) active @endif">
<a href="#" data-toggle="dropdown" class="nav-link has-dropdown">
<i class="fas @lang('icon.achievement')"></i> <span>@lang('Achievement')</span>
</a>

<ul class="dropdown-menu">
<li class="nav-item"><a href="#" class="nav-link">Not Dropdown Link</a></li>

<li class="nav-item dropdown"><a href="#" class="nav-link has-dropdown">Hover Me</a>
<ul class="dropdown-menu">
<li class="nav-item"><a href="#" class="nav-link">Link</a></li>

<li class="nav-item dropdown"><a href="#" class="nav-link has-dropdown">Link 2</a>
<ul class="dropdown-menu">
<li class="nav-item"><a href="#" class="nav-link">Link</a></li>
<li class="nav-item"><a href="#" class="nav-link">Link</a></li>
<li class="nav-item"><a href="#" class="nav-link">Link</a></li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span class="narrow-line-height">Dashboard Pencapaian</span>
</a>
</li>

<li class="nav-item"><a href="#" class="nav-link">Link 3</a></li>
</ul>
<li class="nav-item">
<a href="#" class="nav-link">
<span class="narrow-line-height">Dashboard Growth New CiN</span>
</a>
</li>

<li class="nav-item">
<a href="#" class="nav-link">
<span class="narrow-line-height">Dashboard Penutupan CiN</span>
</a>
</li>
</ul>
</li>
Expand Down

0 comments on commit 375d717

Please sign in to comment.