Skip to content

Commit

Permalink
Main/Sidebar: Improvements (#144)
Browse files Browse the repository at this point in the history 
* Main/Sidebar: rework
- Use correctly daisyUI semantics
- Remove `sidebar` slot duplicity

* WIP

* WIP

* WIP
  • Loading branch information
@robsontenorio
robsontenorio authored Nov 14, 2023
1 parent 1f69f9c commit bac0f2d
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 73 deletions.
111 changes: 50 additions & 61 deletions src/View/Components/Main.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,80 +24,69 @@ public function __construct(
public function render(): View|Closure|string
{
return <<<'HTML'
<main @class(["flex mx-auto", "max-w-screen-2xl" => !$fullWidth])>
<main @class(["w-full mx-auto", "max-w-screen-2xl" => !$fullWidth])>
<div class="drawer inline lg:grid 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:p-10"]) }}>
<!-- MAIN CONTENT -->
{{ $content }}
</div>
<!-- SIDEBAR -->
@if($sidebar)
<div
x-data="{
collapsed: {{ session('mary-sidebar-collapsed', 'false') }},
collapseText: '{{ $collapseText }}',
toggle() {
this.collapsed = !this.collapsed;
fetch('/mary/toogle-sidebar?collapsed=' + this.collapsed);
}
}"
<!-- SIDEBAR -->
@if($sidebar)
<div @class(["h-screen sticky top-0", "top-20" => $withNav])>
<div>
@menu-sub-clicked="if(collapsed) { toggle() }"
@class(["drawer-side z-20 lg:z-auto", "top-0 lg:top-16" => $withNav])
>
<label for="{{ $sidebar?->attributes['drawer'] }}" aria-label="close sidebar" class="drawer-overlay"></label>
<!-- SIDEBAR CONTENT -->
<div
x-data="
{
collapsed: {{ session('mary-sidebar-collapsed', 'false') }},
collapseText: '{{ $collapseText }}',
toggle() {
this.collapsed = !this.collapsed;
fetch('/mary/toogle-sidebar?collapsed=' + this.collapsed);
}
}"
@menu-sub-clicked="if(collapsed) { toggle() }"
>
<div
:class="collapsed
? '!w-[70px] [&>*_summary::after]:!hidden [&_.mary-hideable]:!hidden [&_.display-when-collapsed]:!block [&_.hidden-when-collapsed]:!hidden'
: '!w-[270px] [&>*_summary::after]:!block [&_.mary-hideable]:!block [&_.hidden-when-collapsed]:!block [&_.display-when-collapsed]:!hidden'"
:class="collapsed
? '!w-[70px] [&>*_summary::after]:!hidden [&_.mary-hideable]:!hidden [&_.display-when-collapsed]:!block [&_.hidden-when-collapsed]:!hidden'
: '!w-[270px] [&>*_summary::after]:!block [&_.mary-hideable]:!block [&_.hidden-when-collapsed]:!block [&_.display-when-collapsed]:!hidden'"
{{
$sidebar->attributes->class([
"hidden lg:block h-screen transition-all duration-100 ease-out overflow-y-auto overflow-x-hidden",
"pb-24" => $withNav,
"w-[70px] [&>*_summary::after]:hidden [&_.mary-hideable]:hidden [&_.display-when-collapsed]:block [&_.hidden-when-collapsed]:hidden" => session('mary-sidebar-collapsed') == 'true',
"w-[270px] [&>*_summary::after]:block [&_.mary-hideable]:block [&_.hidden-when-collapsed]:block [&_.display-when-collapsed]:hidden" => session('mary-sidebar-collapsed') != 'true'
])
}}
>
{{ $sidebar }}
{{
$sidebar->attributes->class([
"pb-40 !transition-all !duration-100 ease-out overflow-x-hidden overflow-y-auto h-screen",
"w-[70px] [&>*_summary::after]:hidden [&_.mary-hideable]:hidden [&_.display-when-collapsed]:block [&_.hidden-when-collapsed]:hidden" => session('mary-sidebar-collapsed') == 'true',
"w-[270px] [&>*_summary::after]:block [&_.mary-hideable]:block [&_.hidden-when-collapsed]:block [&_.display-when-collapsed]:hidden" => session('mary-sidebar-collapsed') != 'true'
])
}}
>
{{ $sidebar }}
<!-- SIDEBAR COLLAPSE -->
@if($sidebar->attributes['collapsible'])
<x-menu class="fixed bottom-0 hidden bg-inherit lg:block">
<x-menu-item
@click="toggle"
icon="o-bars-3-bottom-right"
title="{{ $sidebar->attributes['collapse-text'] ?? $collapseText }}" />
</x-menu>
@endif
</div>
<!-- SIDEBAR COLLAPSE -->
@if($sidebar->attributes['collapsible'])
<x-menu class="fixed bottom-0 hidden bg-inherit lg:block">
<x-menu-item
@click="toggle"
icon="o-bars-3-bottom-right"
title="{{ $sidebar->attributes['collapse-text'] ?? $collapseText }}" />
</x-menu>
@endif
</div>
</div>
</div>
@endif
@endif
<!-- END SIDEBAR-->
<!-- MAIN CONTENT -->
<div {{ $content->attributes->class(["min-h-screen mx-auto w-full p-5 lg:p-10"]) }}>
{{ $content }}
</div>
<!-- DRAWER FOR SIDEBAR -->
@if($sidebar?->attributes['drawer'])
<x-drawer id="{{ $sidebar->attributes['drawer'] }}">
{{ $sidebar }}
</x-drawer>
@endif
</main>
<!-- FOOTER -->
@if($footer)
<div
{{
$footer->attributes->class([
"mx-auto w-full",
"max-w-screen-2xl" => !$fullWidth
])
}}
>
<footer {{ $footer?->attributes->class(["mx-auto w-full", "max-w-screen-2xl" => !$fullWidth ]) }}>
{{ $footer }}
</div>
</footer>
@endif
HTML;
}
Expand Down
17 changes: 5 additions & 12 deletions src/View/Components/Nav.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,24 +22,17 @@ public function __construct(
public function render(): View|Closure|string
{
return <<<'HTML'
@if($sticky)
<div class="sticky top-0 z-10">
@endif
<header {{ $attributes->class(["bg-base-100 border-gray-100 border-b"]) }}>
<div class="mx-auto px-6 py-5 flex items-center @if(!$fullWidth) max-w-screen-2xl @endif">
<div {{ $attributes->class(["flex-1 flex items-center"]) }}>
<div {{ $attributes->class(["bg-base-100 border-gray-100 border-b", "sticky top-0 z-10" => $sticky]) }}>
<div @class(["flex items-center px-6 py-5", "max-w-screen-2xl mx-auto" => !$fullWidth])>
<div {{ $brand?->attributes->class(["flex-1 flex items-center"]) }}>
{{ $brand }}
</div>
<div {{ $attributes->class(["flex items-center gap-4"]) }}>
<div {{ $actions?->attributes->class(["flex items-center gap-4"]) }}>
{{ $actions }}
</div>
</div>
</header>
@if($sticky)
</div>
@endif
HTML;
}
}

0 comments on commit bac0f2d

Please sign in to comment.