Skip to content

Commit

Permalink
update menu style
Browse files Browse the repository at this point in the history
  • Loading branch information
@3x1io
3x1io committed Dec 21, 2023
1 parent 4753422 commit 40bd197
Show file tree
Hide file tree
Showing 5 changed files with 60 additions and 36 deletions.
7 changes: 6 additions & 1 deletion resources/views/components/profile-dropdown.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
<div class="filament-dropdown">
<x-splade-toggle>
<div class="filament-dropdown-trigger cursor-pointer ml-4" @click.prevent="toggle">
@php
$email = auth('web')->user()->email;
$size = 120;
$grav_url = "https://www.gravatar.com/avatar/" . md5( strtolower( trim( $email ) ) ) . "?d=identicon&s=" . $size;
@endphp
<!-- Profile -->
<div class="w-10 h-10 rounded-full bg-gray-200 bg-cover bg-center dark:bg-gray-900" style="background-image: url('https://avatars.dicebear.com/api/initials/{{auth()->user()->name}}.svg')">
<div class="w-10 h-10 rounded-full bg-gray-200 bg-cover bg-center dark:bg-gray-900" style="background-image: url('{{$grav_url}}')">
</div>
</div>

Expand Down
4 changes: 2 additions & 2 deletions resources/views/layouts/app.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,13 @@
local-storage
>

<div class="filament-body bg-gray-100 text-gray-900 dark:text-gray-100 dark:bg-gray-900 font-main" @load="data.dark">
<div class="filament-body bg-gray-50 text-gray-950 dark:text-white dark:bg-gray-950 font-main" @load="data.dark">
<div class="filament-app-layout flex w-full min-h-screen overflow-v-clip">
<x-tomato-admin-aside />
<div
:class="{
'lg:pl-24 lg:pl-24 rtl:lg:pr-24 rtl:lg:pl-0': data.makeMenuMin,
'lg:pl-80 lg:pl-80 rtl:lg:pr-80 rtl:lg:pl-0': !data.makeMenuMin
'lg:pl-72 lg:pl-72 rtl:lg:pr-72 rtl:lg:pl-0': !data.makeMenuMin
}"
class="
flex
Expand Down
16 changes: 6 additions & 10 deletions resources/views/layouts/includes/aside.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@
v-cloak
v-show="data.makeMenuHide"
@click.prevent="data.makeMenuHide = !data.makeMenuHide"
class="fixed inset-0 z-20 w-full h-full filament-sidebar-close-overlay bg-gray-900/50 lg:hidden"
class="fixed inset-0 z-20 w-full h-full filament-sidebar-close-overlay lg:hidden"
>

</div>
<aside
:class="{
'hidden': !data.makeMenuHide,
'w-24': data.makeMenuMin,
'w-80': !data.makeMenuMin
'w-72': !data.makeMenuMin
}"
class="
lg:flex
Expand All @@ -31,13 +31,9 @@ class="
overflow-hidden
shadow-2xl
transition-all
bg-white
lg:border-r
rtl:lg:border-r-0
rtl:lg:border-l
bg-gray-800
lg:z-0
dark:bg-gray-800
dark:border-gray-700
filament-sidebar-open
translate-x-0
max-w-[20em]
Expand All @@ -46,8 +42,8 @@ class="

<header
class="
bg-gray-900
filament-sidebar-header
border-b
h-[4rem]
shrink-0
px-6 flex items-center dark:border-gray-700"
Expand All @@ -64,8 +60,8 @@ class="block w-full font-bold"
</Link>
</header>

<nav class="flex-1 py-6 overflow-y-auto filament-sidebar-nav" @preserveScroll('sidebar')>
<div >
<nav class="pb-6 overflow-y-auto filament-sidebar-nav" @preserveScroll('sidebar')>
<div>
@include('tomato-admin::layouts.includes.menu')
</div>
</nav>
Expand Down
68 changes: 45 additions & 23 deletions resources/views/layouts/includes/menu.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,49 @@
@foreach(\TomatoPHP\TomatoAdmin\Facade\TomatoSlot::getSidebarTop() as $item)
@include($item)
@endforeach
<div class="px-4 py-3 flex justify-start gap-4" v-show="!data.makeMenuMin">
@php
$email = auth('web')->user()->email;
$size = 220;
$grav_url = "https://www.gravatar.com/avatar/" . md5( strtolower( trim( $email ) ) ) . "?d=identicon&s=" . $size;
@endphp
<div>
<div class="w-14 h-14 rounded-full bg-gray-200 bg-cover bg-center dark:bg-gray-900" style="background-image: url('{{$grav_url}}')">
</div>
</div>
<div class="flex flex-col items-center justify-center">
<div>
<h6 class="text-lg text-white font-bold">{{auth('web')->user()->name}}</h6>
<p class="text-sm text-gray-300">{{auth('web')->user()->email}}</p>
</div>
</div>
</div>
<div v-show="!data.makeMenuMin" class="my-2 border-t border-gray-700"></div>
<div>
<ul class="mx-3 mt-2 space-y-1 text-sm">
<li class="filament-sidebar-item ">
<div class="text-sm">
<div>
<Link
href="{{ route('admin') }}"
class="
@if(request()->routeIs('admin'))
bg-primary-500 text-white
@else
hover:bg-gray-500/5 focus:bg-gray-500/5 dark:text-gray-300 dark:hover:bg-gray-700
text-gray-300 hover:bg-gray-500/5 focus:bg-gray-500/5 dark:text-gray-300 dark:hover:bg-gray-700
@endif
flex items-center justify-center gap-3 px-3 py-2 font-medium transition rounded-lg">
flex items-center justify-center w-full py-3 font-medium transition" :class="{'gap-3 px-4': !data.makeMenuMin}">

