Chore: Upgrade to Laravel 12 + remove Mary and Jetstream dependencies (#141)
* docs: remove requirement for setting APP_KEY manually * optimize date picker * clean up modals * spot light working * reorganization * add lazy load * wip * remove filament * styling
This commit is contained in:
hackerESQ
@@ -0,0 +1,10 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||
<link rel="icon" href="{{ asset('favicon.svg') }}">
|
||||
|
||||
<title>{{ config('app.name', 'Investbrain') }}</title>
|
||||
|
||||
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
||||
|
||||
@livewireStyles
|
||||
@@ -1,64 +0,0 @@
|
||||
@props([
|
||||
'sidebar' => null,
|
||||
'content' => null,
|
||||
'footer' => null,
|
||||
'fullWidth' => false,
|
||||
'withNav' => false,
|
||||
'collapseText' => 'Collapse',
|
||||
'collapseIcon' => 'o-bars-3-bottom-right',
|
||||
'collapsible' => false,
|
||||
'url' => route('mary.toogle-sidebar', absolute: false),
|
||||
])
|
||||
|
||||
<main class="{{ !$fullWidth ? 'max-w-screen-2xl' : '' }} w-full mx-auto">
|
||||
<div class="drawer {{ $sidebar?->attributes['right'] ? 'drawer-end' : '' }} lg:drawer-open">
|
||||
<input id="{{ $sidebar?->attributes['drawer'] }}" type="checkbox" class="drawer-toggle" />
|
||||
|
||||
<div {{ $content->attributes->class(["drawer-content w-full mx-auto p-5 lg:px-10 lg:py-5"]) }}>
|
||||
{{-- MAIN CONTENT --}}
|
||||
{{ $content }}
|
||||
</div>
|
||||
|
||||
{{-- SIDEBAR --}}
|
||||
@if($sidebar)
|
||||
<div
|
||||
x-data="{
|
||||
collapsed: {{ session('mary-sidebar-collapsed', 'false') }},
|
||||
collapseText: '{{ $collapseText }}',
|
||||
toggle() {
|
||||
this.collapsed = !this.collapsed;
|
||||
fetch('{{ $url }}?collapsed=' + this.collapsed);
|
||||
this.$dispatch('sidebar-toggled', this.collapsed);
|
||||
}
|
||||
}"
|
||||
@menu-sub-clicked="if(collapsed) { toggle() }"
|
||||
@class(["drawer-side z-20 lg:z-auto", "top-0 lg:top-[73px] lg:h-[calc(100vh-73px)]" => $withNav])
|
||||
>
|
||||
<label for="{{ $sidebar?->attributes['drawer'] }}" aria-label="close sidebar" class="drawer-overlay"></label>
|
||||
{{-- SIDEBAR CONTENT --}}
|
||||
<div>
|
||||
|
||||
{{ $sidebar }}
|
||||
|
||||
{{-- SIDEBAR COLLAPSE --}}
|
||||
@if($sidebar->attributes['collapsible'])
|
||||
<x-mary-menu class="hidden !bg-inherit lg:block">
|
||||
<x-mary-menu-item
|
||||
@click="toggle"
|
||||
icon="{{ $sidebar->attributes['collapse-icon'] ?? $collapseIcon }}"
|
||||
title="{{ $sidebar->attributes['collapse-text'] ?? $collapseText }}" />
|
||||
</x-mary-menu>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
{{-- END SIDEBAR--}}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{{-- FOOTER --}}
|
||||
@if($footer)
|
||||
<footer {{ $footer?->attributes->class(["mx-auto w-full", "max-w-screen-2xl" => !$fullWidth ]) }}>
|
||||
{{ $footer }}
|
||||
</footer>
|
||||
@endif
|
||||
@@ -18,34 +18,31 @@ new class extends Component
|
||||
// methods
|
||||
|
||||
}; ?>
|
||||
<div class="bg-base-100 border-base-300 border-b sticky top-0 z-10">
|
||||
<div class="flex justify-between items-center px-7 py-3 gap-4 mx-auto">
|
||||
<div class="flex flex-0 items-center">
|
||||
|
||||
<label for="main-drawer" class="lg:hidden mr-3">
|
||||
<x-icon name="o-bars-3" class="cursor-pointer" />
|
||||
</label>
|
||||
|
||||
<div class="hidden md:block" style="height:2.5em">
|
||||
<x-application-logo />
|
||||
</div>
|
||||
<nav class="z-10 p-5 ml-0 md:ml-68 md:border-0 border-b border-zinc-200 dark:border-zinc-800">
|
||||
|
||||
<div class="flex flex-wrap justify-between items-center">
|
||||
|
||||
</div>
|
||||
<div class="flex flex-1 justify-center" x-data>
|
||||
|
||||
<x-spotlight
|
||||
shortcut="slash"
|
||||
search-text="{{ __('Search holdings, portfolios, or anything else...') }}"
|
||||
no-results-text="{{ __('Darn! Nothing found for that search.') }}"
|
||||
<div class="flex">
|
||||
<x-ui.button
|
||||
aria-controls="drawer-navigation"
|
||||
title="{{ __('Toggle Sidebar') }}"
|
||||
class="btn-circle btn-ghost btn-sm block md:hidden"
|
||||
icon="o-bars-3"
|
||||
@click="sideBarOpen = true"
|
||||
/>
|
||||
|
||||
<x-button
|
||||
@click.stop="$dispatch('mary-search-open')"
|
||||
class="btn-sm flex-1 justify-start md:flex-none"
|
||||
|
||||
<div class="ml-3 w-8 hidden sm:block md:hidden"> <x-ui.logo /> </div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<x-ui.button
|
||||
@click.stop="$dispatch('toggle-spotlight')"
|
||||
class="btn-sm btn-ghost bg-base-300 flex-1 justify-start md:flex-none border-none"
|
||||
>
|
||||
<x-slot:label>
|
||||
<span class="flex items-center text-gray-400">
|
||||
<x-icon name="o-magnifying-glass" class="mr-2" />
|
||||
<x-ui.icon name="o-magnifying-glass" class="mr-2" />
|
||||
<span class=" truncate hidden sm:block">
|
||||
@lang('Click or press :key to search', ['key' => '<kbd class="kbd kbd-sm">/</kbd>'])
|
||||
</span>
|
||||
@@ -54,35 +51,41 @@ new class extends Component
|
||||
</span>
|
||||
</span>
|
||||
</x-slot:label>
|
||||
</x-button>
|
||||
</x-ui.button>
|
||||
|
||||
<x-ui.spotlight
|
||||
search-text="{{ __('Search holdings, portfolios, or anything else...') }}"
|
||||
no-results-text="{{ __('Darn! Nothing found for that search.') }}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-0 items-center gap-4">
|
||||
|
||||
<x-button
|
||||
<x-ui.button
|
||||
title="{{ __('Documentation') }}"
|
||||
icon="o-book-open"
|
||||
class="btn-circle btn-ghost btn-sm"
|
||||
link="https://github.com/investbrainapp/investbrain"
|
||||
external
|
||||
>
|
||||
</x-button>
|
||||
</x-ui.button>
|
||||
|
||||
<x-button
|
||||
<x-ui.button
|
||||
title="{{ __('We\'re open source!') }}"
|
||||
class="btn-circle btn-ghost btn-sm"
|
||||
link="https://github.com/investbrainapp/investbrain"
|
||||
external
|
||||
>
|
||||
<x-github-icon />
|
||||
</x-button>
|
||||
<x-social.github-icon />
|
||||
</x-ui.button>
|
||||
|
||||
<x-theme-toggle
|
||||
<x-ui.theme-selector
|
||||
id="theme-selector"
|
||||
title="{{ __('Toggle Theme') }}"
|
||||
class="btn-circle btn-ghost btn-sm"
|
||||
darkTheme="business"
|
||||
lightTheme="corporate"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
@@ -19,76 +19,97 @@ new class extends Component
|
||||
|
||||
}; ?>
|
||||
|
||||
<div class="
|
||||
flex
|
||||
flex-col
|
||||
!transition-all
|
||||
!duration-100
|
||||
ease-out
|
||||
overflow-x-hidden
|
||||
overflow-y-auto
|
||||
h-screen
|
||||
lg:h-[calc(100vh-73px)]
|
||||
bg-base-100
|
||||
lg:bg-inherit
|
||||
{{ session('mary-sidebar-collapsed') == 'true' ? 'w-[70px] [&>*_summary::after]:hidden [&_.mary-hideable]:hidden [&_.display-when-collapsed]:block [&_.hidden-when-collapsed]:hidden' : null }}
|
||||
{{ session('mary-sidebar-collapsed') != 'true' ? 'w-[270px] [&>*_summary::after]:block [&_.mary-hideable]:block [&_.hidden-when-collapsed]:block [&_.display-when-collapsed]:hidden' : null }}
|
||||
">
|
||||
<div class="flex-1">
|
||||
<x-menu activate-by-route>
|
||||
<div
|
||||
aria-label="Sidebar"
|
||||
style="background-image: url('{{ asset('images/noise.svg') }}')"
|
||||
class="
|
||||
h-full
|
||||
bg-base-300
|
||||
border-r
|
||||
border-base-100
|
||||
fixed
|
||||
top-0
|
||||
left-0
|
||||
z-50
|
||||
md:w-68
|
||||
w-3/4
|
||||
transition-transform
|
||||
-translate-x-full
|
||||
md:translate-x-0
|
||||
"
|
||||
:class="{'translate-x-0': sideBarOpen, '-translate-x-full': !sideBarOpen}"
|
||||
x-data="{
|
||||
responsiveSidebar() {
|
||||
if (window.innerWidth >= 768) {
|
||||
this.sideBarOpen = true
|
||||
return;
|
||||
}
|
||||
this.sideBarOpen = false
|
||||
}
|
||||
}"
|
||||
@resize.window="responsiveSidebar"
|
||||
@keyup.escape.window="sideBarOpen = false"
|
||||
>
|
||||
<template x-teleport="body">
|
||||
<div
|
||||
aria-label="Overlay"
|
||||
class="block md:hidden z-10 fixed w-screen h-screen inset-0 bg-black/20 backdrop-blur-sm"
|
||||
x-on:click="sideBarOpen=false"
|
||||
x-show="sideBarOpen"
|
||||
x-cloak
|
||||
></div>
|
||||
</template>
|
||||
|
||||
<div class="h-full px-1 overflow-y-auto flex flex-col ">
|
||||
|
||||
<x-menu-item title="{{ __('Dashboard') }}" icon="o-home" link="{{ route('dashboard') }}" />
|
||||
<x-menu-sub title="{{ __('Portfolios') }}" icon="o-document-duplicate">
|
||||
@foreach (auth()->user()->portfolios as $portfolio)
|
||||
<x-menu-item icon="o-document" link="{{ route('portfolio.show', ['portfolio' => $portfolio->id ]) }}" >
|
||||
<x-slot:title>
|
||||
{{ $portfolio->title }}
|
||||
@if($portfolio->wishlist)
|
||||
<x-badge value="{{ __('Wishlist') }}" class="badge-secondary badge-sm ml-2" />
|
||||
@endif
|
||||
</x-slot:title>
|
||||
|
||||
</x-menu-item>
|
||||
@endforeach
|
||||
<div class="w-10 m-5"> <x-ui.logo /> </div>
|
||||
|
||||
<x-menu-item title="{{ __('Create Portfolio') }}" icon="o-document-plus" link="{{ route('portfolio.create') }}" />
|
||||
</x-menu-sub>
|
||||
<x-menu-item title="{{ __('Transactions') }}" icon="o-banknotes" link="{{ route('transaction.index') }}" />
|
||||
{{-- <x-menu-item title="{{ __('Reporting') }}" icon="o-chart-bar-square" link="####" /> --}}
|
||||
<x-ui.menu class="space-y-2 text-wrap w-full overflow-x-hidden" activate-by-route="true">
|
||||
<x-ui.menu-item icon="o-home" title="{{ __('Dashboard') }}" link="{{ route('dashboard') }}" class="font-medium text-md" />
|
||||
|
||||
</x-menu>
|
||||
@foreach (auth()->user()->portfolios as $portfolio)
|
||||
<x-ui.menu-item
|
||||
:title="$portfolio->title"
|
||||
icon="o-document"
|
||||
:badge="$portfolio->wishlist ? __('Wishlist') : null"
|
||||
badge-classes="badge-secondary badge-outline"
|
||||
link="{{ route('portfolio.show', ['portfolio' => $portfolio->id ]) }}"
|
||||
class="font-medium text-md"
|
||||
/>
|
||||
@endforeach
|
||||
|
||||
<x-ui.menu-item icon="o-document-plus" title="{{ __('Create Portfolio') }}" link="{{ route('portfolio.create') }}" class="font-medium text-md" />
|
||||
|
||||
</div>
|
||||
|
||||
<div class="px-3">
|
||||
|
||||
<x-section-border />
|
||||
<x-ui.menu-item icon="o-banknotes" title="{{ __('Transactions') }}" link="{{ route('transaction.index') }}" class="font-medium text-md" />
|
||||
|
||||
</x-ui.menu>
|
||||
<div class="flex-1"></div>
|
||||
|
||||
@php
|
||||
$user = auth()->user();
|
||||
@endphp
|
||||
|
||||
<x-list-item :item="$user" avatar="profile_photo_url" value="name" sub-value="email" no-separator no-hover class="mb-3 !-mt-3 rounded">
|
||||
<x-ui.list-item :item="$user" avatar="profile_photo_url" value="name" sub-value="email" no-separator no-hover class="rounded mb-2">
|
||||
<x-slot:actions>
|
||||
<x-dropdown>
|
||||
<x-ui.dropdown>
|
||||
<x-slot:trigger>
|
||||
<x-button icon="o-cog-6-tooth" class="btn-circle btn-ghost btn-xs" />
|
||||
<x-ui.button icon="o-cog-6-tooth" class="btn-circle btn-ghost btn-sm relative transition-transform focus:rotate-90" />
|
||||
</x-slot:trigger>
|
||||
|
||||
<x-menu-item title="{{ __('Manage Profile') }}" icon="o-user" link="{{ @route('profile.show') }}" />
|
||||
<x-menu-item title="{{ __('API Tokens') }}" icon="o-command-line" link="{{ @route('api-tokens.index') }}" />
|
||||
<x-menu-item title="{{ __('Import / Export Data') }}" icon="o-cloud-arrow-down" link="{{ @route('import-export') }}" />
|
||||
<x-ui.menu-item title="{{ __('Manage Profile') }}" icon="o-user" link="{{ @route('profile.show') }}" />
|
||||
<x-ui.menu-item title="{{ __('API Tokens') }}" icon="o-command-line" link="{{ @route('api-tokens.index') }}" />
|
||||
<x-ui.menu-item title="{{ __('Import / Export Data') }}" icon="o-cloud-arrow-down" link="{{ @route('import-export') }}" />
|
||||
|
||||
<x-section-border class="py-1" />
|
||||
<x-ui.section-border class="py-1" />
|
||||
|
||||
<x-menu-item title="{{ __('Log Out') }}" icon="o-power" onclick="event.preventDefault(); document.getElementById('logout').submit();" />
|
||||
<x-ui.menu-item title="{{ __('Log Out') }}" icon="o-power" onclick="event.preventDefault(); document.getElementById('logout').submit();" />
|
||||
<form id="logout" action="{{ route('logout') }}" method="POST" style="display: none;">
|
||||
@csrf
|
||||
</form>
|
||||
|
||||
</x-dropdown>
|
||||
</x-ui.dropdown>
|
||||
|
||||
</x-slot:actions>
|
||||
</x-list-item>
|
||||
</div>
|
||||
</x-ui.list-item>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user