From 1666a9c638e0d571112f49e07ee3b5742f29d9bd Mon Sep 17 00:00:00 2001
From: Amir <amirhussain@outlook.com>
Date: Tue, 8 Nov 2022 16:51:38 +0400
Subject: [PATCH 1/3] Implementation of Preline framework

---
 app/Http/Controllers/Admin/Temp.php           |  85 +++++
 app/Http/Livewire/Admin/Dashboard.php         |  14 +
 app/Http/Livewire/Layout/Header.php           |  14 +
 app/Http/Livewire/Layout/Navigation.php       |  13 +
 app/Http/Livewire/Layout/Sidebar.php          |  13 +
 app/Http/Livewire/Layout/Toggle.php           |  13 +
 app/View/Components/Layout/Content.php        |  28 ++
 app/View/Components/Layout/DarkmodeToggle.php |  28 ++
 .../Components/Layout/DropdownIconLink.php    |  28 ++
 app/View/Components/Layout/LogoOnSidebar.php  |  28 ++
 .../Layout/NavigationDropdownRight.php        |  28 ++
 app/View/Components/Svg/Gear.php              |  28 ++
 app/View/Components/Svg/Profile.php           |  28 ++
 config/livewire.php                           | 158 +++++++++
 .../views/components/layout/content.blade.php |   3 +
 .../layout/dropdown-icon-link.blade.php       |   3 +
 .../navigation-darkmode-toggle.blade.php      |  26 ++
 .../navigation-dropdown-right.blade.php       |  62 ++++
 .../navigation-logo-on-sidebar.blade.php      |   8 +
 resources/views/components/svg/gear.blade.php |   4 +
 .../views/components/svg/profile.blade.php    |   3 +
 .../views/livewire/admin/dashboard.blade.php  |  14 +
 .../views/livewire/layout/header.blade.php    |   6 +
 .../layout/navigation-toggle.blade.php        |  65 ++++
 .../views/livewire/layout/sidebar.blade.php   | 299 ++++++++++++++++++
 25 files changed, 999 insertions(+)
 create mode 100644 app/Http/Controllers/Admin/Temp.php
 create mode 100644 app/Http/Livewire/Admin/Dashboard.php
 create mode 100644 app/Http/Livewire/Layout/Header.php
 create mode 100644 app/Http/Livewire/Layout/Navigation.php
 create mode 100644 app/Http/Livewire/Layout/Sidebar.php
 create mode 100644 app/Http/Livewire/Layout/Toggle.php
 create mode 100644 app/View/Components/Layout/Content.php
 create mode 100644 app/View/Components/Layout/DarkmodeToggle.php
 create mode 100644 app/View/Components/Layout/DropdownIconLink.php
 create mode 100644 app/View/Components/Layout/LogoOnSidebar.php
 create mode 100644 app/View/Components/Layout/NavigationDropdownRight.php
 create mode 100644 app/View/Components/Svg/Gear.php
 create mode 100644 app/View/Components/Svg/Profile.php
 create mode 100644 config/livewire.php
 create mode 100644 resources/views/components/layout/content.blade.php
 create mode 100644 resources/views/components/layout/dropdown-icon-link.blade.php
 create mode 100644 resources/views/components/layout/navigation-darkmode-toggle.blade.php
 create mode 100644 resources/views/components/layout/navigation-dropdown-right.blade.php
 create mode 100644 resources/views/components/layout/navigation-logo-on-sidebar.blade.php
 create mode 100644 resources/views/components/svg/gear.blade.php
 create mode 100644 resources/views/components/svg/profile.blade.php
 create mode 100644 resources/views/livewire/admin/dashboard.blade.php
 create mode 100644 resources/views/livewire/layout/header.blade.php
 create mode 100644 resources/views/livewire/layout/navigation-toggle.blade.php
 create mode 100644 resources/views/livewire/layout/sidebar.blade.php