<i class="w-5 h-5 shrink-0 bx bxs-home" style="font-size: 20px"></i>
<i class="w-5 h-5 shrink-0 bx bxs-home" style="font-size: 20px"></i>

<div class="flex flex-1" v-show="!data.makeMenuMin">
<div class="flex flex-1" v-show="!data.makeMenuMin">
<span>
{{ trans("tomato-admin::global.dashboard") }}
</span>
</div>
</div>
</Link>
</li>
</ul>
</div>
</div>
<div v-show="data.makeMenuMin" class="my-2 border-t border-gray-700"></div>
</div>
<div class="my-6 ml-6 border-t rtl:ml-auto rtl:mr-6 dark:border-gray-700"></div>

@if(config('tomato-admin.menu_provider'))
{!! config('tomato-admin.menu_provider')::render() !!}
Expand All @@ -38,8 +56,12 @@ class="
data.asideMenuGroup['{{str_replace(" ", "_", $key)}}'] =
!data.asideMenuGroup['{{str_replace(" ", "_", $key)}}']"
v-show="!data.makeMenuMin"
class="flex items-center justify-between w-full px-6">
<div class="flex items-center gap-4 text-gray-600 dark:text-gray-300">
class="w-full dark:text-gray-300 flex items-center justify-between gap-3 px-4 py-3 font-medium transition"
:class="{
'bg-gray-900 hover:bg-gray-800 text-white': data.asideMenuGroup['{{str_replace(" ", "_", $key)}}'],
'text-gray-300 hover:bg-gray-500/5 dark:hover:bg-gray-700 focus:bg-gray-500/5': !data.asideMenuGroup['{{str_replace(" ", "_", $key)}}'],
}">
<div class="flex items-center gap-4">
<p class="flex-1 text-xs font-bold tracking-wider uppercase">
{{ $key }}
</p>
Expand All @@ -59,11 +81,9 @@ class="w-3 h-3 text-gray-600 transition-all rotate-180 dark:text-gray-300"
</button>

<div>
<ul class="mx-3 mt-2 space-y-1 text-sm"
v-if="data.asideMenuGroup"
v-show="data.asideMenuGroup['{{str_replace(" ", "_", $key)}}'] || data.makeMenuMin ">
<div v-show="data.asideMenuGroup && data.asideMenuGroup['{{str_replace(' ', '_', $key)}}'] || data.makeMenuMin" class="text-sm" :class="{'bg-gray-950':!data.makeMenuMin}">
@foreach($menu as $item)
<li class="filament-sidebar-item " title="{{$item->label}}" style="color: {{$item->color}} !important;">
<div class="filament-sidebar-item" title="{{$item->label}}" style="color: {{$item->color}} !important;">
@if($item->target === '_blank')
<a
target="_blank"
Expand All @@ -74,7 +94,7 @@ class="
@else
hover:bg-gray-500/5 focus:bg-gray-500/5 dark:text-gray-300 dark:hover:bg-gray-700
@endif
flex items-center justify-center w-full gap-3 px-3 py-2 font-medium transition rounded-lg">
flex items-center justify-center w-full gap-3 px-4 py-2 font-medium transition rounded-lg">

<i class="w-5 h-5 shrink-0 {{ $item->icon }}" style="font-size: 20px"></i>

Expand All @@ -93,13 +113,16 @@ class="inline-flex items-center justify-center ml-auto rtl:ml-0 rtl:mr-auto min-
@else
<Link
href="{{$item->route ? route($item->route) : $item->url}}"
:class="{
'ltr:pl-8 rtl:pr-8': !data.makeMenuMin
}"
class="
@if($item->route && request()->routeIs($item->route))
bg-primary-500 text-white
@else
hover:bg-gray-500/5 focus:bg-gray-500/5 dark:text-gray-300 dark:hover:bg-gray-700
text-gray-300 hover:bg-gray-500/5 focus:bg-gray-500/5 dark:text-gray-300 dark:hover:bg-gray-700
@endif
flex items-center justify-center w-full gap-3 px-3 py-2 font-medium transition rounded-lg">
flex items-center justify-center w-full gap-3 py-3 pr-3 font-medium transition">

<i class="w-5 h-5 shrink-0 {{ $item->icon }}" style="font-size: 20px"></i>

Expand All @@ -116,13 +139,12 @@ class="inline-flex items-center justify-center ml-auto rtl:ml-0 rtl:mr-auto min-
</div>
</Link>
@endif
</li>
</div>
@endforeach

</ul>
</div>
</div>
@if($counter !== count($menus)-1)
<div class="my-6 ml-6 border-t rtl:ml-auto rtl:mr-6 dark:border-gray-700"></div>
<div v-show="data.makeMenuMin" class="my-2 border-t border-gray-700"></div>
@endif
@php $counter++; @endphp
@endforeach
Expand Down
1 change: 1 addition & 0 deletions resources/views/layouts/includes/nav.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
shrink-0
items-center
border-b
border-gray-100
bg-white
dark:bg-gray-800
dark:border-gray-700
Expand Down

0 comments on commit 40bd197

Please sign in to comment.