From 0e6195fa5a9da88f9a32d4aeabd7347880c70dee Mon Sep 17 00:00:00 2001
From: Daeng Deni Mardaeni <ddeni05@gmail.com>
Date: Mon, 5 Aug 2024 14:26:31 +0700
Subject: [PATCH] Feature #4 : Change Layout to Fluid and Add Menu Management

---
 resources/views/layouts/footer.blade.php  |   2 +-
 resources/views/layouts/main.blade.php    |  12 +-
 resources/views/layouts/sidebar.blade.php | 174 +++++++++++++++++-----
 3 files changed, 146 insertions(+), 42 deletions(-)

diff --git a/resources/views/layouts/footer.blade.php b/resources/views/layouts/footer.blade.php
index d314461..917c138 100644
--- a/resources/views/layouts/footer.blade.php
+++ b/resources/views/layouts/footer.blade.php
@@ -1,6 +1,6 @@
 <footer class="footer">
 	<!-- begin: container -->
-	<div class="container-fixed">
+	<div class="container-fluid">
 		<div class="flex flex-col md:flex-row justify-center md:justify-between items-center gap-3 py-5">
 			<div class="flex order-2 md:order-1 gap-2 font-normal text-2sm">
 				<span class="text-gray-500">
diff --git a/resources/views/layouts/main.blade.php b/resources/views/layouts/main.blade.php
index 7ed8bf2..a602f54 100644
--- a/resources/views/layouts/main.blade.php
+++ b/resources/views/layouts/main.blade.php
@@ -1,4 +1,12 @@
-@extends('layouts.base')
+@php
+    use Illuminate\Support\Facades\Route;
+
+    $route      = explode('.',Route::currentRouteName());
+	$modules    = file_get_contents(dirname(__FILE__, 4) . '/modules_statuses.json');
+    $module     = json_decode($modules);
+@endphp
+
+@extends('layouts.base', ['module' => $module])
 
 @section('main')
     <div class="flex grow">
@@ -11,7 +19,7 @@
                 </div>
                 <!-- end: container -->
                 <!-- begin: container -->
-                <div class="container-fixed">
+                <div class="container-fluid">
                     @yield('content')
                 </div>
                 <!-- end: container -->
diff --git a/resources/views/layouts/sidebar.blade.php b/resources/views/layouts/sidebar.blade.php
index f2e41f8..865303b 100644
--- a/resources/views/layouts/sidebar.blade.php
+++ b/resources/views/layouts/sidebar.blade.php
@@ -1,45 +1,141 @@
 <div
