added panel navbar

fixed env

.env.example

@@ -1,4 +1,4 @@
-APP_NAME=Laravel
+APP_NAME=xShop2
 APP_ENV=local
 APP_KEY=
 APP_DEBUG=true

resources/js/app.js

@@ -1,3 +1,11 @@
+/**
+ * common function
+ */
+// const _q = function (selector){
+//     return document.querySelector(selector);
+// }
+
+
 /**
  * First we will load all of this project's JavaScript dependencies which
  * includes Vue and other libraries. It is a great starting point when
@@ -6,7 +14,9 @@
 
 import './bootstrap';
 import { createApp } from 'vue';
-import './vendor/raw.js';
+import './panel/raw.js';
+import './panel/navbar.js';
+
 /**
  * Next, we will create a fresh Vue application instance. You may then begin
  * registering components with the application instance so they are ready

resources/js/bootstrap.js

@@ -1,4 +1,4 @@
-import 'bootstrap';
+import bootstrap from 'bootstrap/dist/js/bootstrap.bundle.min.js';
 
 /**
  * We'll load the axios HTTP library which allows us to easily issue requests
@@ -32,3 +32,14 @@ window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 //     forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
 //     enabledTransports: ['ws', 'wss'],
 // });
+
+// fixed tooptips
+document.addEventListener('readystatechange',function () {
+    [...document.querySelectorAll('[data-bs-toggle="tooltip"]')]
+        .forEach(function (el) {
+            let e = new bootstrap.Tooltip(el);
+            el.addEventListener('mouseleave',function () {
+              e.hide();
+            });
+        })
+});

resources/js/panel/navbar.js

@@ -0,0 +1,18 @@
+window.addEventListener('load', function () {
+    try {
+
+        document.querySelectorAll('#panel-navbar a')?.forEach(function (el) {
+            el.addEventListener('click', function (e) {
+                const href = this.getAttribute('href');
+                if (href[0] === '#'){
+                    e.preventDefault();
+                    document.querySelector('#panel').classList.add('sided');
+                    document.querySelector('#sidebar-panel').innerHTML = document.querySelector(href).outerHTML;
+                }
+            });
+        })
+    } catch (e) {
+        console.log(e.message);
+    }
+
+});

resources/sass/_common.scss

@@ -13,3 +13,8 @@
         box-shadow: 0px 3px 5px #11111177, inset 0 0 0  40px darkred;
     }
 }
+
+.custom-tooltip {
+    --bs-tooltip-bg: var(--bs-indigo);
+    --bs-tooltip-color: var(--bs-white);
+}

resources/sass/_fix.scss

@@ -1,4 +1,29 @@
-.form-control:focus{
+.form-control:focus,.form-check-input:focus{
     box-shadow: 0 0 0 0.25rem rgba(133, 13, 253, 0.25);
 border-color: #bc86fe;
 }
+
+.card{
+    background-color: rgba(var(--bs-body-bg),.5);
+    background-image: url("../images/pattern.png");
+    backdrop-filter: blur(4px);
+    box-shadow: -2px -2px 7px #560000, 2px 2px 7px #5e00b5;
+}
+
+
+
+.form-check-input:checked,.btn-primary{
+    background-color: #a60087;
+    border-color: #ff0067;
+}
+
+.btn-primary:hover{
+    background-color: #ff0067;
+}
+
+a,a:visited{
+    color: #cb00a5;
+    &:hover{
+        color: #ff0067;
+    }
+}

resources/sass/_navbar.scss

@@ -0,0 +1,76 @@
+#panel-navbar {
+    background-color: #282c34;
+    background-image: url("../images/pattern.png");
+    height: calc(100vh - 55px);
+    overflow-y: auto;
+    position: relative;
+
+    ul {
+        padding: 0;
+        list-style: none;
+    }
+
+    > ul {
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        height: 100%;
+        overflow-y: auto;
+        //border-right: 1px dashed gray;
+        //border-left: 1px dashed gray;
+
+
+        li {
+            i {
+                font-size: 28px;
+            }
+            ul{
+                display: none;
+            }
+        }
+
+        a, a:visited {
+            padding: 5px 9px 5px 11px;
+            display: block;
+            color: white;
+
+            &:hover {
+                color: $indigo;
+            }
+        }
+    }
+}
+
+#sidebar-panel {
+    overflow: hidden;
+    background: rgba(0, 0, 0, .1);
+    transition: .5s;
+    ul{
+        padding: 5px;
+        list-style: none;
+        li{
+            a{
+                display: flex;
+                padding: 7px ;
+                color: white;
+                transition: .7s;
+                border-radius: 5px;
+                align-items: center;
+                justify-self: center;
+
+                i{
+                    font-size: 20px;
+                    margin-right: 1rem;
+                    margin-left: 1rem;
+                }
+
+                &:hover{
+                    background: darkred;
+                }
+            }
+
+        }
+    }
+}
+

resources/sass/_raw.scss

@@ -8,9 +8,6 @@
         max-width: 95%;
         width: 450px;
         margin: auto;
-        background: rgba(var(--bs-body-bg),.5);
-        backdrop-filter: blur(4px);
-        box-shadow: -2px -2px 7px #560000, 2px 2px 7px #5e00b5;
         position: relative;
         .xshop-raw-logo{
             height: 128px;
@@ -42,5 +39,3 @@
     width: 100%;
     height: 100vh;
 }
-
-

resources/sass/_variables.scss

@@ -5,3 +5,4 @@ $body-bg: #f8fafc;
 $font-family-sans-serif: 'Vazirmatn', sans-serif;
 $font-size-base: 0.9rem;
 $line-height-base: 1.6;
+$primary-color-panel: #6e0000;

resources/sass/app.scss

@@ -14,11 +14,27 @@
 body{
     min-height: 100vh;
     overflow-x: hidden;
+    cursor: default;
 }
 a{
     text-decoration: none !important;
 }
 
+#panel{
+    display: grid;
+    grid-template-columns:50px 0 1fr;
+    transition: 400ms;
+
+    &.sided{
+        grid-template-columns:50px 250px 1fr;
+        #sidebar-panel{
+            display: block;
+        }
+    }
+}
+
+
 @import "common";
 @import "raw";
 @import "fix";
+@import "navbar";

resources/views/auth/login.blade.php

@@ -59,7 +59,7 @@
                 <div class="row mb-3">
                     <div class="col-md-6">
                         <div class="form-check form-switch mt-1">
-                            <input class="form-check-input" {{ old('remember') ? 'checked' : '' }} name="remember"
+                            <input class="form-check-input" {{ old('remember',true) ? 'checked' : '' }} name="remember"
                                    type="checkbox" role="switch" id="remember" aria-label="Username"
                                    aria-describedby="basic-addon1">
                             <label class="form-check-label" for="remember">{{ __('Remember Me') }}</label>

resources/views/components/panel-navbar.blade.php

@@ -0,0 +1,218 @@
+<nav id="panel-navbar">
+    <ul>
+        <li data-bs-toggle="tooltip" data-bs-placement="auto" data-bs-custom-class="custom-tooltip"
+            data-bs-title="{{__("xShop")}}">
+            <a href="{{route('welcome')}}" target="_blank">
+                <i class="ri-home-smile-fill"></i>
+            </a>
+        </li>
+        <li data-bs-toggle="tooltip" data-bs-placement="auto" data-bs-custom-class="custom-tooltip"
+            data-bs-title="{{__("Shopping card")}}">
+            <a href="#card">
+                <i class="ri-shopping-cart-line"></i>
+            </a>
+            <ul id="card">
+                <li>
+                    <a href="">
+                        <i class="ri-team-fill"></i>
+
+                        {{__('Customers')}}
+                    </a>
+                </li>
+                <li>
+                    <a>
+                        <i class="ri-file-list-3-fill"></i>
+                        {{__('Invoices')}}
+                    </a>
+                </li>
+                <li>
+                    <a>
+                        <i class="ri-percent-fill"></i>
+                        {{__('Discounts')}}
+                    </a>
+                </li>
+            </ul>
+        </li>
+        <li data-bs-toggle="tooltip" data-bs-placement="auto" data-bs-custom-class="custom-tooltip"
+            data-bs-title="{{__("Catalog")}}">
+            <a href="#catalog">
+                <i class="ri-store-line"></i>
+            </a>
+            <ul id="catalog">
+                <li>
+                    <a>
+                        <i class="ri-vip-diamond-fill"></i>
+                        {{__('Products')}}
+                    </a>
+                </li>
+                <li>
+                    <a>
+                        <i class="ri-box-3-fill"></i>
+                        {{__('Product categories')}}
+                    </a>
+                </li>
+                <li>
+                    <a>
+                        <i class="ri-file-list-3-fill"></i>
+                        {{__("Properties meta")}}
+                    </a>
+                </li>
+                <li>
+                    <a>
+                        <i class="ri-truck-fill"></i>
+                        {{__('Transports')}}
+                    </a>
+                </li>
+                <li>
+                    <a>
+                        <i class="ri-image-fill"></i>
+                        {{__("Slider")}}
+                    </a>
+                </li>
+
+            </ul>
+        </li>
+        <li data-bs-toggle="tooltip" data-bs-placement="auto" data-bs-custom-class="custom-tooltip"
+            data-bs-title="{{__("Contents")}}">
+            <a href="#contents">
+                <i class="ri-pages-line"></i>
+            </a>
+            <ul id="contents">
+                <li>
+                    <a>
+                        <i class="ri-megaphone-fill"></i>
+                        {{__('Post')}}
+                    </a>
+                </li>
+                <li>
+                    <a>
+                        <i class="ri-book-3-fill"></i>
+                        {{__('Groups')}}
+                    </a>
+                </li>
+                <li>
+                    <a>
+                        <i class="ri-threads-line"></i>
+                        {{__("Advertise")}}
+                    </a>
+                </li>
+                <li>
+                    <a>
+                        <i class="ri-gallery-fill"></i>
+                        {{__("Galleries")}}
+                    </a>
+                </li>
+                <li>
+                    <a>
+                        <i class="ri-video-fill"></i>
+                        {{__("Video clips")}}
+                    </a>
+                </li>
+                <li>
+                    <a href="">
+                        <i class="ri-attachment-2"></i>
+                        {{__("Attachments")}}
+                    </a>
+                </li>
+            </ul>
+        </li>
+        <li data-bs-toggle="tooltip" data-bs-placement="auto" data-bs-custom-class="custom-tooltip"
+            data-bs-title="{{__("Theme")}}">
+            <a href="#themes">
+                <i class="ri-palette-line"></i>
+            </a>
+            <ul id="themes">
+                <li>
+                    <a href="">
+                        <i class="ri-list-check"></i>
+                        {{__("Menus")}}
+                    </a>
+                </li>
+                <li>
+                    <a href="">
+                        <i class="ri-color-filter-line"></i>
+                        {{__("Graphic")}}
+                    </a>
+                </li>
+                <li>
+                    <a href="">
+                        <i class="ri-paint-brush-line"></i>
+                        {{__("Design")}}
+                    </a>
+                </li>
+            </ul>
+        </li>
+        <li data-bs-toggle="tooltip" data-bs-placement="auto" data-bs-custom-class="custom-tooltip"
+            data-bs-title="{{__("Interaction")}}">
+            <a href="#interaction">
+                <i class="ri-chat-1-line"></i>
+            </a>
+            <ul id="interaction">
+                <li>
+                    <a href="">
+                        <i class="ri-question-mark"></i>
+                        {{__('Questions')}}
+                    </a>
+                </li>
+
+                <li>
+                    <a href="">
+                        <i class="ri-mail-fill"></i>
+                        {{__('Tickets')}}
+                    </a>
+                </li>
+                <li>
+                    <a href="">
+                        <i class="ri-chat-1-fill"></i>
+                        {{__('Comments')}}
+                    </a>
+                </li>
+                <li>
+                    <a href="">
+                        <i class="ri-mail-unread-fill"></i>
+                        {{__("Contact us")}}
+                    </a>
+                </li>
+
+            </ul>
+        </li>
+        <li data-bs-toggle="tooltip" data-bs-placement="auto" data-bs-custom-class="custom-tooltip"
+            data-bs-title="{{__("Managing")}}">
+            <a href="#manage">
+                <i class="ri-pie-chart-line"></i>
+            </a>
+            <ul id="manage">
+                <li>
+                    <a>
+                        <i class="ri-folder-user-fill"></i>
+                        {{__("Users")}}
+                    </a>
+                </li>
+                <li>
+                    <a href="">
+                        <i class="ri-list-check-3"></i>
+                        {{__('Logs')}}
+                    </a>
+                </li>
+                <li>
+                    <a>
+                        <i class="ri-global-fill"></i>
+                        {{__("Languages")}}
+                    </a>
+                </li>
+                <li>
+                    <a href="">
+                        <i class="ri-bar-chart-2-line"></i>
+                        {{__("Reports")}}
+                    </a>
+                </li>
+            </ul>
+        </li>
+        <li data-bs-toggle="tooltip" data-bs-placement="auto" data-bs-custom-class="custom-tooltip"
+            data-bs-title="{{__("Setting")}}">
+            <a href="">
+                <i class="ri-settings-4-line"></i>
+            </a>
+        </li>
+    </ul>
+</nav>

resources/views/home.blade.php

@@ -14,7 +14,11 @@
                         </div>
                     @endif
 
-                    {{ __('You are logged in!') }}
+                    <p data-bs-toggle="tooltip" data-bs-placement="top"
+                        data-bs-custom-class="custom-tooltip"
+                        data-bs-title="This top tooltip is themed via CSS variables.">
+                        {{ __('You are logged in!') }}
+                    </p>
                 </div>
             </div>
         </div>

resources/views/layouts/app.blade.php

@@ -1,7 +1,7 @@
 @include('components.panel-header')
 <div id="app">
     <nav class="navbar navbar-expand-md  shadow-sm">
-        <div class="container">
+        <div class="container-fluid">
             <a class="navbar-brand" href="{{ url('/') }}">
                 {{ config('app.name', 'Laravel') }}
             </a>
@@ -57,8 +57,16 @@
         </div>
     </nav>
 
-    <main class="py-4">
+    <div>
-        @yield('content')
+        <div id="panel">
-    </main>
+            <aside>
+                @include('components.panel-navbar')
+            </aside>
+            <div id="sidebar-panel"></div>
+            <main class="py-4">
+                @yield('content')
+            </main>
+        </div>
+    </div>
 </div>
 @include('components.panel-footer')

routes/web.php

@@ -4,7 +4,7 @@ use Illuminate\Support\Facades\Route;
 
 Route::get('/', function () {
     return view('welcome');
-});
+})->name('welcome');
 
 Auth::routes(['register' => false]);