diff --git a/.env.example b/.env.example index 6025549..bebfb20 100644 --- a/.env.example +++ b/.env.example @@ -1,4 +1,4 @@ -APP_NAME=Laravel +APP_NAME=xShop2 APP_ENV=local APP_KEY= APP_DEBUG=true diff --git a/resources/images/pattern.png b/resources/images/pattern.png new file mode 100644 index 0000000..702fa69 Binary files /dev/null and b/resources/images/pattern.png differ diff --git a/resources/js/app.js b/resources/js/app.js index c74182f..913799b 100644 --- a/resources/js/app.js +++ b/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 diff --git a/resources/js/bootstrap.js b/resources/js/bootstrap.js index 46f7a33..3d3bce5 100644 --- a/resources/js/bootstrap.js +++ b/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(); + }); + }) +}); diff --git a/resources/js/panel/navbar.js b/resources/js/panel/navbar.js new file mode 100644 index 0000000..94e5908 --- /dev/null +++ b/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); + } + +}); diff --git a/resources/js/vendor/raw.js b/resources/js/panel/raw.js similarity index 100% rename from resources/js/vendor/raw.js rename to resources/js/panel/raw.js diff --git a/resources/sass/_common.scss b/resources/sass/_common.scss index 212c1b6..d9fea0a 100644 --- a/resources/sass/_common.scss +++ b/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); +} diff --git a/resources/sass/_fix.scss b/resources/sass/_fix.scss index 4481f92..5385247 100644 --- a/resources/sass/_fix.scss +++ b/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; + } +} diff --git a/resources/sass/_navbar.scss b/resources/sass/_navbar.scss new file mode 100644 index 0000000..0b242f4 --- /dev/null +++ b/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; + } + } + + } + } +} + diff --git a/resources/sass/_raw.scss b/resources/sass/_raw.scss index 32331f7..d8fdad0 100644 --- a/resources/sass/_raw.scss +++ b/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; } - - diff --git a/resources/sass/_variables.scss b/resources/sass/_variables.scss index cf8c5a7..aea83ec 100644 --- a/resources/sass/_variables.scss +++ b/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; diff --git a/resources/sass/app.scss b/resources/sass/app.scss index bfea67e..60b0430 100644 --- a/resources/sass/app.scss +++ b/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"; diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php index 5e4af59..928defc 100644 --- a/resources/views/auth/login.blade.php +++ b/resources/views/auth/login.blade.php @@ -59,7 +59,7 @@
- diff --git a/resources/views/components/panel-navbar.blade.php b/resources/views/components/panel-navbar.blade.php new file mode 100644 index 0000000..10bdfce --- /dev/null +++ b/resources/views/components/panel-navbar.blade.php @@ -0,0 +1,218 @@ + diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php index 1f34466..9bce155 100644 --- a/resources/views/home.blade.php +++ b/resources/views/home.blade.php @@ -14,7 +14,11 @@
@endif - {{ __('You are logged in!') }} +

+ {{ __('You are logged in!') }} +

diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php index 1db65d5..d4ea837 100644 --- a/resources/views/layouts/app.blade.php +++ b/resources/views/layouts/app.blade.php @@ -1,7 +1,7 @@ @include('components.panel-header')
-
- @yield('content') -
+
+
+ + +
+ @yield('content') +
+
+
@include('components.panel-footer') diff --git a/routes/web.php b/routes/web.php index 0fc9f63..eb05df0 100644 --- a/routes/web.php +++ b/routes/web.php @@ -4,7 +4,7 @@ use Illuminate\Support\Facades\Route; Route::get('/', function () { return view('welcome'); -}); +})->name('welcome'); Auth::routes(['register' => false]);