-	class="sidebar dark:bg-coal-600 bg-light border-r border-r-gray-200 dark:border-r-coal-100 fixed top-0 bottom-0 z-20 hidden lg:flex flex-col items-stretch shrink-0"
-	data-drawer="true" data-drawer-class="drawer drawer-start top-0 bottom-0" data-drawer-enable="true|lg:false"
-	id="sidebar">
-	<div class="sidebar-header hidden lg:flex items-center relative justify-between px-3 lg:px-6 shrink-0"
-		id="sidebar_header">
-		<a class="dark:hidden" href="{{ url('/') }}">
-			<img class="default-logo min-h-[22px] max-w-none" style="height: 53.55px;" src="assets/media/app/logo-agi-croped.png" />
-			<img class="small-logo min-h-[22px] max-w-none" style="height: 50px" src="assets/media/app/logo-agi-mini.png" />
-		</a>
-		<a class="light:hidden dark:flex" href="{{ url('/') }}">
-			<img class="default-logo min-h-[22px] max-w-none" style="height: 53.55px;" src="assets/media/app/logo-agi-croped.png" />
-			<img class="small-logo min-h-[22px] max-w-none" style="height: 50px" src="assets/media/app/logo-agi-mini.png" />
-		</a>
-		<button
-			class="btn btn-icon btn-icon-md size-[30px] rounded-lg border border-gray-200 dark:border-gray-300 bg-light text-gray-500 hover:text-gray-700 toggle absolute left-full top-2/4 -translate-x-2/4 -translate-y-2/4"
-			data-toggle="body" data-toggle-class="sidebar-collapse" id="sidebar_toggle">
-			<i class="ki-filled ki-black-left-line toggle-active:rotate-180 transition-all duration-300">
-			</i>
-		</button>
-	</div>
-	<div class="sidebar-content flex grow shrink-0 py-5 pr-2" id="sidebar_content">
-		<div class="scrollable-y-hover grow shrink-0 flex pl-2 lg:pl-5 pr-1 lg:pr-3" data-scrollable="true"
-			data-scrollable-dependencies="#sidebar_header" data-scrollable-height="auto" data-scrollable-offset="0px"
-			data-scrollable-wrappers="#sidebar_content" id="sidebar_scrollable">
-			<div class="menu flex flex-col grow gap-0.5" data-menu="true" data-menu-accordion-expand-all="false"
-				id="sidebar_menu">
-				<div class="menu-item" data-menu-item-toggle="accordion" data-menu-item-trigger="click">
-					<div
-						class="menu-link flex items-center grow cursor-pointer border border-transparent gap-[10px] pl-[10px] pr-[10px] py-[6px]"
-						tabindex="0">
+    class="sidebar dark:bg-coal-600 bg-light border-r border-r-gray-200 dark:border-r-coal-100 fixed top-0 bottom-0 z-20 hidden lg:flex flex-col items-stretch shrink-0"
+    data-drawer="true" data-drawer-class="drawer drawer-start top-0 bottom-0" data-drawer-enable="true|lg:false"
+    id="sidebar">
+    <div class="sidebar-header hidden lg:flex items-center relative justify-between px-3 lg:px-6 shrink-0"
+         id="sidebar_header">
+        <a class="dark:hidden" href="{{ url('/') }}">
+            <img class="default-logo min-h-[22px] max-w-none" style="height: 53.55px;" src="assets/media/app/logo-agi-croped.png"/>
+            <img class="small-logo min-h-[22px] max-w-none" style="height: 50px" src="assets/media/app/logo-agi-mini.png"/>
+        </a>
+        <a class="light:hidden dark:flex" href="{{ url('/') }}">
+            <img class="default-logo min-h-[22px] max-w-none" style="height: 53.55px;" src="assets/media/app/logo-agi-croped.png"/>
+            <img class="small-logo min-h-[22px] max-w-none" style="height: 50px" src="assets/media/app/logo-agi-mini.png"/>
+        </a>
+        <button
+            class="btn btn-icon btn-icon-md size-[30px] rounded-lg border border-gray-200 dark:border-gray-300 bg-light text-gray-500 hover:text-gray-700 toggle absolute left-full top-2/4 -translate-x-2/4 -translate-y-2/4"
+            data-toggle="body" data-toggle-class="sidebar-collapse" id="sidebar_toggle">
+            <i class="ki-filled ki-black-left-line toggle-active:rotate-180 transition-all duration-300">
+            </i>
+        </button>
+    </div>
+    <div class="sidebar-content flex grow shrink-0 py-5 pr-2" id="sidebar_content">
+        <div class="scrollable-y-hover grow shrink-0 flex pl-2 lg:pl-5 pr-1 lg:pr-3" data-scrollable="true"
+             data-scrollable-dependencies="#sidebar_header" data-scrollable-height="auto" data-scrollable-offset="0px"
+             data-scrollable-wrappers="#sidebar_content" id="sidebar_scrollable">
+            <div class="menu flex flex-col grow gap-0.5" data-menu="true" data-menu-accordion-expand-all="false"
+                 id="sidebar_menu">
+                <div class="menu-item" data-menu-item-toggle="accordion" data-menu-item-trigger="click">
+                    <div
+                        class="menu-link flex items-center grow cursor-pointer border border-transparent gap-[10px] pl-[10px] pr-[10px] py-[6px]"
+                        tabindex="0">
 						<span class="menu-icon items-start text-gray-500 dark:text-gray-400 w-[20px]">
-							<i class="ki-filled ki-element-11 text-lg">
-							</i>
+							<i class="ki-filled ki-element-11 text-lg"></i>
 						</span>
-						<span
-							class="menu-title text-sm font-semibold text-gray-700 menu-item-active:text-primary menu-link-hover:!text-primary">
+                        <span
+                            class="menu-title text-sm font-semibold text-gray-700 menu-item-active:text-primary menu-link-hover:!text-primary">
 							Dashboards
 						</span>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