diff --git a/app/Http/Controllers/Admin/Temp.php b/app/Http/Controllers/Admin/Temp.php
new file mode 100644
index 0000000..793aae8
--- /dev/null
+++ b/app/Http/Controllers/Admin/Temp.php
@@ -0,0 +1,85 @@
+<?php
+
+namespace App\Http\Controllers\Admin;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+
+class Temp extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     *
+     * @return \Illuminate\Contracts\Foundation\Application|\Illuminate\Contracts\View\Factory|\Illuminate\Contracts\View\View
+     */
+    public function index()
+    {
+        return view('admin.temp');
+    }
+
+    /**
+     * Show the form for creating a new resource.
+     *
+     * @return \Illuminate\Http\Response
+     */
+    public function create()
+    {
+        //
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @return \Illuminate\Http\Response
+     */
+    public function store(Request $request)
+    {
+        //
+    }
+
+    /**
+     * Display the specified resource.
+     *
+     * @param  int  $id
+     * @return \Illuminate\Http\Response
+     */
+    public function show($id)
+    {
+        //
+    }
+
+    /**
+     * Show the form for editing the specified resource.
+     *
+     * @param  int  $id
+     * @return \Illuminate\Http\Response
+     */
+    public function edit($id)
+    {
+        //
+    }
+
+    /**
+     * Update the specified resource in storage.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  int  $id
+     * @return \Illuminate\Http\Response
+     */
+    public function update(Request $request, $id)
+    {
+        //
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     *
+     * @param  int  $id
+     * @return \Illuminate\Http\Response
+     */
+    public function destroy($id)
+    {
+        //
+    }
+}
diff --git a/app/Http/Livewire/Admin/Dashboard.php b/app/Http/Livewire/Admin/Dashboard.php
new file mode 100644
index 0000000..d88fa79
--- /dev/null
+++ b/app/Http/Livewire/Admin/Dashboard.php
@@ -0,0 +1,14 @@
+<?php
+
+namespace App\Http\Livewire\Admin;
+
+use Livewire\Component;
+
+class Dashboard extends Component
+{
+    public $pageHeader='Dashboard';
+    public function render()
+    {
+        return view('livewire.admin.dashboard',['pageHeader'=>$this->pageHeader]);
+    }
+}
diff --git a/app/Http/Livewire/Layout/Header.php b/app/Http/Livewire/Layout/Header.php
new file mode 100644
index 0000000..afeae94
--- /dev/null
+++ b/app/Http/Livewire/Layout/Header.php
@@ -0,0 +1,14 @@
+<?php
+
+namespace App\Http\Livewire\Layout;
+
+use Livewire\Component;
+
+class Header extends Component
+{
+    public $header;
+    public function render()
+    {
+        return view('livewire.layout.header');
+    }
+}
diff --git a/app/Http/Livewire/Layout/Navigation.php b/app/Http/Livewire/Layout/Navigation.php
new file mode 100644
index 0000000..e2b1513
--- /dev/null
+++ b/app/Http/Livewire/Layout/Navigation.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Http\Livewire\Layout;
+
+use Livewire\Component;
+
+class Navigation extends Component
+{
+    public function render()
+    {
+        return view('livewire.layout.navigation');
+    }
+}
diff --git a/app/Http/Livewire/Layout/Sidebar.php b/app/Http/Livewire/Layout/Sidebar.php
new file mode 100644
index 0000000..6deb20a
--- /dev/null
+++ b/app/Http/Livewire/Layout/Sidebar.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Http\Livewire\Layout;
+
+use Livewire\Component;
+
+class Sidebar extends Component
+{
+    public function render()
+    {
+        return view('livewire.layout.sidebar');
+    }
+}
diff --git a/app/Http/Livewire/Layout/Toggle.php b/app/Http/Livewire/Layout/Toggle.php
new file mode 100644
index 0000000..59b6f29
--- /dev/null
+++ b/app/Http/Livewire/Layout/Toggle.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Http\Livewire\Layout;
+
+use Livewire\Component;
+
+class Toggle extends Component
+{
+    public function render()
+    {
+        return view('livewire.layout.navigation-toggle');
+    }
+}
diff --git a/app/View/Components/Layout/Content.php b/app/View/Components/Layout/Content.php
new file mode 100644
index 0000000..f0ff8b7
--- /dev/null
+++ b/app/View/Components/Layout/Content.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\View\Components\Layout;
+
+use Illuminate\View\Component;
+
+class Content extends Component
+{
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('components.layout.content');
+    }
+}
diff --git a/app/View/Components/Layout/DarkmodeToggle.php b/app/View/Components/Layout/DarkmodeToggle.php
new file mode 100644
index 0000000..ebc41e9
--- /dev/null
+++ b/app/View/Components/Layout/DarkmodeToggle.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\View\Components\Layout;
+
+use Illuminate\View\Component;
+
+class DarkmodeToggle extends Component
+{
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('components.layout.darkmode-toggle');
+    }
+}
diff --git a/app/View/Components/Layout/DropdownIconLink.php b/app/View/Components/Layout/DropdownIconLink.php
new file mode 100644
index 0000000..64b496c
--- /dev/null
+++ b/app/View/Components/Layout/DropdownIconLink.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\View\Components\Layout;
+
+use Illuminate\View\Component;
+
+class DropdownIconLink extends Component
+{
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('components.layout.dropdown-icon-link');
+    }
+}
diff --git a/app/View/Components/Layout/LogoOnSidebar.php b/app/View/Components/Layout/LogoOnSidebar.php
new file mode 100644
index 0000000..d8c47d4
--- /dev/null
+++ b/app/View/Components/Layout/LogoOnSidebar.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\View\Components\Layout;
+
+use Illuminate\View\Component;
+
+class LogoOnSidebar extends Component
+{
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('components.layout.logo-on-sidebar');
+    }
+}
diff --git a/app/View/Components/Layout/NavigationDropdownRight.php b/app/View/Components/Layout/NavigationDropdownRight.php
new file mode 100644
index 0000000..5d7baf9
--- /dev/null
+++ b/app/View/Components/Layout/NavigationDropdownRight.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\View\Components\Layout;
+
+use Illuminate\View\Component;
+
+class NavigationDropdownRight extends Component
+{
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('components.layout.navigation-dropdown-right');
+    }
+}
diff --git a/app/View/Components/Svg/Gear.php b/app/View/Components/Svg/Gear.php
new file mode 100644
index 0000000..2fd8bf7
--- /dev/null
+++ b/app/View/Components/Svg/Gear.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\View\Components\Svg;
+
+use Illuminate\View\Component;
+
+class Gear extends Component
+{
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('components.svg.gear');
+    }
+}
diff --git a/app/View/Components/Svg/Profile.php b/app/View/Components/Svg/Profile.php
new file mode 100644
index 0000000..2513510
--- /dev/null
+++ b/app/View/Components/Svg/Profile.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\View\Components\Svg;
+
+use Illuminate\View\Component;
+
+class Profile extends Component
+{
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('components.svg.profile');
+    }
+}
diff --git a/config/livewire.php b/config/livewire.php
new file mode 100644
index 0000000..59f8d5c
--- /dev/null
+++ b/config/livewire.php
@@ -0,0 +1,158 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Class Namespace
+    |--------------------------------------------------------------------------
+    |
+    | This value sets the root namespace for Livewire component classes in
+    | your application. This value affects component auto-discovery and
+    | any Livewire file helper commands, like `artisan make:livewire`.
+    |
+    | After changing this item, run: `php artisan livewire:discover`.
+    |
+    */
+
+    'class_namespace' => 'App\\Http\\Livewire',
+
+    /*
+    |--------------------------------------------------------------------------
+    | View Path
+    |--------------------------------------------------------------------------
+    |
+    | This value sets the path for Livewire component views. This affects
+    | file manipulation helper commands like `artisan make:livewire`.
+    |
+    */
+
+    'view_path' => resource_path('views/livewire'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Layout
+    |--------------------------------------------------------------------------
+    | The default layout view that will be used when rendering a component via
+    | Route::get('/some-endpoint', SomeComponent::class);. In this case the
+    | the view returned by SomeComponent will be wrapped in "layouts.app"
+    |
+    */
+
+    'layout' => 'layouts.app',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Livewire Assets URL
+    |--------------------------------------------------------------------------
+    |
+    | This value sets the path to Livewire JavaScript assets, for cases where
+    | your app's domain root is not the correct path. By default, Livewire
+    | will load its JavaScript assets from the app's "relative root".
+    |
+    | Examples: "/assets", "myurl.com/app".
+    |
+    */
+
+    'asset_url' => null,
+
+    /*
+    |--------------------------------------------------------------------------
+    | Livewire App URL
+    |--------------------------------------------------------------------------
+    |
+    | This value should be used if livewire assets are served from CDN.
+    | Livewire will communicate with an app through this url.
+    |
+    | Examples: "https://my-app.com", "myurl.com/app".
+    |
+    */
+
+    'app_url' => null,
+
+    /*
+    |--------------------------------------------------------------------------
+    | Livewire Endpoint Middleware Group
+    |--------------------------------------------------------------------------
+    |
+    | This value sets the middleware group that will be applied to the main
+    | Livewire "message" endpoint (the endpoint that gets hit everytime
+    | a Livewire component updates). It is set to "web" by default.
+    |
+    */
+
+    'middleware_group' => 'web',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Livewire Temporary File Uploads Endpoint Configuration
+    |--------------------------------------------------------------------------
+    |
+    | Livewire handles file uploads by storing uploads in a temporary directory
+    | before the file is validated and stored permanently. All file uploads
+    | are directed to a global endpoint for temporary storage. The config
+    | items below are used for customizing the way the endpoint works.
+    |
+    */
+
+    'temporary_file_upload' => [
+        'disk' => null,        // Example: 'local', 's3'              Default: 'default'
+        'rules' => null,       // Example: ['file', 'mimes:png,jpg']  Default: ['required', 'file', 'max:12288'] (12MB)
+        'directory' => null,   // Example: 'tmp'                      Default  'livewire-tmp'
+        'middleware' => null,  // Example: 'throttle:5,1'             Default: 'throttle:60,1'
+        'preview_mimes' => [   // Supported file types for temporary pre-signed file URLs.
+            'png', 'gif', 'bmp', 'svg', 'wav', 'mp4',
+            'mov', 'avi', 'wmv', 'mp3', 'm4a',
+            'jpg', 'jpeg', 'mpga', 'webp', 'wma',
+        ],
+        'max_upload_time' => 5, // Max duration (in minutes) before an upload gets invalidated.
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Manifest File Path
+    |--------------------------------------------------------------------------
+    |
+    | This value sets the path to the Livewire manifest file.
+    | The default should work for most cases (which is
+    | "<app_root>/bootstrap/cache/livewire-components.php"), but for specific
+    | cases like when hosting on Laravel Vapor, it could be set to a different value.
+    |
+    | Example: for Laravel Vapor, it would be "/tmp/storage/bootstrap/cache/livewire-components.php".
+    |
+    */
+
+    'manifest_path' => null,
+
+    /*
+    |--------------------------------------------------------------------------
+    | Back Button Cache
+    |--------------------------------------------------------------------------
+    |
+    | This value determines whether the back button cache will be used on pages
+    | that contain Livewire. By disabling back button cache, it ensures that
+    | the back button shows the correct state of components, instead of
+    | potentially stale, cached data.
+    |
+    | Setting it to "false" (default) will disable back button cache.
+    |
+    */
+
+    'back_button_cache' => false,
+
+    /*
+    |--------------------------------------------------------------------------
+    | Render On Redirect
+    |--------------------------------------------------------------------------
+    |
+    | This value determines whether Livewire will render before it's redirected
+    | or not. Setting it to "false" (default) will mean the render method is
+    | skipped when redirecting. And "true" will mean the render method is
+    | run before redirecting. Browsers bfcache can store a potentially
+    | stale view if render is skipped on redirect.
+    |
+    */
+
+    'render_on_redirect' => false,
+
+];
diff --git a/resources/views/components/layout/content.blade.php b/resources/views/components/layout/content.blade.php
new file mode 100644
index 0000000..ad5eb57
--- /dev/null
+++ b/resources/views/components/layout/content.blade.php
@@ -0,0 +1,3 @@
+<main class="w-full pt-10 px-4 sm:px-6 md:px-8 lg:pl-72 h-full">
+    {{$slot}}
+</main>
diff --git a/resources/views/components/layout/dropdown-icon-link.blade.php b/resources/views/components/layout/dropdown-icon-link.blade.php
new file mode 100644
index 0000000..14b95d8
--- /dev/null
+++ b/resources/views/components/layout/dropdown-icon-link.blade.php
@@ -0,0 +1,3 @@
+<a {{ $attributes->merge(['class' => 'flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-slate-800 hover:bg-slate-100 focus:ring-2 focus:ring-blue-500 dark:text-slate-400 dark:hover:bg-oblue-100/[0.3] dark:hover:text-slate-300'])}} href="#">
+{{$slot}}
+</a>
diff --git a/resources/views/components/layout/navigation-darkmode-toggle.blade.php b/resources/views/components/layout/navigation-darkmode-toggle.blade.php
new file mode 100644
index 0000000..9c8fc5e
--- /dev/null
+++ b/resources/views/components/layout/navigation-darkmode-toggle.blade.php
@@ -0,0 +1,26 @@
+<div class="ml-3  h-[2rem] w-[2rem] relative">
+    <button
+        @click.prevent=" darkMode = !darkMode"
+        x-init="$watch('darkMode',function(val){
+                                                    })"
+        class="h-[2rem] w-[2rem]  bg-white rounded-full  dark:bg-oblue-600  dark:group-hover:text-gray-200 focus:outline-none "
+        :class="{'bg-white':darkMode===false }"
+    >
+        <svg wire:ignore x-cloak
+             class="hidden h-[2.2rem] w-[2.2rem] text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 p-2"
+             :class="{'!block' : darkMode===true }"
+             xmlns="http://www.w3.org/2000/svg" class="h-[2rem] w-[2rem] " viewBox="0 0 20 20"
+             fill="currentColor">
+            <path fill-rule="evenodd"
+                  d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
+                  clip-rule="evenodd"/>
+        </svg>
+        <svg wire:ignore x-cloak
+             class="hidden h-[2.2rem] w-[2.2rem] text-gray-500 hover:text-gray-800 dark:hover:text-gray-200  p-2"
+             :class="{'!block' : darkMode===false }"
+             xmlns="http://www.w3.org/2000/svg" class="h-[2rem] w-[2rem]" viewBox="0 0 20 20"
+             fill="currentColor">
+            <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/>
+        </svg>
+    </button>
+</div>
diff --git a/resources/views/components/layout/navigation-dropdown-right.blade.php b/resources/views/components/layout/navigation-dropdown-right.blade.php
new file mode 100644
index 0000000..3dbee1f
--- /dev/null
+++ b/resources/views/components/layout/navigation-dropdown-right.blade.php
@@ -0,0 +1,62 @@
+<div class="hs-dropdown relative inline-flex" data-hs-dropdown-placement="bottom-right">
+    @if (Laravel\Jetstream\Jetstream::managesProfilePhotos())
+        <button id="hs-dropdown-with-header" type="button"
+                class="hs-dropdown-toggle inline-flex flex-shrink-0 justify-center items-center gap-2 h-[2.375rem] w-[2.375rem] rounded-full font-medium bg-white text-slate-700 align-middle hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-white transition-all text-xs dark:bg-oblue-600 dark:hover:bg-slate-800 dark:text-slate-400 dark:hover:text-white dark:focus:ring-slate-700 dark:focus:ring-offset-slate-800">
+            <img
+                class="h-8 w-8 rounded-full object-cover h-[2.375rem] w-[2.375rem] rounded-full ring-2 ring-white dark:ring-slate-800"
+                src="{{ Auth::user()->profile_photo_url }}" alt="{{ Auth::user()->name }}"/>
+        </button>
+    @else
+        <span class="inline-flex rounded-md">
+                                                            <button type="button"
+                                                                    class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 dark:bg-gray-700 dark:hover:bg-gray-100/[0.2] focus:outline-none transition">
+                                                                {{ Auth::user()->name }}
+
+                                                                <svg class="ml-2 -mr-0.5 h-4 w-4"
+                                                                     xmlns="http://www.w3.org/2000/svg"
+                                                                     viewBox="0 0 20 20" fill="currentColor">
+                                                                    <path fill-rule="evenodd"
+                                                                          d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                                                                          clip-rule="evenodd"/>
+                                                                </svg>
+                                                            </button>
+                                                        </span>
+    @endif
+
+    <div
+        class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-[15rem] bg-white border-slate-200 shadow-md dark:shadow-oblue-900/[.5] rounded-lg p-2 dark:bg-oblue-600 border dark:border-oblue-100 divide-y divide-gray-200  dark:border dark:border-oblue-100 dark:divide-oblue-100"
+        aria-labelledby="hs-dropdown-with-header">
+        <div
+            class="py-3 px-5 -m-2 bg-white border-slate-200 rounded-t-lg dark:bg-oblue-600 border-b dark:border-oblue-100">
+            <p class="text-sm text-slate-500 dark:text-slate-400">Signed in as</p>
+            <p class="text-sm font-medium text-slate-800 dark:text-slate-300"> {{ Auth::user()->email }}</p>
+        </div>
+        <div class="mt-2 py-2 first:pt-0 last:pb-0 !border-[0px]">
+            <x-layout.dropdown-icon-link
+                href="{{ ((Auth::guard('admin')->check() && explode('.',Route::currentRouteName())[0] ==='admin')) ? route('admin.profile.show') : route('profile.show') }}">
+                <x-svg.profile width="16" height="16"></x-svg.profile>
+                {{ __('Profile') }}
+            </x-layout.dropdown-icon-link>
+        </div>
+        <div class="py-2 first:pt-0 last:pb-0">
+            <x-layout.dropdown-icon-link>
+                <x-svg.gear width="16" height="16"></x-svg.gear> {{ __('Account Settings') }}
+            </x-layout.dropdown-icon-link>
+
+            {{--     ------- Logout  --------        --}}
+            <form method="POST"
+                  action="{{ ((Auth::guard('admin')->check() && explode('.',Route::currentRouteName())[0] ==='admin')) ? route('admin.logout') : route('logout') }}"
+                  x-data>
+                @csrf
+
+                <x-layout.dropdown-icon-link
+                    href="{{ (auth()->guard('admin')->check()) ? route('admin.logout') : route('logout') }}"
+                    @click.prevent="$root.submit();"
+                >
+                    <x-svg.signout width="16" height="16"></x-svg.signout> {{ __('Sign out') }}
+                </x-layout.dropdown-icon-link>
+
+            </form>
+        </div>
+    </div>
+</div>
diff --git a/resources/views/components/layout/navigation-logo-on-sidebar.blade.php b/resources/views/components/layout/navigation-logo-on-sidebar.blade.php
new file mode 100644
index 0000000..ad69b5f
--- /dev/null
+++ b/resources/views/components/layout/navigation-logo-on-sidebar.blade.php
@@ -0,0 +1,8 @@
+<div class="whitespace-nowrap mr-5 lg:mr-0 lg:hidden">
+    <div class="hidden space-x-8 sm:-my-px sm:ml-0 xs:flex justify-start items-center">
+        <x-jet-application-mark class="flex h-9 w-auto"/>
+        <x-jet-nav-link class="flex sm:!ml-3" href="{{ (Auth::guard('admin')->check() && explode('.',Route::currentRouteName())[0] ==='admin') ? route('admin.dashboard') : route('dashboard') }}" :active="request()->routeIs('dashboard')">
+            {{ __('Task Manager') }}
+        </x-jet-nav-link>
+    </div>
+</div>
diff --git a/resources/views/components/svg/gear.blade.php b/resources/views/components/svg/gear.blade.php
new file mode 100644
index 0000000..fe8278e
--- /dev/null
+++ b/resources/views/components/svg/gear.blade.php
@@ -0,0 +1,4 @@
+<svg {{ $attributes->merge(['class' => 'flex-none']) }} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" >
+    <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" />
+    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+</svg>
diff --git a/resources/views/components/svg/profile.blade.php b/resources/views/components/svg/profile.blade.php
new file mode 100644
index 0000000..a178155
--- /dev/null
+++ b/resources/views/components/svg/profile.blade.php
@@ -0,0 +1,3 @@
+<svg  {{ $attributes->merge(['class' => 'flex-none']) }} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" >
+    <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
+</svg>
diff --git a/resources/views/livewire/admin/dashboard.blade.php b/resources/views/livewire/admin/dashboard.blade.php
new file mode 100644
index 0000000..382abdc
--- /dev/null
+++ b/resources/views/livewire/admin/dashboard.blade.php
@@ -0,0 +1,14 @@
+<div>
+    @livewire('layout.navigation')
+    @livewire('layout.toggle')
+    @livewire('layout.sidebar')
+    @livewire('layout.header',['header'=>$pageHeader])
+
+    <!-- Page Content -->
+    <x-layout.content>
+        <div class="flex flex-col bg-white border shadow-sm rounded-xl p-4 md:p-5 dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-900/[.9] dark:text-gray-400">
+            Some quick example text to build on the card title and make up the bulk of the card's content.
+        </div>
+    </x-layout.content>
+
+</div>
diff --git a/resources/views/livewire/layout/header.blade.php b/resources/views/livewire/layout/header.blade.php
new file mode 100644
index 0000000..afd997e
--- /dev/null
+++ b/resources/views/livewire/layout/header.blade.php
@@ -0,0 +1,6 @@
+<!-- Page Heading -->
+    <header class="xs:hidden lg:block  !h-[76px] text-oblue-100 dark:text-yellow-500 text-lg font-semibold shadow  sm:px-6 md:px-8 lg:pl-64 border-b border-t dark:border-oblue-100 shadow-none">
+        <div class="max-w-7xl mx-0 py-6 px-4 sm:px-6 lg:px-8">
+            {{ $header }}
+        </div>
+    </header>
diff --git a/resources/views/livewire/layout/navigation-toggle.blade.php b/resources/views/livewire/layout/navigation-toggle.blade.php
new file mode 100644
index 0000000..4d20ea5
--- /dev/null
+++ b/resources/views/livewire/layout/navigation-toggle.blade.php
@@ -0,0 +1,65 @@
+{{--<div>--}}
+{{--    <!-- Sidebar Toggle -->--}}
+{{--    <div class="sticky top-[59px] !h-[58px] inset-x-0 z-20 bg-white border-y px-4 sm:px-6 sm:top-[71px] md:px-8 lg:hidden dark:bg-oblue-600 dark:border-oblue-100">--}}
+{{--        <div class="flex items-center py-4">--}}
+{{--            <!-- Navigation Toggle -->--}}
+{{--            <button type="button" class="text-slate-500 hover:text-slate-600" data-hs-overlay="#docs-sidebar" aria-controls="docs-sidebar" aria-label="Toggle navigation">--}}
+{{--                <span class="sr-only">Toggle Navigation</span>--}}
+{{--                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-black dark:text-gray-400">--}}
+{{--                    <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />--}}
+{{--                </svg>--}}
+
+{{--            </button>--}}
+{{--            <!-- End Navigation Toggle -->--}}
+
+{{--            <!-- Breadcrumb -->--}}
+{{--            <ol class="ml-3  flex items-center whitespace-nowrap min-w-0" aria-label="Breadcrumb">--}}
+{{--                <li class="flex items-center text-sm text-slate-800 dark:text-slate-400">--}}
+{{--                    OMJ--}}
+{{--                    <svg class="flex-shrink-0 mx-3 overflow-visible h-2.5 w-2.5 text-slate-400 dark:text-slate-600" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">--}}
+{{--                        <path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" />--}}
+{{--                    </svg>--}}
+{{--                </li>--}}
+{{--                <li class="text-sm font-semibold text-slate-800 truncate dark:text-slate-400" aria-current="page">--}}
+{{--                    Dashboard--}}
+{{--                </li>--}}
+{{--            </ol>--}}
+{{--            <!-- End Breadcrumb -->--}}
+{{--        </div>--}}
+{{--    </div>--}}
+{{--    <!-- End Sidebar Toggle -->--}}
+{{--</div>--}}
+
+
+
+
+<div>
+    <div  class="sticky top-[59px] !h-[58px] inset-x-0 z-20  border-y px-4 sm:px-6 sm:top-[71px] md:px-8 lg:hidden dark:border-oblue-100">
+        <div class="flex items-center py-4">
+            <!-- Navigation Toggle -->
+            <button type="button" class="text-gray-500 hover:text-gray-600" data-hs-overlay="#docs-sidebar" aria-controls="docs-sidebar" aria-label="Toggle navigation">
+                <span class="sr-only">Toggle Navigation</span>
+                <svg class="w-6 h-6" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                    <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" />
+                </svg>
+            </button>
+            <!-- End Navigation Toggle -->
+
+            <!-- Breadcrumb -->
+            <ol class="ml-3 flex items-center whitespace-nowrap min-w-0" aria-label="Breadcrumb">
+                <li class="flex items-center text-sm text-gray-800 dark:text-gray-400">
+                    Application Layout
+                    <svg class="flex-shrink-0 mx-3 overflow-visible h-2.5 w-2.5 text-gray-400 dark:text-gray-600" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+                    </svg>
+                </li>
+                <li class="text-sm font-semibold text-gray-800 truncate dark:text-gray-400" aria-current="page">
+                    Dashboard
+                </li>
+            </ol>
+            <!-- End Breadcrumb -->
+        </div>
+    </div>
+    <!-- End Sidebar Toggle -->
+
+</div>
diff --git a/resources/views/livewire/layout/sidebar.blade.php b/resources/views/livewire/layout/sidebar.blade.php
new file mode 100644
index 0000000..ba41319
--- /dev/null
+++ b/resources/views/livewire/layout/sidebar.blade.php
@@ -0,0 +1,299 @@
+<div>
+    <!-- Sidebar -->
+    <div id="docs-sidebar"
+         class=
+    "hs-overlay hs-overlay-open:translate-x-0 -translate-x-full transition-all duration-300 transform hidden fixed top-0 left-0 bottom-0 z-[60] w-64 bg-white border-r border-slate-200 pb-10 overflow-y-auto scrollbar-y lg:block lg:translate-x-0 lg:right-auto lg:bottom-0 dark:scrollbar-y dark:bg-oblue-600 dark:border-oblue-100 "
+    >
+
+{{--        <button type="button" class="w-8 h-8 inline-flex justify-center items-center gap-2 rounded-md border border-gray-200 text-gray-600 hover:text-gray-400 transition dark:border-gray-700" data-hs-overlay="#docs-sidebar" aria-controls="docs-sidebar" aria-label="Toggle navigation">--}}
+{{--            <span class="sr-only">Close Sidebar</span>--}}
+{{--            <svg class="w-3 h-3" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">--}}
+{{--                <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>--}}
+{{--            </svg>--}}
+{{--        </button>--}}
+        <div
+            class="flex flex-col justify-center items-center px-6 xs:!h-[128px] lg:!h-[146px] border-b dark:border-oblue-100">
+            <x-jet-application-mark class="flex h-9 w-auto"/>
+            <x-jet-nav-link class="flex"
+                            href="{{ (Auth::guard('admin')->check() && explode('.',Route::currentRouteName())[0] ==='admin') ? route('admin.dashboard') : route('dashboard') }}"
+                            :active="request()->routeIs('dashboard')">
+                {{ __('Task Manager') }}
+            </x-jet-nav-link>
+        </div>
+
+        <nav class="hs-accordion-group p-6 w-full flex flex-col flex-wrap" data-hs-accordion-always-open>
+            <ul class="space-y-1.5">
+                <li>
+                    <a class="flex items-center gap-x-3.5 py-2 px-2.5 bg-slate-100 text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:bg-oblue-600 dark:text-white"
+                       href="javascript:;">
+                        <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+                             fill="currentColor" viewBox="0 0 16 16">
+                            <path fill-rule="evenodd"
+                                  d="M2 13.5V7h1v6.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5V7h1v6.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5zm11-11V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
+                            <path fill-rule="evenodd"
+                                  d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z"/>
+                        </svg>
+                        Dashboard
+                    </a>
+                </li>
+
+                <li class="hs-accordion" id="users-accordion">
+                    <a class="hs-accordion-toggle flex items-center gap-x-3.5 py-2 px-2.5 hs-accordion-active:text-blue-600 hs-accordion-active:hover:bg-transparent text-sm text-slate-700 rounded-md hover:bg-slate-100  dark:hover:bg-oblue-500 dark:text-slate-400 dark:hover:bg-oblue-500 dark:hs-accordion-active:text-white"
+                       href="javascript:;">
+                        <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+                             fill="currentColor" viewBox="0 0 16 16">
+                            <path
+                                d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816zM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275zM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"></path>
+                        </svg>
+                        Users
+
+                        <svg
+                            class="hs-accordion-active:block ml-auto hidden w-3 h-3 text-slate-600 group-hover:text-slate-500 dark:text-slate-400"
+                            width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11"
+                                  stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
+                        </svg>
+
+                        <svg
+                            class="hs-accordion-active:hidden ml-auto block w-3 h-3 text-slate-600 group-hover:text-slate-500 dark:text-slate-400"
+                            width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5"
+                                  stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
+                        </svg>
+                    </a>
+
+                    <div id="users-accordion"
+                         class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300 hidden">
+                        <ul class="hs-accordion-group pl-3 pt-2" data-hs-accordion-always-open>
+                            <li class="hs-accordion" id="users-accordion-sub-1">
+                                <a class="hs-accordion-toggle flex items-center gap-x-3.5 py-2 px-2.5 hs-accordion-active:text-blue-600 hs-accordion-active:hover:bg-transparent text-sm text-slate-700 rounded-md hover:bg-slate-100  dark:hover:bg-oblue-500 dark:text-slate-400 dark:hover:bg-oblue-500 dark:hs-accordion-active:text-white"
+                                   href="javascript:;">
+                                    Sub Menu 1
+
+                                    <svg
+                                        class="hs-accordion-active:block ml-auto hidden w-3 h-3 text-slate-600 group-hover:text-slate-500 dark:text-slate-400"
+                                        width="16" height="16" viewBox="0 0 16 16" fill="none"
+                                        xmlns="http://www.w3.org/2000/svg">
+                                        <path
+                                            d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11"
+                                            stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
+                                    </svg>
+
+                                    <svg
+                                        class="hs-accordion-active:hidden ml-auto block w-3 h-3 text-slate-600 group-hover:text-slate-500 dark:text-slate-400"
+                                        width="16" height="16" viewBox="0 0 16 16" fill="none"
+                                        xmlns="http://www.w3.org/2000/svg">
+                                        <path
+                                            d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5"
+                                            stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
+                                    </svg>
+                                </a>
+
+                                <div id="users-accordion-sub-1"
+                                     class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300 hidden">
+                                    <ul class="pt-2 pl-2">
+                                        <li>
+                                            <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-oblue-500"
+                                               href="javascript:;">
+                                                Link 1
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-oblue-500"
+                                               href="javascript:;">
+                                                Link 2
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-oblue-500"
+                                               href="javascript:;">
+                                                Link 3
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </li>
+                            <li class="hs-accordion" id="users-accordion-sub-2">
+                                <a class="hs-accordion-toggle flex items-center gap-x-3.5 py-2 px-2.5 hs-accordion-active:text-blue-600 hs-accordion-active:hover:bg-transparent text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:hover:bg-oblue-500 dark:text-slate-400 dark:hover:bg-oblue-500 dark:hs-accordion-active:text-white"
+                                   href="javascript:;">
+                                    Sub Menu 2
+
+                                    <svg
+                                        class="hs-accordion-active:block ml-auto hidden w-3 h-3 text-slate-600 group-hover:text-slate-500 dark:text-slate-400"
+                                        width="16" height="16" viewBox="0 0 16 16" fill="none"
+                                        xmlns="http://www.w3.org/2000/svg">
+                                        <path
+                                            d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11"
+                                            stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
+                                    </svg>
+
+                                    <svg
+                                        class="hs-accordion-active:hidden ml-auto block w-3 h-3 text-slate-600 group-hover:text-slate-500 dark:text-slate-400"
+                                        width="16" height="16" viewBox="0 0 16 16" fill="none"
+                                        xmlns="http://www.w3.org/2000/svg">
+                                        <path
+                                            d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5"
+                                            stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
+                                    </svg>
+                                </a>
+
+                                <div id="users-accordion-sub-2"
+                                     class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300 hidden pl-2">
+                                    <ul class="pt-2 pl-2">
+                                        <li>
+                                            <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-oblue-500"
+                                               href="javascript:;">
+                                                Link 1
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-oblue-500"
+                                               href="javascript:;">
+                                                Link 2
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-oblue-500"
+                                               href="javascript:;">
+                                                Link 3
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+
+                <li class="hs-accordion" id="account-accordion">
+                    <a class="hs-accordion-toggle flex items-center gap-x-3.5 py-2 px-2.5 hs-accordion-active:text-blue-600 hs-accordion-active:hover:bg-transparent text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:hover:bg-oblue-500 dark:text-slate-400 dark:hover:bg-oblue-500 dark:hs-accordion-active:text-white"
+                       href="javascript:;">
+                        <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+                             fill="currentColor" viewBox="0 0 16 16">
+                            <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
+                            <path fill-rule="evenodd"
+                                  d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
+                        </svg>
+                        Account
+
+                        <svg
+                            class="hs-accordion-active:block ml-auto hidden w-3 h-3 text-slate-600 group-hover:text-slate-500 dark:text-slate-400"
+                            width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11"
+                                  stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
+                        </svg>
+
+                        <svg
+                            class="hs-accordion-active:hidden ml-auto block w-3 h-3 text-slate-600 group-hover:text-slate-500 dark:text-slate-400"
+                            width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5"
+                                  stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
+                        </svg>
+                    </a>
+
+                    <div id="account-accordion"
+                         class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300 hidden">
+                        <ul class="pt-2 pl-2">
+                            <li>
+                                <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-oblue-500"
+                                   href="javascript:;">
+                                    Link 1
+                                </a>
+                            </li>
+                            <li>
+                                <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-oblue-500"
+                                   href="javascript:;">
+                                    Link 2
+                                </a>
+                            </li>
+                            <li>
+                                <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-oblue-500"
+                                   href="javascript:;">
+                                    Link 3
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+
+                <li class="hs-accordion" id="projects-accordion">
+                    <a class="hs-accordion-toggle flex items-center gap-x-3.5 py-2 px-2.5 hs-accordion-active:text-blue-600 hs-accordion-active:hover:bg-transparent text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:hover:bg-oblue-500 dark:text-slate-400 dark:hover:bg-oblue-500 dark:hs-accordion-active:text-white"
+                       href="javascript:;">
+                        <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+                             fill="currentColor" viewBox="0 0 16 16">
+                            <path
+                                d="M1.5 0A1.5 1.5 0 0 0 0 1.5V13a1 1 0 0 0 1 1V1.5a.5.5 0 0 1 .5-.5H14a1 1 0 0 0-1-1H1.5z"></path>
+                            <path
+                                d="M3.5 2A1.5 1.5 0 0 0 2 3.5v11A1.5 1.5 0 0 0 3.5 16h6.086a1.5 1.5 0 0 0 1.06-.44l4.915-4.914A1.5 1.5 0 0 0 16 9.586V3.5A1.5 1.5 0 0 0 14.5 2h-11zM3 3.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 .5.5V9h-4.5A1.5 1.5 0 0 0 9 10.5V15H3.5a.5.5 0 0 1-.5-.5v-11zm7 11.293V10.5a.5.5 0 0 1 .5-.5h4.293L10 14.793z"></path>
+                        </svg>
+                        Projects
+
+                        <svg
+                            class="hs-accordion-active:block ml-auto hidden w-3 h-3 text-slate-600 group-hover:text-slate-500 dark:text-slate-400"
+                            width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11"
+                                  stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
+                        </svg>
+
+                        <svg
+                            class="hs-accordion-active:hidden ml-auto block w-3 h-3 text-slate-600 group-hover:text-slate-500 dark:text-slate-400"
+                            width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5"
+                                  stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
+                        </svg>
+                    </a>
+
+                    <div id="projects-accordion"
+                         class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300 hidden">
+                        <ul class="pt-2 pl-2">
+                            <li>
+                                <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-oblue-500"
+                                   href="javascript:;">
+                                    Link 1
+                                </a>
+                            </li>
+                            <li>
+                                <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-oblue-500"
+                                   href="javascript:;">
+                                    Link 2
+                                </a>
+                            </li>
+                            <li>
+                                <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-oblue-500"
+                                   href="javascript:;">
+                                    Link 3
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+
+                <li>
+                    <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:hover:bg-oblue-500 dark:text-slate-400 dark:hover:bg-oblue-500"
+                       href="javascript:;">
+                        <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+                             fill="currentColor" viewBox="0 0 16 16">
+                            <path
+                                d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-5 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/>
+                            <path
+                                d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
+                        </svg>
+                        Calendar
+                    </a></li>
+                <li>
+                    <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:hover:bg-oblue-500 dark:text-slate-400 dark:hover:bg-oblue-500"
+                       href="javascript:;">
+                        <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+                             fill="currentColor" viewBox="0 0 16 16">
+                            <path
+                                d="M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811V2.828zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/>
+                        </svg>
+                        Documentation
+                    </a></li>
+            </ul>
+        </nav>
+    </div>
+    <!-- End Sidebar -->
+
+
+</div>

From baccbc088fd1728976bc07a2acfd46cc509fcd31 Mon Sep 17 00:00:00 2001
From: Amir <amirhussain@outlook.com>
Date: Wed, 9 Nov 2022 15:51:10 +0400
Subject: [PATCH 2/3] Adding Preline Button, Modal Components with Menu table
 database

---
 app/Http/Livewire/Admin/Menu.php              |  14 +
 app/Http/Livewire/Admin/Profile.php           |  22 +
 app/Http/Livewire/Layout/Sidebar.php          |  40 +-
 app/Models/Menu.php                           |  11 +
 app/View/Components/Item/Button.php           |  28 +
 app/View/Components/Item/Modal.php            |  28 +
 .../Layout/Sidebar/ArrowDirection.php         |  28 +
 .../Components/Layout/Sidebar/ChildOne.php    |  29 ++
 .../Components/Layout/Sidebar/ChildTwo.php    |  28 +
 app/View/Components/Layout/Sidebar/SubOne.php |  28 +
 app/View/Components/Svg/Add.php               |  28 +
 app/View/Components/Svg/Home.php              |  28 +
 app/View/Components/Svg/Menu.php              |  28 +
 app/View/Components/Svg/Users.php             |  28 +
 .../2022_11_09_085026_create_menus_table.php  |  33 ++
 resources/js/components/main.js               |   5 +-
 .../views/components/item/button.blade.php    |  26 +
 .../views/components/item/modal.blade.php     | 115 +++++
 .../layout/sidebar/arrow-direction.blade.php  |  17 +
 .../layout/sidebar/child-one.blade.php        |  54 ++
 .../layout/sidebar/child-two.blade.php        |  13 +
 .../layout/sidebar/parent.blade.php           |   5 +
 resources/views/components/svg/add.blade.php  |   3 +
 resources/views/components/svg/gear.blade.php |   5 +-
 resources/views/components/svg/home.blade.php |   7 +
 resources/views/components/svg/menu.blade.php |   4 +
 resources/views/components/svg/nav.blade.php  |   0
 .../views/components/svg/users.blade.php      |   5 +
 resources/views/layouts/app.blade.php         |   3 +
 resources/views/livewire/admin/menu.blade.php |  13 +
 .../views/livewire/admin/profile.blade.php    |  63 +++
 .../livewire/layout/navigation.blade.php      |   2 +-
 .../views/livewire/layout/sidebar.blade.php   | 480 ++++++++----------
 routes/admin.php                              |   4 +-
 34 files changed, 958 insertions(+), 267 deletions(-)
 create mode 100644 app/Http/Livewire/Admin/Menu.php
 create mode 100644 app/Http/Livewire/Admin/Profile.php
 create mode 100644 app/Models/Menu.php
 create mode 100644 app/View/Components/Item/Button.php
 create mode 100644 app/View/Components/Item/Modal.php
 create mode 100644 app/View/Components/Layout/Sidebar/ArrowDirection.php
 create mode 100644 app/View/Components/Layout/Sidebar/ChildOne.php
 create mode 100644 app/View/Components/Layout/Sidebar/ChildTwo.php
 create mode 100644 app/View/Components/Layout/Sidebar/SubOne.php
 create mode 100644 app/View/Components/Svg/Add.php
 create mode 100644 app/View/Components/Svg/Home.php
 create mode 100644 app/View/Components/Svg/Menu.php
 create mode 100644 app/View/Components/Svg/Users.php
 create mode 100644 database/migrations/2022_11_09_085026_create_menus_table.php
 create mode 100644 resources/views/components/item/button.blade.php
 create mode 100644 resources/views/components/item/modal.blade.php
 create mode 100644 resources/views/components/layout/sidebar/arrow-direction.blade.php
 create mode 100644 resources/views/components/layout/sidebar/child-one.blade.php
 create mode 100644 resources/views/components/layout/sidebar/child-two.blade.php
 create mode 100644 resources/views/components/layout/sidebar/parent.blade.php
 create mode 100644 resources/views/components/svg/add.blade.php
 create mode 100644 resources/views/components/svg/home.blade.php
 create mode 100644 resources/views/components/svg/menu.blade.php
 create mode 100644 resources/views/components/svg/nav.blade.php
 create mode 100644 resources/views/components/svg/users.blade.php
 create mode 100644 resources/views/livewire/admin/menu.blade.php
 create mode 100644 resources/views/livewire/admin/profile.blade.php

diff --git a/app/Http/Livewire/Admin/Menu.php b/app/Http/Livewire/Admin/Menu.php
new file mode 100644
index 0000000..18c9b94
--- /dev/null
+++ b/app/Http/Livewire/Admin/Menu.php
@@ -0,0 +1,14 @@
+<?php
+
+namespace App\Http\Livewire\Admin;
+
+use Livewire\Component;
+
+class Menu extends Component
+{
+    public string $pageHeader='Menu';
+    public function render()
+    {
+        return view('livewire.admin.menu',['pageHeader'=>$this->pageHeader]);
+    }
+}
diff --git a/app/Http/Livewire/Admin/Profile.php b/app/Http/Livewire/Admin/Profile.php
new file mode 100644
index 0000000..0c914b4
--- /dev/null
+++ b/app/Http/Livewire/Admin/Profile.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Http\Livewire\Admin;
+
+use Illuminate\Http\Request;
+use Livewire\Component;
+
+class Profile extends Component
+{
+    public $pageHeader='Profile';
+
+
+
+    public function render(Request $request)
+    {
+        return view('livewire.admin.profile',[
+            'pageHeader'=>$this->pageHeader,
+            'request' => $request,
+            'user' => $request->user()
+        ]);
+    }
+}
diff --git a/app/Http/Livewire/Layout/Sidebar.php b/app/Http/Livewire/Layout/Sidebar.php
index 6deb20a..1c7fabd 100644
--- a/app/Http/Livewire/Layout/Sidebar.php
+++ b/app/Http/Livewire/Layout/Sidebar.php
@@ -2,12 +2,50 @@
 
 namespace App\Http\Livewire\Layout;
 
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Route;
 use Livewire\Component;
 
 class Sidebar extends Component
 {
+    public string $dashboardRoute = '';
+    public array $sideBar = [
+        'dashboard' => ['name' => 'Dashboard', 'href' => ''],
+        'users' => ['name' => 'Users', 'href' => ''],
+
+    ];
+
+    public array $sideBarChildOne = [
+        'dashboard' => [
+            ['name' => 'Dash-1', 'href' => 'admin.dashboard'],
+            ['name' => 'Dash-2', 'href' => 'admin.dashboard']
+        ],
+        'users' => [
+            ['name' => 'Data', 'href' => 'admin.dashboard']
+        ],
+    ];
+
+    public array $sideBarChildTwo = [
+        'users' => [
+            ['name' => 'Data 1', 'href' => 'admin.dashboard'],
+            ['name' => 'Data 2', 'href' => 'admin.dashboard'],
+            ['name' => 'Data 3', 'href' => 'admin.dashboard'],
+        ]
+    ];
+
+    public function mount()
+    {
+        if (Auth::guard('admin')->check() && explode('.', Route::currentRouteName())[0] === 'admin') {
+            $this->sideBar['dashboard']['href'] = route('admin.dashboard');
+        } else {
+            $this->sideBar['dashboard']['href'] = route('dashboard');
+        }
+//        (array_key_exists(lcfirst($parent['name']),$sideBarChildTwo[lcfirst($parent['name'])]) ? count($sideBarChildTwo[lcfirst($parent['name'])]) : 0)
+
+    }
+
     public function render()
     {
-        return view('livewire.layout.sidebar');
+        return view('livewire.layout.sidebar', ['sideBar' => $this->sideBar]);
     }
 }
diff --git a/app/Models/Menu.php b/app/Models/Menu.php
new file mode 100644
index 0000000..17f7ad2
--- /dev/null
+++ b/app/Models/Menu.php
@@ -0,0 +1,11 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class Menu extends Model
+{
+    use HasFactory;
+}
diff --git a/app/View/Components/Item/Button.php b/app/View/Components/Item/Button.php
new file mode 100644
index 0000000..8907c3d
--- /dev/null
+++ b/app/View/Components/Item/Button.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\View\Components\Item;
+
+use Illuminate\View\Component;
+
+class Button extends Component
+{
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('components.item.button');
+    }
+}
diff --git a/app/View/Components/Item/Modal.php b/app/View/Components/Item/Modal.php
new file mode 100644
index 0000000..d81ee8d
--- /dev/null
+++ b/app/View/Components/Item/Modal.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\View\Components\Item;
+
+use Illuminate\View\Component;
+
+class Modal extends Component
+{
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('components.item.modal');
+    }
+}
diff --git a/app/View/Components/Layout/Sidebar/ArrowDirection.php b/app/View/Components/Layout/Sidebar/ArrowDirection.php
new file mode 100644
index 0000000..63476e1
--- /dev/null
+++ b/app/View/Components/Layout/Sidebar/ArrowDirection.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\View\Components\Layout\Sidebar;
+
+use Illuminate\View\Component;
+
+class ArrowDirection extends Component
+{
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('components.layout.sidebar.arrow-direction');
+    }
+}
diff --git a/app/View/Components/Layout/Sidebar/ChildOne.php b/app/View/Components/Layout/Sidebar/ChildOne.php
new file mode 100644
index 0000000..4561623
--- /dev/null
+++ b/app/View/Components/Layout/Sidebar/ChildOne.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace App\View\Components\Layout\Sidebar;
+
+use Illuminate\View\Component;
+
+class ChildOne extends Component
+{
+    public $links;
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct($links=[])
+    {
+       $this->links=$links;
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('components.layout.sidebar.child-one',['links'=>$this->links]);
+    }
+}
diff --git a/app/View/Components/Layout/Sidebar/ChildTwo.php b/app/View/Components/Layout/Sidebar/ChildTwo.php
new file mode 100644
index 0000000..c021a85
--- /dev/null
+++ b/app/View/Components/Layout/Sidebar/ChildTwo.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\View\Components\Layout\Sidebar;
+
+use Illuminate\View\Component;
+
+class ChildTwo extends Component
+{
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('components.layout.sidebar.child-two');
+    }
+}
diff --git a/app/View/Components/Layout/Sidebar/SubOne.php b/app/View/Components/Layout/Sidebar/SubOne.php
new file mode 100644
index 0000000..8a88533
--- /dev/null
+++ b/app/View/Components/Layout/Sidebar/SubOne.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\View\Components\Layout\Sidebar;
+
+use Illuminate\View\Component;
+
+class SubOne extends Component
+{
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('components.layout.sidebar.sub-one');
+    }
+}
diff --git a/app/View/Components/Svg/Add.php b/app/View/Components/Svg/Add.php
new file mode 100644
index 0000000..d701539
--- /dev/null
+++ b/app/View/Components/Svg/Add.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\View\Components\Svg;
+
+use Illuminate\View\Component;
+
+class Add extends Component
+{
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('components.svg.add');
+    }
+}
diff --git a/app/View/Components/Svg/Home.php b/app/View/Components/Svg/Home.php
new file mode 100644
index 0000000..384fb1d
--- /dev/null
+++ b/app/View/Components/Svg/Home.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\View\Components\Svg;
+
+use Illuminate\View\Component;
+
+class Home extends Component
+{
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('components.svg.home');
+    }
+}
diff --git a/app/View/Components/Svg/Menu.php b/app/View/Components/Svg/Menu.php
new file mode 100644
index 0000000..8dbb2d2
--- /dev/null
+++ b/app/View/Components/Svg/Menu.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\View\Components\Svg;
+
+use Illuminate\View\Component;
+
+class Menu extends Component
+{
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('components.svg.menu');
+    }
+}
diff --git a/app/View/Components/Svg/Users.php b/app/View/Components/Svg/Users.php
new file mode 100644
index 0000000..c8bc09f
--- /dev/null
+++ b/app/View/Components/Svg/Users.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\View\Components\Svg;
+
+use Illuminate\View\Component;
+
+class Users extends Component
+{
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('components.svg.users');
+    }
+}
diff --git a/database/migrations/2022_11_09_085026_create_menus_table.php b/database/migrations/2022_11_09_085026_create_menus_table.php
new file mode 100644
index 0000000..d374a72
--- /dev/null
+++ b/database/migrations/2022_11_09_085026_create_menus_table.php
@@ -0,0 +1,33 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('menus', function (Blueprint $table) {
+            $table->id();
+            $table->string('name')->unique();
+            $table->string('svg')->unique()->nullable();
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('menus');
+    }
+};
diff --git a/resources/js/components/main.js b/resources/js/components/main.js
index 867d245..e976e43 100644
--- a/resources/js/components/main.js
+++ b/resources/js/components/main.js
@@ -9,10 +9,11 @@ export function Main(data){
      return{
          darkMode:data.darkMode,
          isSidebarOpen:false,
+         isFirstModelButtonClicked:false,
          init() {
+             this.darkMode=true;
              Alpine.effect(() => {
-                 // this.darkMode=true;
-                 console.log(this.isSidebarOpen);
+                 console.log( this.isModelButtonClicked);
              });
          }
      }
diff --git a/resources/views/components/item/button.blade.php b/resources/views/components/item/button.blade.php
new file mode 100644
index 0000000..ac254e5
--- /dev/null
+++ b/resources/views/components/item/button.blade.php
@@ -0,0 +1,26 @@
+@props(['size'=>'default'])
+@switch($size)
+    @case('small')
+    <button type="button" {{ $attributes->merge(['class' => 'rounded-full py-2 px-3 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-blue-500 text-white
+            hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800']) }} >
+       <span class="flex justify-center items-center">  {{$slot}} </span>
+    </button>
+    @break
+
+    @case('default')
+    <button type="button" {{ $attributes->merge(['class' => 'py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-blue-500 text-white
+        hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800']) }}>
+        {{$slot}}
+    </button>
+    @break
+
+    @case('large')
+    <button type="button" {{ $attributes->merge(['class' => 'py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-blue-500 text-white
+        hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm sm:p-5 dark:focus:ring-offset-gray-800']) }}>
+        {{$slot}}
+    </button>
+    @break
+@endswitch
+
+
+
diff --git a/resources/views/components/item/modal.blade.php b/resources/views/components/item/modal.blade.php
new file mode 100644
index 0000000..31e5d74
--- /dev/null
+++ b/resources/views/components/item/modal.blade.php
@@ -0,0 +1,115 @@
+@props(['type','buttonName'=>'Give some name', 'modalHeader'=>'Give a header'])
+<x-item.button @click.prevent="isFirstModelButtonClicked = true" size="small">
+    @switch($type)
+        @case('add')
+        <x-svg.add class="flex w-4 h-4"></x-svg.add>
+        @break
+
+        @case('update')
+        <x-svg.add class="flex w-4 h-4"></x-svg.add>
+        @break
+
+        @case('delete')
+        <x-svg.add class="flex w-4 h-4"></x-svg.add>
+        @break
+    @endswitch
+
+    <span class="flex ml-1">{{__($buttonName)}}</span>
+</x-item.button>
+
+
+<div id="hs-vertically-centered-scrollable-modal"
+     class="hs-overlay  transition-all duration-300 opacity-0 w-full h-full fixed top-0 left-0 z-[80] overflow-x-hidden overflow-y-auto ustify-center items-center"
+     :class="{ 'block opacity-100 transition-all duration-300': isFirstModelButtonClicked === true, ' opacity-0 transition-all duration-300 hidden': isFirstModelButtonClicked===false  }"
+>
+    <div
+        class=" opacity-0 sm:max-w-lg sm:w-full m-3 sm:mx-auto h-[calc(100%-3.5rem)] min-h-[calc(100%-3.5rem)] flex items-center"
+        :class="{ '!flex transition-all duration-300 opacity-100 ': isFirstModelButtonClicked===true }"
+    >
+        <div
+            class="max-h-full overflow-hidden flex flex-col bg-white border shadow-sm rounded-xl dark:bg-oblue-300 dark:border-oblue-100 dark:shadow-olblue-900/[.5]">
+            <div class="flex justify-between items-center py-3 px-4 border-b dark:border-olblue-800">
+                <h3 class="flex justify-start items-center font-bold text-gray-800 dark:text-white">
+                    @switch($type)
+                        @case('add')
+                        <x-svg.add class="flex w-5 h-5"></x-svg.add>
+                        @break
+
+                        @case('update')
+                        <x-svg.add class="flex w-5 h-5"></x-svg.add>
+                        @break
+
+                        @case('delete')
+                        <x-svg.add class="flex w-5 h-5"></x-svg.add>
+                        @break
+                    @endswitch
+
+                    <span class="flex ml-1">{{$modalHeader}}</span>
+
+                </h3>
+                <button @click.prevent="isFirstModelButtonClicked = false" type="button"
+                        class="inline-flex flex-shrink-0 justify-center items-center h-8 w-8 rounded-md text-gray-500 hover:text-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-white transition-all text-sm dark:focus:ring-gray-700 dark:focus:ring-offset-gray-800">
+                    <span class="sr-only">Close</span>
+                    <svg class="w-3.5 h-3.5" width="8" height="8" viewBox="0 0 8 8" fill="none"
+                         xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z"
+                            fill="currentColor"/>
+                    </svg>
+                </button>
+            </div>
+            <div class="p-4 overflow-y-auto">
+                <div class="space-y-4">
+                    <div>
+                        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Be bold</h3>
+                        <p class="mt-1 text-gray-800 dark:text-gray-400">
+                            Motivate teams to do their best work. Offer best practices to get users going in the right
+                            direction. Be bold and offer just enough help to get the work started, and then get out of
+                            the way. Give accurate information so users can make educated decisions. Know your user's
+                            struggles and desired outcomes and give just enough information to let them get where they
+                            need to go.
+                        </p>
+                    </div>
+
+                    <div>
+                        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Be optimistic</h3>
+                        <p class="mt-1 text-gray-800 dark:text-gray-400">
+                            Focusing on the details gives people confidence in our products. Weave a consistent story
+                            across our fabric and be diligent about vocabulary across all messaging by being brand
+                            conscious across products to create a seamless flow across all the things. Let people know
+                            that they can jump in and start working expecting to find a dependable experience across all
+                            the things. Keep teams in the loop about what is happening by informing them of relevant
+                            features, products and opportunities for success. Be on the journey with them and highlight
+                            the key points that will help them the most - right now. Be in the moment by focusing
+                            attention on the important bits first.
+                        </p>
+                    </div>
+
+                    <div>
+                        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Be practical, with a wink</h3>
+                        <p class="mt-1 text-gray-800 dark:text-gray-400">
+                            Keep our own story short and give teams just enough to get moving. Get to the point and be
+                            direct. Be concise - we tell the story of how we can help, but we do it directly and with
+                            purpose. Be on the lookout for opportunities and be quick to offer a helping hand. At the
+                            same time realize that novbody likes a nosy neighbor. Give the user just enough to know that
+                            something awesome is around the corner and then get out of the way. Write clear, accurate,
+                            and concise text that makes interfaces more usable and consistent - and builds trust. We
+                            strive to write text that is understandable by anyone, anywhere, regardless of their culture
+                            or language so that everyone feels they are part of the team.
+                        </p>
+                    </div>
+                </div>
+            </div>
+            <div class="flex justify-end items-center gap-x-2 py-3 px-4 border-t dark:border-gray-700">
+                <button @click.prevent="isFirstModelButtonClicked = false" type="button"
+                        class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm dark:bg-gray-800 dark:hover:bg-slate-800 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white dark:focus:ring-offset-gray-800">
+                    Close
+                </button>
+                <a class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800"
+                   href="#">
+                    Save changes
+                </a>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/resources/views/components/layout/sidebar/arrow-direction.blade.php b/resources/views/components/layout/sidebar/arrow-direction.blade.php
new file mode 100644
index 0000000..bcfeb73
--- /dev/null
+++ b/resources/views/components/layout/sidebar/arrow-direction.blade.php
@@ -0,0 +1,17 @@
+    <svg
+        class="hs-accordion-active:block ml-auto hidden w-3 h-3 text-slate-600 group-hover:text-slate-500 dark:text-slate-400"
+        width="16" height="16" viewBox="0 0 16 16" fill="none"
+        xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11"
+            stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
+    </svg>
+
+    <svg
+        class="hs-accordion-active:hidden ml-auto block w-3 h-3 text-slate-600 group-hover:text-slate-500 dark:text-slate-400"
+        width="16" height="16" viewBox="0 0 16 16" fill="none"
+        xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5"
+            stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
+    </svg>
diff --git a/resources/views/components/layout/sidebar/child-one.blade.php b/resources/views/components/layout/sidebar/child-one.blade.php
new file mode 100644
index 0000000..95b577c
--- /dev/null
+++ b/resources/views/components/layout/sidebar/child-one.blade.php
@@ -0,0 +1,54 @@
+@props(['id'=>null, 'name'=>null , 'childCount'=>0])
+@if($id != null)
+    <li class="hs-accordion" id="{{$id}}">
+        <a {{ $attributes->merge(['class' => 'hs-accordion-toggle cursor-pointer flex items-center gap-x-3.5 py-2 px-2.5 hs-accordion-active:text-blue-600 hs-accordion-active:hover:bg-transparent text-sm text-slate-700
+rounded-md hover:bg-slate-100  dark:hover:bg-oblue-500 dark:text-slate-400 dark:hover:bg-oblue-500 dark:hs-accordion-active:text-white']) }} >
+            @switch($name)
+                @case('Users')
+                <x-svg.users></x-svg.users>
+                {{ __($name) }}
+                @break
+
+{{--                @case('Menu')--}}
+{{--                <x-svg.menu></x-svg.menu>--}}
+{{--                {{ __($name) }}--}}
+{{--                @break--}}
+
+                @default
+                {{ __($name) }}
+                @break
+            @endswitch
+            @if($childCount > 0) <x-layout.sidebar.arrow-direction></x-layout.sidebar.arrow-direction> @endif
+        </a>
+        <div id="{{$id}}"
+             class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300 hidden">
+            {{$slot}}
+        </div>
+    </li>
+@else
+    <li>
+        <a {{ $attributes->merge(['class' => 'flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:hover:bg-oblue-500 dark:text-slate-400 dark:hover:bg-oblue-500']) }} href="route($href)">
+            @switch($name)
+                @case('Dashboard')
+                <x-svg.home></x-svg.home>
+                {{ __($name) }}
+                @break
+
+                @case('Users')
+                <x-svg.users></x-svg.users>
+                {{ __($name) }}
+                @break
+
+                @case('Menu')
+                <x-svg.menu></x-svg.menu>
+                {{ __($name) }}
+                @break
+
+                @default
+                {{ __($name) }}
+                @break
+            @endswitch
+        </a>
+    </li>
+@endif
+
diff --git a/resources/views/components/layout/sidebar/child-two.blade.php b/resources/views/components/layout/sidebar/child-two.blade.php
new file mode 100644
index 0000000..094f4a0
--- /dev/null
+++ b/resources/views/components/layout/sidebar/child-two.blade.php
@@ -0,0 +1,13 @@
+@props(['links'=>[]])
+@if(count($links) > 0)
+<ul class="pt-2 pl-2">
+    @foreach($links as $link)
+    <li>
+        <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-oblue-500"
+           href="javascript:;">
+            {{$link}}
+        </a>
+    </li>
+    @endforeach
+</ul>
+    @endif
diff --git a/resources/views/components/layout/sidebar/parent.blade.php b/resources/views/components/layout/sidebar/parent.blade.php
new file mode 100644
index 0000000..3425cfe
--- /dev/null
+++ b/resources/views/components/layout/sidebar/parent.blade.php
@@ -0,0 +1,5 @@
+<nav x-data="{ active:false }" class="hs-accordion-group p-6 w-full flex flex-col flex-wrap" data-hs-accordion-always-open>
+    <ul class="space-y-1.5">
+        {{$slot}}
+    </ul>
+</nav>
diff --git a/resources/views/components/svg/add.blade.php b/resources/views/components/svg/add.blade.php
new file mode 100644
index 0000000..960bac6
--- /dev/null
+++ b/resources/views/components/svg/add.blade.php
@@ -0,0 +1,3 @@
+<svg {{ $attributes->merge(['class' => 'flex-none']) }} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" >
+    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+</svg>
diff --git a/resources/views/components/svg/gear.blade.php b/resources/views/components/svg/gear.blade.php
index fe8278e..b347f64 100644
--- a/resources/views/components/svg/gear.blade.php
+++ b/resources/views/components/svg/gear.blade.php
@@ -1,4 +1,3 @@
-<svg {{ $attributes->merge(['class' => 'flex-none']) }} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" >
-    <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" />
-    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+<svg {{ $attributes->merge(['class' => 'flex-none']) }} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9h16.5m-16.5 6.75h16.5" />
 </svg>
diff --git a/resources/views/components/svg/home.blade.php b/resources/views/components/svg/home.blade.php
new file mode 100644
index 0000000..7a53887
--- /dev/null
+++ b/resources/views/components/svg/home.blade.php
@@ -0,0 +1,7 @@
+<svg {{ $attributes->merge(['class' => 'flex-none']) }} xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+     fill="currentColor" viewBox="0 0 16 16">
+    <path fill-rule="evenodd"
+          d="M2 13.5V7h1v6.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5V7h1v6.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5zm11-11V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
+    <path fill-rule="evenodd"
+          d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z"/>
+</svg>
diff --git a/resources/views/components/svg/menu.blade.php b/resources/views/components/svg/menu.blade.php
new file mode 100644
index 0000000..05382ca
--- /dev/null
+++ b/resources/views/components/svg/menu.blade.php
@@ -0,0 +1,4 @@
+<svg {{ $attributes->merge(['class' => 'flex-none']) }}  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"  width="16" height="16">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 5.25h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5" />
+</svg>
+
diff --git a/resources/views/components/svg/nav.blade.php b/resources/views/components/svg/nav.blade.php
new file mode 100644
index 0000000..e69de29
diff --git a/resources/views/components/svg/users.blade.php b/resources/views/components/svg/users.blade.php
new file mode 100644
index 0000000..f5e2b00
--- /dev/null
+++ b/resources/views/components/svg/users.blade.php
@@ -0,0 +1,5 @@
+<svg {{ $attributes->merge(['class' => 'flex-none']) }} xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+     fill="currentColor" viewBox="0 0 16 16">
+    <path
+        d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816zM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275zM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"></path>
+</svg>
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 3ed3a18..304d5ef 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -30,5 +30,8 @@
 @stack('modals')
 @livewireScripts
 
+<div  @click="isFirstModelButtonClicked = false" data-hs-overlay-backdrop-template id="modalBackdrop"
+:class="{ 'transition-all duration-300 fixed inset-0 z-[70] bg-gray-900 dark:bg-oblue-900 bg-opacity-50 dark:bg-opacity-40' : isFirstModelButtonClicked === true, ' transition-all duration-300 fixed inset-0 z-[-10] bg-gray-900 dark:bg-oblue-900 bg-opacity-0 dark:bg-opacity-0' : isFirstModelButtonClicked === false }"
+></div>
 </body>
 </html>
diff --git a/resources/views/livewire/admin/menu.blade.php b/resources/views/livewire/admin/menu.blade.php
new file mode 100644
index 0000000..a68ae4d
--- /dev/null
+++ b/resources/views/livewire/admin/menu.blade.php
@@ -0,0 +1,13 @@
+<div>
+    @livewire('layout.navigation')
+    @livewire('layout.toggle')
+    @livewire('layout.sidebar')
+    @livewire('layout.header',['header'=>$pageHeader])
+
+    <!-- Page Content -->
+    <x-layout.content>
+
+<x-item.modal buttonName="Create" type="add" modalHeader="Create Menu"></x-item.modal>
+
+    </x-layout.content>
+</div>
diff --git a/resources/views/livewire/admin/profile.blade.php b/resources/views/livewire/admin/profile.blade.php
new file mode 100644
index 0000000..165ecc3
--- /dev/null
+++ b/resources/views/livewire/admin/profile.blade.php
@@ -0,0 +1,63 @@
+<div>
+    @livewire('layout.navigation')
+    @livewire('layout.toggle')
+    @livewire('layout.sidebar')
+    @livewire('layout.header',['header'=>$pageHeader])
+
+    <!-- Page Content -->
+    <x-layout.content>
+
+
+        <div>
+            <div class="max-w-7xl mx-auto py-0 sm:px-6 lg:px-0">
+                @if (Laravel\Fortify\Features::canUpdateProfileInformation())
+                    @if(Auth::guard('admin')->check())
+                        @livewire('admin-update-profile-information-form')
+                    @else
+                        @livewire('profile.update-profile-information-form')
+                    @endif
+                    <x-jet-section-border/>
+                @endif
+
+                @if (Laravel\Fortify\Features::enabled(Laravel\Fortify\Features::updatePasswords()))
+                    <div class="mt-10 sm:mt-0">
+                        @livewire('profile.update-password-form')
+                    </div>
+
+                    <x-jet-section-border />
+                @endif
+
+                @if (Laravel\Fortify\Features::canManageTwoFactorAuthentication())
+                    <div class="mt-10 sm:mt-0">
+
+                        @if(Auth::guard('admin')->check())
+                            @livewire('admin-two-factor-authentication-form')
+                        @else
+                            @livewire('profile.two-factor-authentication-form')
+                        @endif
+
+                    </div>
+
+                    <x-jet-section-border />
+                @endif
+
+                <div class="mt-10 sm:mt-0">
+                    @livewire('profile.logout-other-browser-sessions-form')
+                </div>
+
+                @if (Laravel\Jetstream\Jetstream::hasAccountDeletionFeatures())
+                    <x-jet-section-border />
+
+                    <div class="mt-10 sm:mt-0">
+                        @livewire('profile.delete-user-form')
+                    </div>
+                @endif
+            </div>
+        </div>
+
+
+
+
+    </x-layout.content>
+
+</div>
diff --git a/resources/views/livewire/layout/navigation.blade.php b/resources/views/livewire/layout/navigation.blade.php
index 646e31b..0f234a7 100644
--- a/resources/views/livewire/layout/navigation.blade.php
+++ b/resources/views/livewire/layout/navigation.blade.php
@@ -266,7 +266,7 @@
 
 <!-- ========== HEADER ========== -->
 <header
-    class="sticky !h-[70px] top-0 inset-x-0 flex flex-wrap sm:justify-start xs:flex-nowrap z-[48] w-full text-sm py-2.5 sm:py-4 lg:pl-64 dark:border-oblue-100">
+    class=" !h-[70px]  top-0 inset-x-0 flex flex-wrap sm:justify-start xs:flex-nowrap z-[48] w-full text-sm py-2.5 sm:py-4 lg:pl-64 dark:border-oblue-100">
     <nav class="flex basis-full items-center w-full mx-auto px-4 sm:px-6 md:px-8" aria-label="Global">
 
         {{--     ------- Logo on Sidebar  --------        --}}
diff --git a/resources/views/livewire/layout/sidebar.blade.php b/resources/views/livewire/layout/sidebar.blade.php
index ba41319..9475c95 100644
--- a/resources/views/livewire/layout/sidebar.blade.php
+++ b/resources/views/livewire/layout/sidebar.blade.php
@@ -2,15 +2,15 @@
     <!-- Sidebar -->
     <div id="docs-sidebar"
          class=
-    "hs-overlay hs-overlay-open:translate-x-0 -translate-x-full transition-all duration-300 transform hidden fixed top-0 left-0 bottom-0 z-[60] w-64 bg-white border-r border-slate-200 pb-10 overflow-y-auto scrollbar-y lg:block lg:translate-x-0 lg:right-auto lg:bottom-0 dark:scrollbar-y dark:bg-oblue-600 dark:border-oblue-100 "
+         "hs-overlay hs-overlay-open:translate-x-0 -translate-x-full transition-all duration-300 transform hidden fixed top-0 left-0 bottom-0 z-[60] w-64 bg-white border-r border-slate-200 pb-10 overflow-y-auto scrollbar-y lg:block lg:translate-x-0 lg:right-auto lg:bottom-0 dark:scrollbar-y dark:bg-oblue-600 dark:border-oblue-100 "
     >
 
-{{--        <button type="button" class="w-8 h-8 inline-flex justify-center items-center gap-2 rounded-md border border-gray-200 text-gray-600 hover:text-gray-400 transition dark:border-gray-700" data-hs-overlay="#docs-sidebar" aria-controls="docs-sidebar" aria-label="Toggle navigation">--}}
-{{--            <span class="sr-only">Close Sidebar</span>--}}
-{{--            <svg class="w-3 h-3" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">--}}
-{{--                <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>--}}
-{{--            </svg>--}}
-{{--        </button>--}}
+        {{--        <button type="button" class="w-8 h-8 inline-flex justify-center items-center gap-2 rounded-md border border-gray-200 text-gray-600 hover:text-gray-400 transition dark:border-gray-700" data-hs-overlay="#docs-sidebar" aria-controls="docs-sidebar" aria-label="Toggle navigation">--}}
+        {{--            <span class="sr-only">Close Sidebar</span>--}}
+        {{--            <svg class="w-3 h-3" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">--}}
+        {{--                <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>--}}
+        {{--            </svg>--}}
+        {{--        </button>--}}
         <div
             class="flex flex-col justify-center items-center px-6 xs:!h-[128px] lg:!h-[146px] border-b dark:border-oblue-100">
             <x-jet-application-mark class="flex h-9 w-auto"/>
@@ -21,277 +21,239 @@ class="flex flex-col justify-center items-center px-6 xs:!h-[128px] lg:!h-[146px
             </x-jet-nav-link>
         </div>
 
-        <nav class="hs-accordion-group p-6 w-full flex flex-col flex-wrap" data-hs-accordion-always-open>
-            <ul class="space-y-1.5">
-                <li>
-                    <a class="flex items-center gap-x-3.5 py-2 px-2.5 bg-slate-100 text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:bg-oblue-600 dark:text-white"
-                       href="javascript:;">
-                        <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
-                             fill="currentColor" viewBox="0 0 16 16">
-                            <path fill-rule="evenodd"
-                                  d="M2 13.5V7h1v6.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5V7h1v6.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5zm11-11V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
-                            <path fill-rule="evenodd"
-                                  d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z"/>
-                        </svg>
-                        Dashboard
-                    </a>
-                </li>
+        <x-layout.sidebar.parent>
 
-                <li class="hs-accordion" id="users-accordion">
-                    <a class="hs-accordion-toggle flex items-center gap-x-3.5 py-2 px-2.5 hs-accordion-active:text-blue-600 hs-accordion-active:hover:bg-transparent text-sm text-slate-700 rounded-md hover:bg-slate-100  dark:hover:bg-oblue-500 dark:text-slate-400 dark:hover:bg-oblue-500 dark:hs-accordion-active:text-white"
-                       href="javascript:;">
-                        <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
-                             fill="currentColor" viewBox="0 0 16 16">
-                            <path
-                                d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816zM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275zM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"></path>
-                        </svg>
-                        Users
+            <x-layout.sidebar.child-one :name="'Dashboard'"  href="{{ (Auth::guard('admin')->check() && explode('.',Route::currentRouteName())[0] ==='admin') ? route('admin.dashboard') : route('dashboard') }}"></x-layout.sidebar.child-one>
+            <x-layout.sidebar.child-one :name="'Menu'"  href="{{route('admin.menu')}}"></x-layout.sidebar.child-one>
 
-                        <svg
-                            class="hs-accordion-active:block ml-auto hidden w-3 h-3 text-slate-600 group-hover:text-slate-500 dark:text-slate-400"
-                            width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <path d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11"
-                                  stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
-                        </svg>
 
-                        <svg
-                            class="hs-accordion-active:hidden ml-auto block w-3 h-3 text-slate-600 group-hover:text-slate-500 dark:text-slate-400"
-                            width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5"
-                                  stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
-                        </svg>
-                    </a>
 
-                    <div id="users-accordion"
-                         class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300 hidden">
-                        <ul class="hs-accordion-group pl-3 pt-2" data-hs-accordion-always-open>
-                            <li class="hs-accordion" id="users-accordion-sub-1">
-                                <a class="hs-accordion-toggle flex items-center gap-x-3.5 py-2 px-2.5 hs-accordion-active:text-blue-600 hs-accordion-active:hover:bg-transparent text-sm text-slate-700 rounded-md hover:bg-slate-100  dark:hover:bg-oblue-500 dark:text-slate-400 dark:hover:bg-oblue-500 dark:hs-accordion-active:text-white"
-                                   href="javascript:;">
-                                    Sub Menu 1
+            @foreach($sideBar as $parent)
+                @if(array_key_exists(lcfirst($parent['name']), $sideBarChildOne))
+                    <x-layout.sidebar.child-one :id="$parent['name'].'-accordion'" :childCount="count($sideBarChildOne[lcfirst($parent['name'])])" :name="ucfirst($parent['name'])">
+                        @if(count($sideBarChildOne[lcfirst($parent['name'])]) > 0)
+                            @foreach($sideBarChildOne[lcfirst($parent['name'])] as $childOneData)
+{{--                            <ul class="hs-accordion-group pl-3 pt-2" data-hs-accordion-always-open>--}}
+{{--                                <x-layout.sidebar.child-one :id="$parent['name'].'-accordion-sub-1'" :childCount="count($sideBarChildOne[lcfirst($parent['name'])])" :name="ucfirst($childOneData[$parent['name']]['name'])">--}}
 
-                                    <svg
-                                        class="hs-accordion-active:block ml-auto hidden w-3 h-3 text-slate-600 group-hover:text-slate-500 dark:text-slate-400"
-                                        width="16" height="16" viewBox="0 0 16 16" fill="none"
-                                        xmlns="http://www.w3.org/2000/svg">
-                                        <path
-                                            d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11"
-                                            stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
-                                    </svg>
+{{--                                </x-layout.sidebar.child-one>--}}
+{{--                            </ul>--}}
+                            @endforeach
+                            @endif
+                    </x-layout.sidebar.child-one>
+                    @endif
+{{--                {{   dd(array_key_exists(lcfirst($parent['name']), $sideBarChildOne)) }}--}}
+{{--                {{   dd(array_key_exists('parent', $sideBarChildOne[lcfirst($parent['name'])])) }}--}}
 
-                                    <svg
-                                        class="hs-accordion-active:hidden ml-auto block w-3 h-3 text-slate-600 group-hover:text-slate-500 dark:text-slate-400"
-                                        width="16" height="16" viewBox="0 0 16 16" fill="none"
-                                        xmlns="http://www.w3.org/2000/svg">
-                                        <path
-                                            d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5"
-                                            stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
-                                    </svg>
-                                </a>
+{{--                <x-layout.sidebar.child-one :id="$parent.'-accordion'" :childCount="count($parentData)" :name="'Users'">--}}
+{{--                    @if(count($childOneData) > 0)--}}
+{{--                        @foreach($parentData as $childOne=>$childOneData)--}}
+{{--                            <ul class="hs-accordion-group pl-3 pt-2" data-hs-accordion-always-open>--}}
+{{--                                <x-layout.sidebar.child-one :id="$parent.'-accordion-sub-1'"--}}
+{{--                                                            :childCount="count($childOneData)" :name="$childOne">--}}
+{{--                                    <x-layout.sidebar.child-two :links="$childOneData"></x-layout.sidebar.child-two>--}}
+{{--                                </x-layout.sidebar.child-one>--}}
+{{--                            </ul>--}}
+{{--                        @endforeach--}}
+{{--                    @endif--}}
+{{--                </x-layout.sidebar.child-one>--}}
 
-                                <div id="users-accordion-sub-1"
-                                     class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300 hidden">
-                                    <ul class="pt-2 pl-2">
-                                        <li>
-                                            <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-oblue-500"
-                                               href="javascript:;">
-                                                Link 1
-                                            </a>
-                                        </li>
-                                        <li>
-                                            <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-oblue-500"
-                                               href="javascript:;">
-                                                Link 2
-                                            </a>
-                                        </li>
-                                        <li>
-                                            <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-oblue-500"
-                                               href="javascript:;">
-                                                Link 3
-                                            </a>
-                                        </li>
-                                    </ul>
-                                </div>
-                            </li>
-                            <li class="hs-accordion" id="users-accordion-sub-2">
-                                <a class="hs-accordion-toggle flex items-center gap-x-3.5 py-2 px-2.5 hs-accordion-active:text-blue-600 hs-accordion-active:hover:bg-transparent text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:hover:bg-oblue-500 dark:text-slate-400 dark:hover:bg-oblue-500 dark:hs-accordion-active:text-white"
-                                   href="javascript:;">
-                                    Sub Menu 2
+            @endforeach
+{{--            <x-layout.sidebar.child-one :id="'users-accordion'" :name="'Users'">--}}
+{{--                <ul class="hs-accordion-group pl-3 pt-2" data-hs-accordion-always-open>--}}
+{{--                    <x-layout.sidebar.child-one :id="'users-accordion-sub-1'" :name="'Data'">--}}
+{{--                        <x-layout.sidebar.child-two :links="['data1', 'data2']"></x-layout.sidebar.child-two>--}}
+{{--                    </x-layout.sidebar.child-one>--}}
+{{--                </ul>--}}
+{{--            </x-layout.sidebar.child-one>--}}
 
-                                    <svg
-                                        class="hs-accordion-active:block ml-auto hidden w-3 h-3 text-slate-600 group-hover:text-slate-500 dark:text-slate-400"
-                                        width="16" height="16" viewBox="0 0 16 16" fill="none"
-                                        xmlns="http://www.w3.org/2000/svg">
-                                        <path
-                                            d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11"
-                                            stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
-                                    </svg>
 
-                                    <svg
-                                        class="hs-accordion-active:hidden ml-auto block w-3 h-3 text-slate-600 group-hover:text-slate-500 dark:text-slate-400"
-                                        width="16" height="16" viewBox="0 0 16 16" fill="none"
-                                        xmlns="http://www.w3.org/2000/svg">
-                                        <path
-                                            d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5"
-                                            stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
-                                    </svg>
-                                </a>
+            <li class="hs-accordion" id="users-accordion">
+                <a class="hs-accordion-toggle flex items-center gap-x-3.5 py-2 px-2.5 hs-accordion-active:text-blue-600 hs-accordion-active:hover:bg-transparent text-sm text-slate-700 rounded-md hover:bg-slate-100  dark:hover:bg-oblue-500 dark:text-slate-400 dark:hover:bg-oblue-500 dark:hs-accordion-active:text-white"
+                   href="javascript:;">
+                    <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+                         fill="currentColor" viewBox="0 0 16 16">
+                        <path
+                            d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816zM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275zM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"></path>
+                    </svg>
+                    Users
 
-                                <div id="users-accordion-sub-2"
-                                     class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300 hidden pl-2">
-                                    <ul class="pt-2 pl-2">
-                                        <li>
-                                            <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-oblue-500"
-                                               href="javascript:;">
-                                                Link 1
-                                            </a>
-                                        </li>
-                                        <li>
-                                            <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-oblue-500"
-                                               href="javascript:;">
-                                                Link 2
-                                            </a>
-                                        </li>
-                                        <li>
-                                            <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-oblue-500"
-                                               href="javascript:;">
-                                                Link 3
-                                            </a>
-                                        </li>
-                                    </ul>
-                                </div>
-                            </li>
-                        </ul>
-                    </div>
-                </li>
+                    <x-layout.sidebar.arrow-direction></x-layout.sidebar.arrow-direction>
+                </a>
 
-                <li class="hs-accordion" id="account-accordion">
-                    <a class="hs-accordion-toggle flex items-center gap-x-3.5 py-2 px-2.5 hs-accordion-active:text-blue-600 hs-accordion-active:hover:bg-transparent text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:hover:bg-oblue-500 dark:text-slate-400 dark:hover:bg-oblue-500 dark:hs-accordion-active:text-white"
-                       href="javascript:;">
-                        <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
-                             fill="currentColor" viewBox="0 0 16 16">
-                            <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
-                            <path fill-rule="evenodd"
-                                  d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
-                        </svg>
-                        Account
+                <div id="users-accordion"
+                     class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300 hidden">
+                    <ul class="hs-accordion-group pl-3 pt-2" data-hs-accordion-always-open>
+                        <li class="hs-accordion" id="users-accordion-sub-1">
+                            <a class="hs-accordion-toggle flex items-center gap-x-3.5 py-2 px-2.5 hs-accordion-active:text-blue-600 hs-accordion-active:hover:bg-transparent text-sm text-slate-700 rounded-md hover:bg-slate-100  dark:hover:bg-oblue-500 dark:text-slate-400 dark:hover:bg-oblue-500 dark:hs-accordion-active:text-white"
+                               href="javascript:;">
+                                Sub Menu 1
 
-                        <svg
-                            class="hs-accordion-active:block ml-auto hidden w-3 h-3 text-slate-600 group-hover:text-slate-500 dark:text-slate-400"
-                            width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <path d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11"
-                                  stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
-                        </svg>
+                                <x-layout.sidebar.arrow-direction></x-layout.sidebar.arrow-direction>
+                            </a>
 
-                        <svg
-                            class="hs-accordion-active:hidden ml-auto block w-3 h-3 text-slate-600 group-hover:text-slate-500 dark:text-slate-400"
-                            width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5"
-                                  stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
-                        </svg>
-                    </a>
+                            <div id="users-accordion-sub-1"
+                                 class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300 hidden">
+                                <ul class="pt-2 pl-2">
+                                    <li>
+                                        <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-oblue-500"
+                                           href="javascript:;">
+                                            Link 1
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-oblue-500"
+                                           href="javascript:;">
+                                            Link 2
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-oblue-500"
+                                           href="javascript:;">
+                                            Link 3
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </li>
+                        <li class="hs-accordion" id="users-accordion-sub-2">
+                            <a class="hs-accordion-toggle flex items-center gap-x-3.5 py-2 px-2.5 hs-accordion-active:text-blue-600 hs-accordion-active:hover:bg-transparent text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:hover:bg-oblue-500 dark:text-slate-400 dark:hover:bg-oblue-500 dark:hs-accordion-active:text-white"
+                               href="javascript:;">
+                                Sub Menu 2
 
-                    <div id="account-accordion"
-                         class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300 hidden">
-                        <ul class="pt-2 pl-2">
-                            <li>
-                                <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-oblue-500"
-                                   href="javascript:;">
-                                    Link 1
-                                </a>
-                            </li>
-                            <li>
-                                <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-oblue-500"
-                                   href="javascript:;">
-                                    Link 2
-                                </a>
-                            </li>
-                            <li>
-                                <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-oblue-500"
-                                   href="javascript:;">
-                                    Link 3
-                                </a>
-                            </li>
-                        </ul>
-                    </div>
-                </li>
+                                <x-layout.sidebar.arrow-direction></x-layout.sidebar.arrow-direction>
+                            </a>
 
-                <li class="hs-accordion" id="projects-accordion">
-                    <a class="hs-accordion-toggle flex items-center gap-x-3.5 py-2 px-2.5 hs-accordion-active:text-blue-600 hs-accordion-active:hover:bg-transparent text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:hover:bg-oblue-500 dark:text-slate-400 dark:hover:bg-oblue-500 dark:hs-accordion-active:text-white"
-                       href="javascript:;">
-                        <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
-                             fill="currentColor" viewBox="0 0 16 16">
-                            <path
-                                d="M1.5 0A1.5 1.5 0 0 0 0 1.5V13a1 1 0 0 0 1 1V1.5a.5.5 0 0 1 .5-.5H14a1 1 0 0 0-1-1H1.5z"></path>
-                            <path
-                                d="M3.5 2A1.5 1.5 0 0 0 2 3.5v11A1.5 1.5 0 0 0 3.5 16h6.086a1.5 1.5 0 0 0 1.06-.44l4.915-4.914A1.5 1.5 0 0 0 16 9.586V3.5A1.5 1.5 0 0 0 14.5 2h-11zM3 3.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 .5.5V9h-4.5A1.5 1.5 0 0 0 9 10.5V15H3.5a.5.5 0 0 1-.5-.5v-11zm7 11.293V10.5a.5.5 0 0 1 .5-.5h4.293L10 14.793z"></path>
-                        </svg>
-                        Projects
+                            <div id="users-accordion-sub-2"
+                                 class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300 hidden pl-2">
+                                <ul class="pt-2 pl-2">
+                                    <li>
+                                        <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-oblue-500"
+                                           href="javascript:;">
+                                            Link 1
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-oblue-500"
+                                           href="javascript:;">
+                                            Link 2
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-oblue-500"
+                                           href="javascript:;">
+                                            Link 3
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+            </li>
 
-                        <svg
-                            class="hs-accordion-active:block ml-auto hidden w-3 h-3 text-slate-600 group-hover:text-slate-500 dark:text-slate-400"
-                            width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <path d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11"
-                                  stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
-                        </svg>
+            <li class="hs-accordion" id="account-accordion">
+                <a class="hs-accordion-toggle flex items-center gap-x-3.5 py-2 px-2.5 hs-accordion-active:text-blue-600 hs-accordion-active:hover:bg-transparent text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:hover:bg-oblue-500 dark:text-slate-400 dark:hover:bg-oblue-500 dark:hs-accordion-active:text-white"
+                   href="javascript:;">
+                    <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+                         fill="currentColor" viewBox="0 0 16 16">
+                        <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
+                        <path fill-rule="evenodd"
+                              d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
+                    </svg>
+                    Account
 
-                        <svg
-                            class="hs-accordion-active:hidden ml-auto block w-3 h-3 text-slate-600 group-hover:text-slate-500 dark:text-slate-400"
-                            width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5"
-                                  stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
-                        </svg>
-                    </a>
+                    <x-layout.sidebar.arrow-direction></x-layout.sidebar.arrow-direction>
+                </a>
 
-                    <div id="projects-accordion"
-                         class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300 hidden">
-                        <ul class="pt-2 pl-2">
-                            <li>
-                                <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-oblue-500"
-                                   href="javascript:;">
-                                    Link 1
-                                </a>
-                            </li>
-                            <li>
-                                <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-oblue-500"
-                                   href="javascript:;">
-                                    Link 2
-                                </a>
-                            </li>
-                            <li>
-                                <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-oblue-500"
-                                   href="javascript:;">
-                                    Link 3
-                                </a>
-                            </li>
-                        </ul>
-                    </div>
-                </li>
+                <div id="account-accordion"
+                     class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300 hidden">
+                    <ul class="pt-2 pl-2">
+                        <li>
+                            <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-oblue-500"
+                               href="javascript:;">
+                                Link 1
+                            </a>
+                        </li>
+                        <li>
+                            <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-oblue-500"
+                               href="javascript:;">
+                                Link 2
+                            </a>
+                        </li>
+                        <li>
+                            <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-oblue-500"
+                               href="javascript:;">
+                                Link 3
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </li>
 
-                <li>
-                    <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:hover:bg-oblue-500 dark:text-slate-400 dark:hover:bg-oblue-500"
-                       href="javascript:;">
-                        <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
-                             fill="currentColor" viewBox="0 0 16 16">
-                            <path
-                                d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-5 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/>
-                            <path
-                                d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
-                        </svg>
-                        Calendar
-                    </a></li>
-                <li>
-                    <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:hover:bg-oblue-500 dark:text-slate-400 dark:hover:bg-oblue-500"
-                       href="javascript:;">
-                        <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
-                             fill="currentColor" viewBox="0 0 16 16">
-                            <path
-                                d="M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811V2.828zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/>
-                        </svg>
-                        Documentation
-                    </a></li>
-            </ul>
-        </nav>
+            <li class="hs-accordion" id="projects-accordion">
+                <a class="hs-accordion-toggle flex items-center gap-x-3.5 py-2 px-2.5 hs-accordion-active:text-blue-600 hs-accordion-active:hover:bg-transparent text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:hover:bg-oblue-500 dark:text-slate-400 dark:hover:bg-oblue-500 dark:hs-accordion-active:text-white"
+                   href="javascript:;">
+                    <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+                         fill="currentColor" viewBox="0 0 16 16">
+                        <path
+                            d="M1.5 0A1.5 1.5 0 0 0 0 1.5V13a1 1 0 0 0 1 1V1.5a.5.5 0 0 1 .5-.5H14a1 1 0 0 0-1-1H1.5z"></path>
+                        <path
+                            d="M3.5 2A1.5 1.5 0 0 0 2 3.5v11A1.5 1.5 0 0 0 3.5 16h6.086a1.5 1.5 0 0 0 1.06-.44l4.915-4.914A1.5 1.5 0 0 0 16 9.586V3.5A1.5 1.5 0 0 0 14.5 2h-11zM3 3.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 .5.5V9h-4.5A1.5 1.5 0 0 0 9 10.5V15H3.5a.5.5 0 0 1-.5-.5v-11zm7 11.293V10.5a.5.5 0 0 1 .5-.5h4.293L10 14.793z"></path>
+                    </svg>
+                    Projects
+
+                    <x-layout.sidebar.arrow-direction></x-layout.sidebar.arrow-direction>
+                </a>
+
+                <div id="projects-accordion"
+                     class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300 hidden">
+                    <ul class="pt-2 pl-2">
+                        <li>
+                            <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-oblue-500"
+                               href="javascript:;">
+                                Link 1
+                            </a>
+                        </li>
+                        <li>
+                            <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-oblue-500"
+                               href="javascript:;">
+                                Link 2
+                            </a>
+                        </li>
+                        <li>
+                            <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-oblue-500"
+                               href="javascript:;">
+                                Link 3
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </li>
+
+            <li>
+                <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:hover:bg-oblue-500 dark:text-slate-400 dark:hover:bg-oblue-500"
+                   href="javascript:;">
+                    <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+                         fill="currentColor" viewBox="0 0 16 16">
+                        <path
+                            d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-5 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/>
+                        <path
+                            d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
+                    </svg>
+                    Calendar
+                </a></li>
+            <li>
+                <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:hover:bg-oblue-500 dark:text-slate-400 dark:hover:bg-oblue-500"
+                   href="javascript:;">
+                    <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+                         fill="currentColor" viewBox="0 0 16 16">
+                        <path
+                            d="M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811V2.828zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/>
+                    </svg>
+                    Documentation
+                </a></li>
+        </x-layout.sidebar.parent>
     </div>
     <!-- End Sidebar -->
 
diff --git a/routes/admin.php b/routes/admin.php
index 65a8a55..6d14de7 100644
--- a/routes/admin.php
+++ b/routes/admin.php
@@ -56,7 +56,9 @@
     ], function () {
         Route::get('/dashboard', \App\Http\Livewire\Admin\Dashboard::class)->name('dashboard');
 
-        Route::get('/profile', [\App\Http\Controllers\Livewire\AdminProfileController::class, 'show'])->name('profile.show');
+        Route::get('/profile', \App\Http\Livewire\Admin\Profile::class)->name('profile.show');
+        Route::get('/menu', \App\Http\Livewire\Admin\Menu::class)->name('menu');
+
         Route::put('/profile-information', [\App\Actions\Fortify\Controllers\ProfileInformationController::class, 'update'])->name('user-profile-information.update');
         Route::post('/admin/two-factor-authentication', [TwoFactorAuthenticationController::class, 'store'])->name('two-factor.enable');
         Route::post('/admin/confirmed-two-factor-authentication', [ConfirmedTwoFactorAuthenticationController::class, 'store'])->name('two-factor.confirm');

From c72a9a11ce6765bcaa2f3dc016984ab75cc531b1 Mon Sep 17 00:00:00 2001
From: Amir <amirhussain@outlook.com>
Date: Wed, 9 Nov 2022 23:11:07 +0400
Subject: [PATCH 3/3] Adding Preline Button, Modal Components with Menu table
 database

---
 app/Http/Livewire/Admin/Menu.php              |  14 +++
 app/Http/Livewire/Admin/Profile.php           |  22 ++++
 app/Models/Menu.php                           |  11 ++
 app/View/Components/Item/Button.php           |  28 +++++
 app/View/Components/Item/Modal.php            |  28 +++++
 .../Layout/Sidebar/ArrowDirection.php         |  28 +++++
 .../Components/Layout/Sidebar/ChildOne.php    |  29 +++++
 .../Components/Layout/Sidebar/ChildTwo.php    |  28 +++++
 app/View/Components/Layout/Sidebar/SubOne.php |  28 +++++
 app/View/Components/Svg/Add.php               |  28 +++++
 app/View/Components/Svg/Home.php              |  28 +++++
 app/View/Components/Svg/Menu.php              |  28 +++++
 app/View/Components/Svg/Users.php             |  28 +++++
 .../2022_11_09_085026_create_menus_table.php  |  33 +++++
 .../views/components/item/button.blade.php    |  26 ++++
 .../views/components/item/modal.blade.php     | 115 ++++++++++++++++++
 .../layout/sidebar/arrow-direction.blade.php  |  17 +++
 .../layout/sidebar/child-one.blade.php        |  54 ++++++++
 .../layout/sidebar/child-two.blade.php        |  13 ++
 .../layout/sidebar/parent.blade.php           |   5 +
 resources/views/components/svg/add.blade.php  |   3 +
 resources/views/components/svg/home.blade.php |   7 ++
 resources/views/components/svg/menu.blade.php |   4 +
 .../views/components/svg/users.blade.php      |   5 +
 resources/views/livewire/admin/menu.blade.php |  13 ++
 .../views/livewire/admin/profile.blade.php    |  63 ++++++++++
 26 files changed, 686 insertions(+)
 create mode 100644 app/Http/Livewire/Admin/Menu.php
 create mode 100644 app/Http/Livewire/Admin/Profile.php
 create mode 100644 app/Models/Menu.php
 create mode 100644 app/View/Components/Item/Button.php
 create mode 100644 app/View/Components/Item/Modal.php
 create mode 100644 app/View/Components/Layout/Sidebar/ArrowDirection.php
 create mode 100644 app/View/Components/Layout/Sidebar/ChildOne.php
 create mode 100644 app/View/Components/Layout/Sidebar/ChildTwo.php
 create mode 100644 app/View/Components/Layout/Sidebar/SubOne.php
 create mode 100644 app/View/Components/Svg/Add.php
 create mode 100644 app/View/Components/Svg/Home.php
 create mode 100644 app/View/Components/Svg/Menu.php
 create mode 100644 app/View/Components/Svg/Users.php
 create mode 100644 database/migrations/2022_11_09_085026_create_menus_table.php
 create mode 100644 resources/views/components/item/button.blade.php
 create mode 100644 resources/views/components/item/modal.blade.php
 create mode 100644 resources/views/components/layout/sidebar/arrow-direction.blade.php
 create mode 100644 resources/views/components/layout/sidebar/child-one.blade.php
 create mode 100644 resources/views/components/layout/sidebar/child-two.blade.php
 create mode 100644 resources/views/components/layout/sidebar/parent.blade.php
 create mode 100644 resources/views/components/svg/add.blade.php
 create mode 100644 resources/views/components/svg/home.blade.php
 create mode 100644 resources/views/components/svg/menu.blade.php
 create mode 100644 resources/views/components/svg/users.blade.php
 create mode 100644 resources/views/livewire/admin/menu.blade.php
 create mode 100644 resources/views/livewire/admin/profile.blade.php

diff --git a/app/Http/Livewire/Admin/Menu.php b/app/Http/Livewire/Admin/Menu.php
new file mode 100644
index 0000000..18c9b94
--- /dev/null
+++ b/app/Http/Livewire/Admin/Menu.php
@@ -0,0 +1,14 @@
+<?php
+
+namespace App\Http\Livewire\Admin;
+
+use Livewire\Component;
+
+class Menu extends Component
+{
+    public string $pageHeader='Menu';
+    public function render()
+    {
+        return view('livewire.admin.menu',['pageHeader'=>$this->pageHeader]);
+    }
+}
diff --git a/app/Http/Livewire/Admin/Profile.php b/app/Http/Livewire/Admin/Profile.php
new file mode 100644
index 0000000..0c914b4
--- /dev/null
+++ b/app/Http/Livewire/Admin/Profile.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Http\Livewire\Admin;
+
+use Illuminate\Http\Request;
+use Livewire\Component;
+
+class Profile extends Component
+{
+    public $pageHeader='Profile';
+
+
+
+    public function render(Request $request)
+    {
+        return view('livewire.admin.profile',[
+            'pageHeader'=>$this->pageHeader,
+            'request' => $request,
+            'user' => $request->user()
+        ]);
+    }
+}
diff --git a/app/Models/Menu.php b/app/Models/Menu.php
new file mode 100644
index 0000000..17f7ad2
--- /dev/null
+++ b/app/Models/Menu.php
@@ -0,0 +1,11 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class Menu extends Model
+{
+    use HasFactory;
+}
diff --git a/app/View/Components/Item/Button.php b/app/View/Components/Item/Button.php
new file mode 100644
index 0000000..8907c3d
--- /dev/null
+++ b/app/View/Components/Item/Button.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\View\Components\Item;
+
+use Illuminate\View\Component;
+
+class Button extends Component
+{
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('components.item.button');
+    }
+}
diff --git a/app/View/Components/Item/Modal.php b/app/View/Components/Item/Modal.php
new file mode 100644
index 0000000..d81ee8d
--- /dev/null
+++ b/app/View/Components/Item/Modal.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\View\Components\Item;
+
+use Illuminate\View\Component;
+
+class Modal extends Component
+{
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('components.item.modal');
+    }
+}
diff --git a/app/View/Components/Layout/Sidebar/ArrowDirection.php b/app/View/Components/Layout/Sidebar/ArrowDirection.php
new file mode 100644
index 0000000..63476e1
--- /dev/null
+++ b/app/View/Components/Layout/Sidebar/ArrowDirection.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\View\Components\Layout\Sidebar;
+
+use Illuminate\View\Component;
+
+class ArrowDirection extends Component
+{
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('components.layout.sidebar.arrow-direction');
+    }
+}
diff --git a/app/View/Components/Layout/Sidebar/ChildOne.php b/app/View/Components/Layout/Sidebar/ChildOne.php
new file mode 100644
index 0000000..4561623
--- /dev/null
+++ b/app/View/Components/Layout/Sidebar/ChildOne.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace App\View\Components\Layout\Sidebar;
+
+use Illuminate\View\Component;
+
+class ChildOne extends Component
+{
+    public $links;
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct($links=[])
+    {
+       $this->links=$links;
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('components.layout.sidebar.child-one',['links'=>$this->links]);
+    }
+}
diff --git a/app/View/Components/Layout/Sidebar/ChildTwo.php b/app/View/Components/Layout/Sidebar/ChildTwo.php
new file mode 100644
index 0000000..c021a85
--- /dev/null
+++ b/app/View/Components/Layout/Sidebar/ChildTwo.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\View\Components\Layout\Sidebar;
+
+use Illuminate\View\Component;
+
+class ChildTwo extends Component
+{
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('components.layout.sidebar.child-two');
+    }
+}
diff --git a/app/View/Components/Layout/Sidebar/SubOne.php b/app/View/Components/Layout/Sidebar/SubOne.php
new file mode 100644
index 0000000..8a88533
--- /dev/null
+++ b/app/View/Components/Layout/Sidebar/SubOne.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\View\Components\Layout\Sidebar;
+
+use Illuminate\View\Component;
+
+class SubOne extends Component
+{
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('components.layout.sidebar.sub-one');
+    }
+}
diff --git a/app/View/Components/Svg/Add.php b/app/View/Components/Svg/Add.php
new file mode 100644
index 0000000..d701539
--- /dev/null
+++ b/app/View/Components/Svg/Add.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\View\Components\Svg;
+
+use Illuminate\View\Component;
+
+class Add extends Component
+{
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('components.svg.add');
+    }
+}
diff --git a/app/View/Components/Svg/Home.php b/app/View/Components/Svg/Home.php
new file mode 100644
index 0000000..384fb1d
--- /dev/null
+++ b/app/View/Components/Svg/Home.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\View\Components\Svg;
+
+use Illuminate\View\Component;
+
+class Home extends Component
+{
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('components.svg.home');
+    }
+}
diff --git a/app/View/Components/Svg/Menu.php b/app/View/Components/Svg/Menu.php
new file mode 100644
index 0000000..8dbb2d2
--- /dev/null
+++ b/app/View/Components/Svg/Menu.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\View\Components\Svg;
+
+use Illuminate\View\Component;
+
+class Menu extends Component
+{
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('components.svg.menu');
+    }
+}
diff --git a/app/View/Components/Svg/Users.php b/app/View/Components/Svg/Users.php
new file mode 100644
index 0000000..c8bc09f
--- /dev/null
+++ b/app/View/Components/Svg/Users.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\View\Components\Svg;
+
+use Illuminate\View\Component;
+
+class Users extends Component
+{
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('components.svg.users');
+    }
+}
diff --git a/database/migrations/2022_11_09_085026_create_menus_table.php b/database/migrations/2022_11_09_085026_create_menus_table.php
new file mode 100644
index 0000000..d374a72
--- /dev/null
+++ b/database/migrations/2022_11_09_085026_create_menus_table.php
@@ -0,0 +1,33 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('menus', function (Blueprint $table) {
+            $table->id();
+            $table->string('name')->unique();
+            $table->string('svg')->unique()->nullable();
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('menus');
+    }
+};
diff --git a/resources/views/components/item/button.blade.php b/resources/views/components/item/button.blade.php
new file mode 100644
index 0000000..ac254e5
--- /dev/null
+++ b/resources/views/components/item/button.blade.php
@@ -0,0 +1,26 @@
+@props(['size'=>'default'])
+@switch($size)
+    @case('small')
+    <button type="button" {{ $attributes->merge(['class' => 'rounded-full py-2 px-3 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-blue-500 text-white
+            hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800']) }} >
+       <span class="flex justify-center items-center">  {{$slot}} </span>
+    </button>
+    @break
+
+    @case('default')
+    <button type="button" {{ $attributes->merge(['class' => 'py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-blue-500 text-white
+        hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800']) }}>
+        {{$slot}}
+    </button>
+    @break
+
+    @case('large')
+    <button type="button" {{ $attributes->merge(['class' => 'py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-blue-500 text-white
+        hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm sm:p-5 dark:focus:ring-offset-gray-800']) }}>
+        {{$slot}}
+    </button>
+    @break
+@endswitch
+
+
+
diff --git a/resources/views/components/item/modal.blade.php b/resources/views/components/item/modal.blade.php
new file mode 100644
index 0000000..31e5d74
--- /dev/null
+++ b/resources/views/components/item/modal.blade.php
@@ -0,0 +1,115 @@
+@props(['type','buttonName'=>'Give some name', 'modalHeader'=>'Give a header'])
+<x-item.button @click.prevent="isFirstModelButtonClicked = true" size="small">
+    @switch($type)
+        @case('add')
+        <x-svg.add class="flex w-4 h-4"></x-svg.add>
+        @break
+
+        @case('update')
+        <x-svg.add class="flex w-4 h-4"></x-svg.add>
+        @break
+
+        @case('delete')
+        <x-svg.add class="flex w-4 h-4"></x-svg.add>
+        @break
+    @endswitch
+
+    <span class="flex ml-1">{{__($buttonName)}}</span>
+</x-item.button>
+
+
+<div id="hs-vertically-centered-scrollable-modal"
+     class="hs-overlay  transition-all duration-300 opacity-0 w-full h-full fixed top-0 left-0 z-[80] overflow-x-hidden overflow-y-auto ustify-center items-center"
+     :class="{ 'block opacity-100 transition-all duration-300': isFirstModelButtonClicked === true, ' opacity-0 transition-all duration-300 hidden': isFirstModelButtonClicked===false  }"
+>
+    <div
+        class=" opacity-0 sm:max-w-lg sm:w-full m-3 sm:mx-auto h-[calc(100%-3.5rem)] min-h-[calc(100%-3.5rem)] flex items-center"
+        :class="{ '!flex transition-all duration-300 opacity-100 ': isFirstModelButtonClicked===true }"
+    >
+        <div
+            class="max-h-full overflow-hidden flex flex-col bg-white border shadow-sm rounded-xl dark:bg-oblue-300 dark:border-oblue-100 dark:shadow-olblue-900/[.5]">
+            <div class="flex justify-between items-center py-3 px-4 border-b dark:border-olblue-800">
+                <h3 class="flex justify-start items-center font-bold text-gray-800 dark:text-white">
+                    @switch($type)
+                        @case('add')
+                        <x-svg.add class="flex w-5 h-5"></x-svg.add>
+                        @break
+
+                        @case('update')
+                        <x-svg.add class="flex w-5 h-5"></x-svg.add>
+                        @break
+
+                        @case('delete')
+                        <x-svg.add class="flex w-5 h-5"></x-svg.add>
+                        @break
+                    @endswitch
+
+                    <span class="flex ml-1">{{$modalHeader}}</span>
+
+                </h3>
+                <button @click.prevent="isFirstModelButtonClicked = false" type="button"
+                        class="inline-flex flex-shrink-0 justify-center items-center h-8 w-8 rounded-md text-gray-500 hover:text-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-white transition-all text-sm dark:focus:ring-gray-700 dark:focus:ring-offset-gray-800">
+                    <span class="sr-only">Close</span>
+                    <svg class="w-3.5 h-3.5" width="8" height="8" viewBox="0 0 8 8" fill="none"
+                         xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z"
+                            fill="currentColor"/>
+                    </svg>
+                </button>
+            </div>
+            <div class="p-4 overflow-y-auto">
+                <div class="space-y-4">
+                    <div>
+                        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Be bold</h3>
+                        <p class="mt-1 text-gray-800 dark:text-gray-400">
+                            Motivate teams to do their best work. Offer best practices to get users going in the right
+                            direction. Be bold and offer just enough help to get the work started, and then get out of
+                            the way. Give accurate information so users can make educated decisions. Know your user's
+                            struggles and desired outcomes and give just enough information to let them get where they
+                            need to go.
+                        </p>
+                    </div>
+
+                    <div>
+                        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Be optimistic</h3>
+                        <p class="mt-1 text-gray-800 dark:text-gray-400">
+                            Focusing on the details gives people confidence in our products. Weave a consistent story
+                            across our fabric and be diligent about vocabulary across all messaging by being brand
+                            conscious across products to create a seamless flow across all the things. Let people know
+                            that they can jump in and start working expecting to find a dependable experience across all
+                            the things. Keep teams in the loop about what is happening by informing them of relevant
+                            features, products and opportunities for success. Be on the journey with them and highlight
+                            the key points that will help them the most - right now. Be in the moment by focusing
+                            attention on the important bits first.
+                        </p>
+                    </div>
+
+                    <div>
+                        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Be practical, with a wink</h3>
+                        <p class="mt-1 text-gray-800 dark:text-gray-400">
+                            Keep our own story short and give teams just enough to get moving. Get to the point and be
+                            direct. Be concise - we tell the story of how we can help, but we do it directly and with
+                            purpose. Be on the lookout for opportunities and be quick to offer a helping hand. At the
+                            same time realize that novbody likes a nosy neighbor. Give the user just enough to know that
+                            something awesome is around the corner and then get out of the way. Write clear, accurate,
+                            and concise text that makes interfaces more usable and consistent - and builds trust. We
+                            strive to write text that is understandable by anyone, anywhere, regardless of their culture
+                            or language so that everyone feels they are part of the team.
+                        </p>
+                    </div>
+                </div>
+            </div>
+            <div class="flex justify-end items-center gap-x-2 py-3 px-4 border-t dark:border-gray-700">
+                <button @click.prevent="isFirstModelButtonClicked = false" type="button"
+                        class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm dark:bg-gray-800 dark:hover:bg-slate-800 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white dark:focus:ring-offset-gray-800">
+                    Close
+                </button>
+                <a class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800"
+                   href="#">
+                    Save changes
+                </a>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/resources/views/components/layout/sidebar/arrow-direction.blade.php b/resources/views/components/layout/sidebar/arrow-direction.blade.php
new file mode 100644
index 0000000..bcfeb73
--- /dev/null
+++ b/resources/views/components/layout/sidebar/arrow-direction.blade.php
@@ -0,0 +1,17 @@
+    <svg
+        class="hs-accordion-active:block ml-auto hidden w-3 h-3 text-slate-600 group-hover:text-slate-500 dark:text-slate-400"
+        width="16" height="16" viewBox="0 0 16 16" fill="none"
+        xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11"
+            stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
+    </svg>
+
+    <svg
+        class="hs-accordion-active:hidden ml-auto block w-3 h-3 text-slate-600 group-hover:text-slate-500 dark:text-slate-400"
+        width="16" height="16" viewBox="0 0 16 16" fill="none"
+        xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5"
+            stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
+    </svg>
diff --git a/resources/views/components/layout/sidebar/child-one.blade.php b/resources/views/components/layout/sidebar/child-one.blade.php
new file mode 100644
index 0000000..95b577c
--- /dev/null
+++ b/resources/views/components/layout/sidebar/child-one.blade.php
@@ -0,0 +1,54 @@
+@props(['id'=>null, 'name'=>null , 'childCount'=>0])
+@if($id != null)
+    <li class="hs-accordion" id="{{$id}}">
+        <a {{ $attributes->merge(['class' => 'hs-accordion-toggle cursor-pointer flex items-center gap-x-3.5 py-2 px-2.5 hs-accordion-active:text-blue-600 hs-accordion-active:hover:bg-transparent text-sm text-slate-700
+rounded-md hover:bg-slate-100  dark:hover:bg-oblue-500 dark:text-slate-400 dark:hover:bg-oblue-500 dark:hs-accordion-active:text-white']) }} >
+            @switch($name)
+                @case('Users')
+                <x-svg.users></x-svg.users>
+                {{ __($name) }}
+                @break
+
+{{--                @case('Menu')--}}
+{{--                <x-svg.menu></x-svg.menu>--}}
+{{--                {{ __($name) }}--}}
+{{--                @break--}}
+
+                @default
+                {{ __($name) }}
+                @break
+            @endswitch
+            @if($childCount > 0) <x-layout.sidebar.arrow-direction></x-layout.sidebar.arrow-direction> @endif
+        </a>
+        <div id="{{$id}}"
+             class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300 hidden">
+            {{$slot}}
+        </div>
+    </li>
+@else
+    <li>
+        <a {{ $attributes->merge(['class' => 'flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:hover:bg-oblue-500 dark:text-slate-400 dark:hover:bg-oblue-500']) }} href="route($href)">
+            @switch($name)
+                @case('Dashboard')
+                <x-svg.home></x-svg.home>
+                {{ __($name) }}
+                @break
+
+                @case('Users')
+                <x-svg.users></x-svg.users>
+                {{ __($name) }}
+                @break
+
+                @case('Menu')
+                <x-svg.menu></x-svg.menu>
+                {{ __($name) }}
+                @break
+
+                @default
+                {{ __($name) }}
+                @break
+            @endswitch
+        </a>
+    </li>
+@endif
+
diff --git a/resources/views/components/layout/sidebar/child-two.blade.php b/resources/views/components/layout/sidebar/child-two.blade.php
new file mode 100644
index 0000000..094f4a0
--- /dev/null
+++ b/resources/views/components/layout/sidebar/child-two.blade.php
@@ -0,0 +1,13 @@
+@props(['links'=>[]])
+@if(count($links) > 0)
+<ul class="pt-2 pl-2">
+    @foreach($links as $link)
+    <li>
+        <a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-oblue-500"
+           href="javascript:;">
+            {{$link}}
+        </a>
+    </li>
+    @endforeach
+</ul>
+    @endif
diff --git a/resources/views/components/layout/sidebar/parent.blade.php b/resources/views/components/layout/sidebar/parent.blade.php
new file mode 100644
index 0000000..3425cfe
--- /dev/null
+++ b/resources/views/components/layout/sidebar/parent.blade.php
@@ -0,0 +1,5 @@
+<nav x-data="{ active:false }" class="hs-accordion-group p-6 w-full flex flex-col flex-wrap" data-hs-accordion-always-open>
+    <ul class="space-y-1.5">
+        {{$slot}}
+    </ul>
+</nav>
diff --git a/resources/views/components/svg/add.blade.php b/resources/views/components/svg/add.blade.php
new file mode 100644
index 0000000..960bac6
--- /dev/null
+++ b/resources/views/components/svg/add.blade.php
@@ -0,0 +1,3 @@
+<svg {{ $attributes->merge(['class' => 'flex-none']) }} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" >
+    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+</svg>
diff --git a/resources/views/components/svg/home.blade.php b/resources/views/components/svg/home.blade.php
new file mode 100644
index 0000000..7a53887
--- /dev/null
+++ b/resources/views/components/svg/home.blade.php
@@ -0,0 +1,7 @@
+<svg {{ $attributes->merge(['class' => 'flex-none']) }} xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+     fill="currentColor" viewBox="0 0 16 16">
+    <path fill-rule="evenodd"
+          d="M2 13.5V7h1v6.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5V7h1v6.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5zm11-11V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
+    <path fill-rule="evenodd"
+          d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z"/>
+</svg>
diff --git a/resources/views/components/svg/menu.blade.php b/resources/views/components/svg/menu.blade.php
new file mode 100644
index 0000000..05382ca
--- /dev/null
+++ b/resources/views/components/svg/menu.blade.php
@@ -0,0 +1,4 @@
+<svg {{ $attributes->merge(['class' => 'flex-none']) }}  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"  width="16" height="16">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 5.25h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5" />
+</svg>
+
diff --git a/resources/views/components/svg/users.blade.php b/resources/views/components/svg/users.blade.php
new file mode 100644
index 0000000..f5e2b00
--- /dev/null
+++ b/resources/views/components/svg/users.blade.php
@@ -0,0 +1,5 @@
+<svg {{ $attributes->merge(['class' => 'flex-none']) }} xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+     fill="currentColor" viewBox="0 0 16 16">
+    <path
+        d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816zM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275zM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"></path>
+</svg>
diff --git a/resources/views/livewire/admin/menu.blade.php b/resources/views/livewire/admin/menu.blade.php
new file mode 100644
index 0000000..a68ae4d
--- /dev/null
+++ b/resources/views/livewire/admin/menu.blade.php
@@ -0,0 +1,13 @@
+<div>
+    @livewire('layout.navigation')
+    @livewire('layout.toggle')
+    @livewire('layout.sidebar')
+    @livewire('layout.header',['header'=>$pageHeader])
+
+    <!-- Page Content -->
+    <x-layout.content>
+
+<x-item.modal buttonName="Create" type="add" modalHeader="Create Menu"></x-item.modal>
+
+    </x-layout.content>
+</div>
diff --git a/resources/views/livewire/admin/profile.blade.php b/resources/views/livewire/admin/profile.blade.php
new file mode 100644
index 0000000..165ecc3
--- /dev/null
+++ b/resources/views/livewire/admin/profile.blade.php
@@ -0,0 +1,63 @@
+<div>
+    @livewire('layout.navigation')
+    @livewire('layout.toggle')
+    @livewire('layout.sidebar')
+    @livewire('layout.header',['header'=>$pageHeader])
+
+    <!-- Page Content -->
+    <x-layout.content>
+
+
+        <div>
+            <div class="max-w-7xl mx-auto py-0 sm:px-6 lg:px-0">
+                @if (Laravel\Fortify\Features::canUpdateProfileInformation())
+                    @if(Auth::guard('admin')->check())
+                        @livewire('admin-update-profile-information-form')
+                    @else
+                        @livewire('profile.update-profile-information-form')
+                    @endif
+                    <x-jet-section-border/>
+                @endif
+
+                @if (Laravel\Fortify\Features::enabled(Laravel\Fortify\Features::updatePasswords()))
+                    <div class="mt-10 sm:mt-0">
+                        @livewire('profile.update-password-form')
+                    </div>
+
+                    <x-jet-section-border />
+                @endif
+
+                @if (Laravel\Fortify\Features::canManageTwoFactorAuthentication())
+                    <div class="mt-10 sm:mt-0">
+
+                        @if(Auth::guard('admin')->check())
+                            @livewire('admin-two-factor-authentication-form')
+                        @else
+                            @livewire('profile.two-factor-authentication-form')
+                        @endif
+
+                    </div>
+
+                    <x-jet-section-border />
+                @endif
+
+                <div class="mt-10 sm:mt-0">
+                    @livewire('profile.logout-other-browser-sessions-form')
+                </div>
+
+                @if (Laravel\Jetstream\Jetstream::hasAccountDeletionFeatures())
+                    <x-jet-section-border />
+
+                    <div class="mt-10 sm:mt-0">
+                        @livewire('profile.delete-user-form')
+                    </div>
+                @endif
+            </div>
+        </div>
+
+
+
+
+    </x-layout.content>
+
+</div>