Feature #4 : Change Layout to Fluid and Add Menu Management

This commit is contained in:
Daeng Deni Mardaeni 2024-08-05 14:26:31 +07:00
parent d2b549b6e6
commit 0e6195fa5a
3 changed files with 146 additions and 42 deletions

View File

@ -1,6 +1,6 @@
<footer class="footer"> <footer class="footer">
<!-- begin: container --> <!-- 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 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"> <div class="flex order-2 md:order-1 gap-2 font-normal text-2sm">
<span class="text-gray-500"> <span class="text-gray-500">

View File

@ -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') @section('main')
<div class="flex grow"> <div class="flex grow">
@ -11,7 +19,7 @@
</div> </div>
<!-- end: container --> <!-- end: container -->
<!-- begin: container --> <!-- begin: container -->
<div class="container-fixed"> <div class="container-fluid">
@yield('content') @yield('content')
</div> </div>
<!-- end: container --> <!-- end: container -->

View File

@ -5,12 +5,12 @@
<div class="sidebar-header hidden lg:flex items-center relative justify-between px-3 lg:px-6 shrink-0" <div class="sidebar-header hidden lg:flex items-center relative justify-between px-3 lg:px-6 shrink-0"
id="sidebar_header"> id="sidebar_header">
<a class="dark:hidden" href="{{ url('/') }}"> <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="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" /> <img class="small-logo min-h-[22px] max-w-none" style="height: 50px" src="assets/media/app/logo-agi-mini.png"/>
</a> </a>
<a class="light:hidden dark:flex" href="{{ url('/') }}"> <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="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" /> <img class="small-logo min-h-[22px] max-w-none" style="height: 50px" src="assets/media/app/logo-agi-mini.png"/>
</a> </a>
<button <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" 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"
@ -30,8 +30,7 @@
class="menu-link flex items-center grow cursor-pointer border border-transparent gap-[10px] pl-[10px] pr-[10px] py-[6px]" class="menu-link flex items-center grow cursor-pointer border border-transparent gap-[10px] pl-[10px] pr-[10px] py-[6px]"
tabindex="0"> tabindex="0">
<span class="menu-icon items-start text-gray-500 dark:text-gray-400 w-[20px]"> <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 class="ki-filled ki-element-11 text-lg"></i>
</i>
</span> </span>
<span <span
class="menu-title text-sm font-semibold text-gray-700 menu-item-active:text-primary menu-link-hover:!text-primary"> class="menu-title text-sm font-semibold text-gray-700 menu-item-active:text-primary menu-link-hover:!text-primary">
@ -39,6 +38,103 @@
</span> </span>
</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>
</div> </div>