Skip to content

Commit ae335dc

Browse files
AdamNatadAdamNatad
committed
floating right side bar
1 parent 8762588 commit ae335dc

File tree

5 files changed

+214
-6
lines changed

5 files changed

+214
-6
lines changed

‎config/adminlte-v2.php‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -394,6 +394,25 @@
394394
'right_sidebar_scrollbar_theme' => 'os-theme-light',
395395
'right_sidebar_scrollbar_auto_hide' => 'l',
396396

397+
398+
/*
399+
|--------------------------------------------------------------------------
400+
| Floating Right Sidebar Button
401+
|--------------------------------------------------------------------------
402+
|
403+
| Custom settings for the floating quick access button that toggles
404+
| the control sidebar.
405+
|
406+
*/
407+
408+
'right_sidebar_floating' => true, // Show or hide floating button
409+
'right_sidebar_floating_color' => '#247555', // Bootstrap bg-* class or HEX color
410+
'right_sidebar_floating_icon' => 'fas fa-sliders-h', // Font Awesome icon class
411+
'right_sidebar_floating_icon_color' => '#ffffff', // Icon color (HEX or Bootstrap text-* class)
412+
'right_sidebar_floating_icon_image' => null, // Optional: image path (overrides icon)
413+
'right_sidebar_floating_zindex' => 1020, // Layering control (below modals)
414+
415+
397416
/*
398417
|--------------------------------------------------------------------------
399418
| URLs

‎config/adminlte.php‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -202,6 +202,81 @@
202202
'classes_topnav_nav' => 'navbar-expand',
203203
'classes_topnav_container' => 'container',
204204

205+
206+
/* Added Code By Adam Natad */
207+
208+
//Enable Login Button
209+
'nt_login_navbar_enable' => true,
210+
211+
// Manually handle text color
212+
'nt_topnav_textcolor_handle' => true,
213+
'nt_topnav_textcolor_color' => '#CCCECF',
214+
'nt_topnav_textcolor_hover' => '#FFFFFF',
215+
216+
/* Mobile Logo 1024x199 24BPP SVG */
217+
'nt_navbar_mobile_logo' => '/images/NatadTechBanner.svg',
218+
219+
//Enable Mobile Text - set to false to use image
220+
'nt_navbar_mobile_text' => true,
221+
222+
/*Limit Size Characters
223+
* 1,2,3
224+
* 1 = best for below 10 chars including spaces
225+
* 2 = best for below 13 chars including spaces
226+
* 3 = best for below 23 chars including spaces
227+
*/
228+
'nt_navbar_mobile_text_size' => 1,
229+
230+
'nt_navbar_mobile_text_label' => 'NatadTech',
231+
'nt_navbar_mobile_text_color' => '#CCCECF',
232+
'nt_navbar_mobile_text_hover_color' => '#FFFFFF',
233+
234+
// BG Color of Top Nav
235+
'nt_navbar_hexbg_color_use' => false,
236+
'nt_navbar_hexbg_color_hex' => '#343A40',
237+
238+
'nt_notification_dropdown_header_classes' => 'bg-dark nt-non-selectable',
239+
'nt_footer_classes' => 'bg-dark',
240+
241+
/* Footer Install Banner */
242+
// Fixed Footer Label Text
243+
'nt_install_app_footer_label' => 'NatadTech - Making Things Simple',
244+
245+
// Fixed Footer Background Color
246+
'nt_install_app_footer_bgcolor' => '#007bff',
247+
248+
// Fixed Footer Main App Logo
249+
'nt_install_app_logo' => '/images/NatadTechLogoWhite.png',
250+
251+
252+
253+
/*
254+
|--------------------------------------------------------------------------
255+
| NatadTech Sidebar Customization
256+
|--------------------------------------------------------------------------
257+
|
258+
| Allows optional hex color override for the sidebar background.
259+
|
260+
*/
261+
'nt_top_sidebar_hexbg_color_use' => true,
262+
'nt_top_sidebar_hexbg_color_hex' => '#247555',
263+
264+
'nt_sidebar_hexbg_color_use' => true,
265+
'nt_sidebar_hexbg_color_hex' => '#247555',
266+
267+
// New: active & hover button color customization
268+
'nt_sidebar_button_color_use' => true,
269+
'nt_sidebar_button_color_active' => '#247555', // active highlight
270+
'nt_sidebar_button_color_hover' => '#494E53', // hover state
271+
272+
// New optional text/icon colors
273+
'nt_sidebar_button_text_color_active' => '#ffffff',
274+
'nt_sidebar_button_text_color_hover' => '#ffffff',
275+
276+
'nt_sidebar_button_icon_color_active' => '#ffffff',
277+
'nt_sidebar_button_icon_color_hover' => '#ffffff',
278+
279+
205280
/*
206281
|--------------------------------------------------------------------------
207282
| Sidebar
@@ -244,6 +319,25 @@
244319
'right_sidebar_scrollbar_theme' => 'os-theme-light',
245320
'right_sidebar_scrollbar_auto_hide' => 'l',
246321

322+
323+
/*
324+
|--------------------------------------------------------------------------
325+
| Floating Right Sidebar Button
326+
|--------------------------------------------------------------------------
327+
|
328+
| Custom settings for the floating quick access button that toggles
329+
| the control sidebar.
330+
|
331+
*/
332+
333+
'right_sidebar_floating' => true, // Show or hide floating button
334+
'right_sidebar_floating_color' => '#247555', // Bootstrap bg-* class or HEX color
335+
'right_sidebar_floating_icon' => 'fas fa-sliders-h', // Font Awesome icon class
336+
'right_sidebar_floating_icon_color' => '#ffffff', // Icon color (HEX or Bootstrap text-* class)
337+
'right_sidebar_floating_icon_image' => null, // Optional: image path (overrides icon)
338+
'right_sidebar_floating_zindex' => 1020, // Layering control (below modals)
339+
340+
247341
/*
248342
|--------------------------------------------------------------------------
249343
| URLs

‎resources/views/partials/footer/floating-right-sidebar.blade.php‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
@inject('layoutHelper', 'AdamNatad\LaravelAdminLte\Helpers\LayoutHelper')
2+
3+
@if($layoutHelper->isRightSidebarEnabled() && config('adminlte.right_sidebar_floating', true))
4+
<div id="floating-sidebar-wrapper">
5+
<style>
6+
#floating-sidebar-wrapper {
7+
position: fixed;
8+
bottom: 25px;
9+
right: 25px;
10+
z-index: {{ config('adminlte.right_sidebar_floating_zindex', 1020) }};
11+
opacity: 0;
12+
animation: fadeInFloating 0.6s ease-in forwards;
13+
transition: opacity 0.3s ease-in-out;
14+
}
15+
16+
.floating-sidebar-btn {
17+
width: 52px;
18+
height: 52px;
19+
border-radius: 50%;
20+
display: flex;
21+
align-items: center;
22+
justify-content: center;
23+
transition: all 0.3s ease-in-out;
24+
}
25+
26+
.floating-sidebar-btn:hover {
27+
transform: scale(1.1);
28+
}
29+
30+
@keyframes fadeInFloating {
31+
from { opacity: 0; transform: translateY(20px); }
32+
to { opacity: 1; transform: translateY(0); }
33+
}
34+
</style>
35+
36+
@php
37+
$floatColor = config('adminlte.right_sidebar_floating_color', 'bg-primary');
38+
$isHexColor = \Illuminate\Support\Str::startsWith($floatColor, '#');
39+
40+
$iconColor = config('adminlte.right_sidebar_floating_icon_color', '#ffffff');
41+
$isHexIconColor = \Illuminate\Support\Str::startsWith($iconColor, '#');
42+
@endphp
43+
44+
<button
45+
class="btn shadow floating-sidebar-btn {{ !$isHexColor ? $floatColor : '' }}"
46+
@if($isHexColor)
47+
style="background-color: {{ $floatColor }};"
48+
@endif
49+
data-widget="control-sidebar"
50+
@if(!config('adminlte.right_sidebar_slide'))
51+
data-controlsidebar-slide="false"
52+
@endif
53+
@if(config('adminlte.right_sidebar_scrollbar_theme', 'os-theme-light') != 'os-theme-light')
54+
data-scrollbar-theme="{{ config('adminlte.right_sidebar_scrollbar_theme') }}"
55+
@endif
56+
@if(config('adminlte.right_sidebar_scrollbar_auto_hide', 'l') != 'l')
57+
data-scrollbar-auto-hide="{{ config('adminlte.right_sidebar_scrollbar_auto_hide') }}"
58+
@endif
59+
title="Open Quick Settings">
60+
61+
@if(config('adminlte.right_sidebar_floating_icon_image'))
62+
<img src="{{ asset(config('adminlte.right_sidebar_floating_icon_image')) }}"
63+
alt="Sidebar Icon"
64+
style="width:22px;height:22px;">
65+
@else
66+
<i class="{{ config('adminlte.right_sidebar_floating_icon', 'fas fa-sliders-h') }} {{ !$isHexIconColor ? $iconColor : '' }}"
67+
@if($isHexIconColor)
68+
style="color: {{ $iconColor }};"
69+
@endif></i>
70+
@endif
71+
</button>
72+
</div>
73+
74+
<script>
75+
document.addEventListener('DOMContentLoaded', function () {
76+
const sidebar = document.querySelector('.control-sidebar');
77+
const floatWrapper = document.getElementById('floating-sidebar-wrapper');
78+
79+
if (sidebar && floatWrapper) {
80+
sidebar.addEventListener('shown.lte.controlsidebar', () => {
81+
floatWrapper.style.opacity = '0';
82+
floatWrapper.style.pointerEvents = 'none';
83+
});
84+
85+
sidebar.addEventListener('hidden.lte.controlsidebar', () => {
86+
floatWrapper.style.opacity = '1';
87+
floatWrapper.style.pointerEvents = 'auto';
88+
});
89+
}
90+
});
91+
</script>
92+
@endif

‎resources/views/partials/footer/footer.blade.php‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
@include('adminlte::partials.footer.nt-fixed-footer-pwa')
77

88

9-
9+
{{-- Floating Right Sidebar --}}
10+
@include('vendor.adminlte.partials.footer.floating-right-sidebar')
1011

1112

‎resources/views/partials/navbar/navbar.blade.php‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -154,6 +154,13 @@
154154
@endif
155155
@endif
156156

157+
{{-- Right sidebar toggler link --}}
158+
{{-- MOVED TO FOOTER AS FLOATING BUTTON
159+
@if($layoutHelper->isRightSidebarEnabled())
160+
@include('adminlte::partials.navbar.menu-item-right-sidebar-toggler')
161+
@endif
162+
--}}
163+
157164
{{-- Add this conditional to show "Login" button to non-logged-in users and hide "Login" button on error pages--}}
158165
@if(!Auth::check() && !app()->isDownForMaintenance() && !app()->runningUnitTests() && !isset($exception))
159166
<li class="nav-item">
@@ -170,11 +177,6 @@
170177
@endif
171178
</li>
172179
@endif
173-
174-
{{-- Right sidebar toggler link --}}
175-
@if($layoutHelper->isRightSidebarEnabled())
176-
@include('adminlte::partials.navbar.menu-item-right-sidebar-toggler')
177-
@endif
178180
</ul>
179181
</nav>
180182

0 commit comments

Comments
 (0)