+                    </div>
+                </div>
+                @php
+                    $headingSystem = 0;
+                    $headingMain = 0;
+                    $headingMaster = 0;
+                @endphp
+                @foreach($module as $row => $key)
+                    @if($key)
+                        @if(file_exists(dirname(__FILE__, 4) . '/Modules/'.$row.'/module.json'))
+                            @php
+                                $module = json_decode(file_get_contents(dirname(__FILE__, 4) . '/Modules/'.$row.'/module.json'));
+                                $menus = $module->menu;
+                            @endphp
+                            @foreach($menus as $key => $value)
+                                @if($key=='main')
+                                    @if($headingMain == 0)
+                                        <div class="menu-item pt-2.25 pb-px">
+                                            <span class="menu-heading uppercase text-2sm font-semibold text-gray-500 pl-[10px] pr-[10px]">
+                                                Apps
+                                            </span>
+                                        </div>
+                                        @php $headingMain = 1; @endphp
+                                    @endif
+                                @elseif($key=='master')
+                                    @if($headingMaster == 0)
+                                        <div class="menu-item pt-2.25 pb-px">
+                                            <span class="menu-heading uppercase text-2sm font-semibold text-gray-500 pl-[10px] pr-[10px]">
+                                                Master Data
+                                            </span>
+                                        </div>
+                                        @php $headingMaster = 1; @endphp
+                                    @endif
+                                @elseif($key=='system')
+                                    @if($headingSystem == 0)
+                                        <div class="menu-item pt-2.25 pb-px">
+                                            <span class="menu-heading uppercase text-2sm font-semibold text-gray-500 pl-[10px] pr-[10px]">
+                                                Systems
+                                            </span>
+                                        </div>
+                                        @php $headingSystem = 1; @endphp
+                                    @endif
+                                @endif
+
+                                @foreach($value as $menu)
+                                    @if(is_array($menu->sub))
+                                        <div class="menu-item {{ request()->routeIs($menu->path) || request()->routeIs($menu->path.'.*') ? 'show' : '' }}" data-menu-item-toggle="accordion" data-menu-item-trigger="click">
+                                            <div
+                                                class="menu-link flex items-center grow cursor-pointer border border-transparent gap-[10px] pl-[10px] pr-[10px] py-[6px]"
+                                                tabindex="0">
+                                                <span class="menu-icon items-start text-gray-500 dark:text-gray-400 w-[20px]">
+                                                    <i class="{{ $menu->icon ?? 'ki-filled ki-element-11 text-lg' }}"></i>
+                                                </span>
+                                                <span class="menu-title text-sm font-semibold text-gray-700 menu-item-active:text-primary menu-link-hover:!text-primary">
+                                                    {{ $menu->title }}
+                                                </span>
+                                                <span class="menu-arrow text-gray-400 w-[20px] shrink-0 justify-end ml-1 mr-[-10px]">
+                                                    <i class="ki-filled ki-plus text-2xs menu-item-show:hidden">
+                                                    </i>
+                                                    <i class="ki-filled ki-minus text-2xs hidden menu-item-show:inline-flex">
+                                                    </i>
+                                                </span>
+                                            </div>
+                                            @if(is_array($menu->sub))
+                                                <div class="menu-accordion gap-0.5 pl-[10px] relative before:absolute before:left-[20px] before:top-0 before:bottom-0 before:border-l before:border-gray-200">
+                                                    @foreach($menu->sub as $sub)
+                                                        <div class="menu-item {{ request()->routeIs($sub->path.'.*') ? 'active' : '' }}">
+                                                            <a class="menu-link gap-[14px] pl-[10px] pr-[10px] py-[8px] border border-transparent items-center grow menu-item-active:bg-secondary-active dark:menu-item-active:bg-coal-300 dark:menu-item-active:border-gray-100 menu-item-active:rounded-lg hover:bg-secondary-active dark:hover:bg-coal-300 dark:hover:border-gray-100 hover:rounded-lg"
+                                                               href="{{ $sub->path ? route($sub->path.'.index') : '' }}" tabindex="0">
+                                                                <span
+                                                                    class="menu-bullet flex w-[6px] relative before:absolute before:top-0 before:size-[6px] before:rounded-full before:-translate-x-1/2 before:-translate-y-1/2 menu-item-active:before:bg-primary menu-item-hover:before:bg-primary">
+                                                                </span>
+                                                                <span
+                                                                    class="menu-title text-2sm font-medium text-gray-700 menu-item-active:text-primary menu-item-active:font-semibold menu-link-hover:!text-primary">
+                                                                    {{ $sub->title  }}
+                                                                </span>
+                                                            </a>
+                                                        </div>
+                                                    @endforeach
+                                                </div>
+                                            @endif
+                                        </div>
+                                    @else
+                                        <div class="menu-item {{ request()->routeIs($menu->path.'.*') ? 'active' : '' }}">
+                                            <a class="menu-link flex items-center grow cursor-pointer border border-transparent gap-[10px] pl-[10px] pr-[10px] py-[6px]" href="{{ $menu->path ? route($menu->path.'.index') : '' }}">
+                                                <span class="menu-icon items-start text-gray-500 dark:text-gray-400 w-[20px]">
+                                                    <i class="ki-filled ki-badge text-lg"></i>
+                                                </span>
+                                                <span class="menu-title text-sm font-semibold text-gray-700 menu-item-active:text-primary menu-link-hover:!text-primary">
+                                                    {{ $menu->title }}
+                                                </span>
+                                            </a>
+                                        </div>
+                                    @endif
+                                @endforeach
+                            @endforeach
+                        @endif
+                    @endif
+                @endforeach
+            </div>
+        </div>
+    </div>
 </div>