Last active
April 14, 2024 13:14
-
-
Save arvindsvt/3376fc475bc0cc7375d7f470ba9390f4 to your computer and use it in GitHub Desktop.
admin1
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| composer create-project laravel/laravel:^10.0 example-app | |
| php artisan make:migration create_subcategory_table --create=subcategory | |
| php artisan make:model subcategory --migration | |
| php artisan make:model subcategory -mc | |
| php artisan make:view layouts.app | |
| php artisan make:view products.index | |
| php artisan make:view products.create | |
| php artisan make:view products.edit | |
| php artisan make:view products.show | |
| php artisan config:cache | |
| php artisan config:clear | |
| php artisan route:clear | |
| php artisan view:clear | |
| php artisan optimize | |
| php artisan migrate | |
| php artisan migrate:fresh --seed | |
| php artisan make:migration add_is_admin_type_to_admins --table="admins" | |
| php artisan make:model Employee -mc | |
| php artisan storage:link | |
| php artisan migrate:refresh --path=/database/migrations/2024_03_27_063129_create_products_table.php | |
| https://stackoverflow.com/questions/55880196/is-there-a-way-to-easily-check-if-the-image-url-is-valid-or-not | |
| Add ASSET_URL=public | |
| in your .env file | |
| and run php artisan config:cache | |
| https://stackoverflow.com/questions/52820555/laravel-add-two-column-into-existing-table-using-php-artisan-makemigration-at | |
| php artisan make:migration add_email_and_phone_number_to_users --table=users | |
| https://stackoverflow.com/questions/24891276/how-to-automatically-append-query-string-to-laravel-pagination-links | |
| https://stackoverflow.com/questions/32810231/add-public-to-asset-path-in-laravel | |
| https://stackoverflow.com/questions/24945346/laravel-how-to-use-foreign-primary-key-thats-not-an-integer | |
| https://www.itsolutionstuff.com/post/laravel-shopping-add-to-cart-with-ajax-exampleexample.html | |
| https://dcodemania.com/post/crud-application-image-upload-laravel-8-ajax-sweetalert-datatable | |
| _______________________ | |
| >php artisan config:publish database | |
| SQLSTATE[HY000]: General error: 1273 Unknown collation: 'utf8mb4_0900_ai_ci' (Connection: mysql, SQL: select table_name as `name`, (data_length + index_length) as `size`, table_commen | |
| install mysql in laravel 11 | |
| https://laraveldaily.com/post/laravel-11-change-default-sqlite-to-mysql | |
| just navigate to config/database.php and in connections, change the collation for mysql from 'collation' => env('DB_COLLATION', 'utf8mb4_0900_ai_ci') to 'collation' => env('DB_COLLATION', 'utf8mb4_unicode_ci'). | |
| Or just simply add 'DB_COLLATION=utf8mb4_unicode_ci' to your .env file. | |
| https://dcodemania.com/post/crud-application-image-upload-laravel-8-ajax-sweetalert-datatable | |
| https://www.itsolutionstuff.com/post/laravel-11-crud-application-example-tutorialexample.html | |
| _______________________ | |
| Migration | |
| $table->string('code')->unique(); | |
| $table->primary('code'); | |
| $table->string('site_code'); | |
| $table->foreign('site_code') | |
| ->references('code') | |
| ->on('sites__sites') | |
| ->onDelete('cascade'); | |
| Model | |
| // Site Code | |
| protected $primaryKey = 'code'; | |
| public $incrementing = false; | |
| https://gist.github.com/TonyRouse/88ed7a1b13b0588970e00fb5557360dd | |
| Schema::create('comments', function (Blueprint $table) { | |
| $table->id(); | |
| $table->foreignId('user_id')->constrained(); | |
| $table->foreignId('post_id')->constrained(); | |
| $table->text('comment'); | |
| $table->timestamps(); | |
| }); | |
| https://www.youtube.com/watch?v=rAceebs451E | |
| https://www.fixcodekh.com/2022/03/admin-dashboard-in-laravel-9x-x-hr-ms.html | |
| https://www.itsolutionstuff.com/post/how-to-add-custom-attribute-in-laravel-modelexample.html | |
| public function getFullNameAttribute() | |
| { | |
| return $this->first_name . ' ' . $this->last_name; | |
| } | |
| $full_name = User::find(1)->full_name; | |
| https://raviyatechnical.medium.com/laravel-advance-how-to-add-foreign-key-in-laravel-migration-f1343122b54d | |
| https://makitweb.com/how-to-add-foreign-key-in-migration-laravel/ | |
| https://stackoverflow.com/questions/35321363/how-to-select-the-li-element-when-clicked | |
| $('.nav li').click(function() { | |
| $(this).toggleClass('active').siblings().removeClass('active'); | |
| }); | |
| https://dcodemania.com/post/crud-application-image-upload-laravel-8-ajax-sweetalert-datatable | |
| https://coderthemes.com/hyper/saas/tables-datatable.html | |
| https://www.itsolutionstuff.com/post/how-to-increase-throttle-lockout-time-and-max-login-attempts-in-laravel-5example.html | |
| https://www.allphptricks.com/laravel-custom-user-registration-and-login-tutorial/ | |
| https://www.itsolutionstuff.com/post/how-to-use-same-form-for-create-and-update-in-laravelexample.html | |
| https://www.itsolutionstuff.com/post/laravel-10-custom-validation-error-message-exampleexample.html | |
| https://magecomp.com/blog/laravel-8-database-seeder/ | |
| https://www.itsolutionstuff.com/post/laravel-5-how-to-prevent-browser-back-button-after-user-logoutexample.html | |
| https://www.itsolutionstuff.com/post/how-to-add-foreign-key-in-laravel-migrationexample.html | |
| https://stackoverflow.com/questions/48474160/laravel-5-5-call-controller-function-from-blade-view-with-parameter | |
| https://www.itsolutionstuff.com/post/how-to-add-foreign-key-in-laravel-migrationexample.html | |
| https://www.itsolutionstuff.com/post/laravel-set-selected-option-in-dropdown-menuexample.html | |
| https://www.positronx.io/how-to-add-and-use-bootstrap-datepicker-in-laravel/ | |
| <html lang="en"><head> | |
| <meta charset="UTF-8"> | |
| <link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png"> | |
| <meta name="apple-mobile-web-app-title" content="CodePen"> | |
| <link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico"> | |
| <link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg" color="#111"> | |
| <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script> | |
| <title>CodePen - Pro Sidebar template</title> | |
| <link rel="canonical" href="https://codepen.io/azouaoui-med/pen/wpBadb"> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css"> | |
| <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/css-pro-layout.css"> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"> | |
| <style> | |
| .layout { | |
| z-index: 1; | |
| } | |
| .layout .header { | |
| display: flex; | |
| align-items: center; | |
| padding: 20px; | |
| } | |
| .layout .content { | |
| padding: 12px 50px; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .layout .footer { | |
| text-align: center; | |
| margin-top: auto; | |
| margin-bottom: 20px; | |
| padding: 20px; | |
| } | |
| .sidebar { | |
| color: #7d84ab; | |
| overflow-x: hidden !important; | |
| position: relative; | |
| } | |
| .sidebar::-webkit-scrollbar-thumb { | |
| border-radius: 4px; | |
| } | |
| .sidebar:hover::-webkit-scrollbar-thumb { | |
| background-color: #1a4173; | |
| } | |
| .sidebar::-webkit-scrollbar { | |
| width: 6px; | |
| background-color: #0c1e35; | |
| } | |
| .sidebar .image-wrapper { | |
| overflow: hidden; | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| z-index: 1; | |
| display: none; | |
| } | |
| .sidebar .image-wrapper > img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| object-position: center; | |
| } | |
| .sidebar.has-bg-image .image-wrapper { | |
| display: block; | |
| } | |
| .sidebar .sidebar-layout { | |
| height: auto; | |
| min-height: 100%; | |
| display: flex; | |
| flex-direction: column; | |
| position: relative; | |
| background-color: #0c1e35; | |
| z-index: 2; | |
| } | |
| .sidebar .sidebar-layout .sidebar-header { | |
| height: 100px; | |
| min-height: 100px; | |
| display: flex; | |
| align-items: center; | |
| padding: 0 20px; | |
| } | |
| .sidebar .sidebar-layout .sidebar-header > span { | |
| overflow: hidden; | |
| white-space: nowrap; | |
| text-overflow: ellipsis; | |
| } | |
| .sidebar .sidebar-layout .sidebar-content { | |
| flex-grow: 1; | |
| padding: 10px 0; | |
| } | |
| .sidebar .sidebar-layout .sidebar-footer { | |
| height: 230px; | |
| min-height: 230px; | |
| display: flex; | |
| align-items: center; | |
| padding: 0 20px; | |
| } | |
| .sidebar .sidebar-layout .sidebar-footer > span { | |
| overflow: hidden; | |
| white-space: nowrap; | |
| text-overflow: ellipsis; | |
| } | |
| @keyframes swing { | |
| 0%, 30%, 50%, 70%, 100% { | |
| transform: rotate(0deg); | |
| } | |
| 10% { | |
| transform: rotate(10deg); | |
| } | |
| 40% { | |
| transform: rotate(-10deg); | |
| } | |
| 60% { | |
| transform: rotate(5deg); | |
| } | |
| 80% { | |
| transform: rotate(-5deg); | |
| } | |
| } | |
| .layout .sidebar .menu ul { | |
| list-style-type: none; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .layout .sidebar .menu .menu-header { | |
| font-weight: 600; | |
| padding: 10px 25px; | |
| font-size: 0.8em; | |
| letter-spacing: 2px; | |
| transition: opacity 0.3s; | |
| opacity: 0.5; | |
| } | |
| .layout .sidebar .menu .menu-item a { | |
| display: flex; | |
| align-items: center; | |
| height: 50px; | |
| padding: 0 20px; | |
| color: #7d84ab; | |
| } | |
| .layout .sidebar .menu .menu-item a .menu-icon { | |
| font-size: 1.2rem; | |
| width: 35px; | |
| min-width: 35px; | |
| height: 35px; | |
| line-height: 35px; | |
| text-align: center; | |
| display: inline-block; | |
| margin-right: 10px; | |
| border-radius: 2px; | |
| transition: color 0.3s; | |
| } | |
| .layout .sidebar .menu .menu-item a .menu-icon i { | |
| display: inline-block; | |
| } | |
| .layout .sidebar .menu .menu-item a .menu-title { | |
| font-size: 0.9em; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| flex-grow: 1; | |
| transition: color 0.3s; | |
| } | |
| .layout .sidebar .menu .menu-item a .menu-prefix, | |
| .layout .sidebar .menu .menu-item a .menu-suffix { | |
| display: inline-block; | |
| padding: 5px; | |
| opacity: 1; | |
| transition: opacity 0.3s; | |
| } | |
| .layout .sidebar .menu .menu-item a:hover .menu-title { | |
| color: #dee2ec; | |
| } | |
| .layout .sidebar .menu .menu-item a:hover .menu-icon { | |
| color: #dee2ec; | |
| } | |
| .layout .sidebar .menu .menu-item a:hover .menu-icon i { | |
| animation: swing ease-in-out 0.5s 1 alternate; | |
| } | |
| .layout .sidebar .menu .menu-item a:hover::after { | |
| border-color: #dee2ec !important; | |
| } | |
| .layout .sidebar .menu .menu-item.sub-menu { | |
| position: relative; | |
| } | |
| .layout .sidebar .menu .menu-item.sub-menu > a::after { | |
| content: ""; | |
| transition: transform 0.3s; | |
| border-right: 2px solid currentcolor; | |
| border-bottom: 2px solid currentcolor; | |
| width: 5px; | |
| height: 5px; | |
| transform: rotate(-45deg); | |
| } | |
| .layout .sidebar .menu .menu-item.sub-menu > .sub-menu-list { | |
| padding-left: 20px; | |
| display: none; | |
| overflow: hidden; | |
| z-index: 999; | |
| } | |
| .layout .sidebar .menu .menu-item.sub-menu.open > a { | |
| color: #dee2ec; | |
| } | |
| .layout .sidebar .menu .menu-item.sub-menu.open > a::after { | |
| transform: rotate(45deg); | |
| } | |
| .layout .sidebar .menu .menu-item.active > a .menu-title { | |
| color: #dee2ec; | |
| } | |
| .layout .sidebar .menu .menu-item.active > a::after { | |
| border-color: #dee2ec; | |
| } | |
| .layout .sidebar .menu .menu-item.active > a .menu-icon { | |
| color: #dee2ec; | |
| } | |
| .layout .sidebar .menu > ul > .sub-menu > .sub-menu-list { | |
| background-color: #0b1a2c; | |
| } | |
| .layout .sidebar .menu.icon-shape-circle .menu-item a .menu-icon, .layout .sidebar .menu.icon-shape-rounded .menu-item a .menu-icon, .layout .sidebar .menu.icon-shape-square .menu-item a .menu-icon { | |
| background-color: #0b1a2c; | |
| } | |
| .layout .sidebar .menu.icon-shape-circle .menu-item a .menu-icon { | |
| border-radius: 50%; | |
| } | |
| .layout .sidebar .menu.icon-shape-rounded .menu-item a .menu-icon { | |
| border-radius: 4px; | |
| } | |
| .layout .sidebar .menu.icon-shape-square .menu-item a .menu-icon { | |
| border-radius: 0; | |
| } | |
| .layout .sidebar:not(.collapsed) .menu > ul > .menu-item.sub-menu > .sub-menu-list { | |
| visibility: visible !important; | |
| position: static !important; | |
| transform: translate(0, 0) !important; | |
| } | |
| .layout .sidebar.collapsed .menu > ul > .menu-header { | |
| opacity: 0; | |
| } | |
| .layout .sidebar.collapsed .menu > ul > .menu-item > a .menu-prefix, | |
| .layout .sidebar.collapsed .menu > ul > .menu-item > a .menu-suffix { | |
| opacity: 0; | |
| } | |
| .layout .sidebar.collapsed .menu > ul > .menu-item.sub-menu > a::after { | |
| content: ""; | |
| width: 5px; | |
| height: 5px; | |
| background-color: currentcolor; | |
| border-radius: 50%; | |
| display: inline-block; | |
| position: absolute; | |
| right: 10px; | |
| top: 50%; | |
| border: none; | |
| transform: translateY(-50%); | |
| } | |
| .layout .sidebar.collapsed .menu > ul > .menu-item.sub-menu > a:hover::after { | |
| background-color: #dee2ec; | |
| } | |
| .layout .sidebar.collapsed .menu > ul > .menu-item.sub-menu > .sub-menu-list { | |
| transition: none !important; | |
| width: 200px; | |
| margin-left: 3px !important; | |
| border-radius: 4px; | |
| display: block !important; | |
| } | |
| .layout .sidebar.collapsed .menu > ul > .menu-item.active > a::after { | |
| background-color: #dee2ec; | |
| } | |
| .layout .sidebar.has-bg-image .menu.icon-shape-circle .menu-item a .menu-icon, .layout .sidebar.has-bg-image .menu.icon-shape-rounded .menu-item a .menu-icon, .layout .sidebar.has-bg-image .menu.icon-shape-square .menu-item a .menu-icon { | |
| background-color: rgba(11, 26, 44, 0.6); | |
| } | |
| .layout .sidebar.has-bg-image:not(.collapsed) .menu > ul > .sub-menu > .sub-menu-list { | |
| background-color: rgba(11, 26, 44, 0.6); | |
| } | |
| .layout.rtl .sidebar .menu .menu-item a .menu-icon { | |
| margin-left: 10px; | |
| margin-right: 0; | |
| } | |
| .layout.rtl .sidebar .menu .menu-item.sub-menu > a::after { | |
| transform: rotate(135deg); | |
| } | |
| .layout.rtl .sidebar .menu .menu-item.sub-menu > .sub-menu-list { | |
| padding-left: 0; | |
| padding-right: 20px; | |
| } | |
| .layout.rtl .sidebar .menu .menu-item.sub-menu.open > a::after { | |
| transform: rotate(45deg); | |
| } | |
| .layout.rtl .sidebar.collapsed .menu > ul > .menu-item.sub-menu a::after { | |
| right: auto; | |
| left: 10px; | |
| } | |
| .layout.rtl .sidebar.collapsed .menu > ul > .menu-item.sub-menu > .sub-menu-list { | |
| margin-left: -3px !important; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| margin: 0; | |
| height: 100vh; | |
| font-family: "Poppins", sans-serif; | |
| color: #3f4750; | |
| font-size: 0.9rem; | |
| } | |
| a { | |
| text-decoration: none; | |
| } | |
| @media (max-width: 576px) { | |
| #btn-collapse { | |
| display: none; | |
| } | |
| } | |
| .layout .sidebar .pro-sidebar-logo { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .layout .sidebar .pro-sidebar-logo > div { | |
| width: 35px; | |
| min-width: 35px; | |
| height: 35px; | |
| min-height: 35px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 8px; | |
| color: white; | |
| font-size: 24px; | |
| font-weight: 700; | |
| background-color: #ff8100; | |
| margin-right: 10px; | |
| } | |
| .layout .sidebar .pro-sidebar-logo > h5 { | |
| overflow: hidden; | |
| white-space: nowrap; | |
| text-overflow: ellipsis; | |
| font-size: 20px; | |
| line-height: 30px; | |
| transition: opacity 0.3s; | |
| opacity: 1; | |
| } | |
| .layout .sidebar .footer-box { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| text-align: center; | |
| font-size: 0.8em; | |
| padding: 20px 0; | |
| border-radius: 8px; | |
| width: 180px; | |
| min-width: 190px; | |
| margin: 0 auto; | |
| background-color: #162d4a; | |
| } | |
| .layout .sidebar .footer-box img.react-logo { | |
| width: 40px; | |
| height: 40px; | |
| margin-bottom: 10px; | |
| } | |
| .layout .sidebar .footer-box a { | |
| color: #fff; | |
| font-weight: 600; | |
| margin-bottom: 10px; | |
| } | |
| .layout .sidebar .sidebar-collapser { | |
| transition: left, right, 0.3s; | |
| position: fixed; | |
| left: 260px; | |
| top: 40px; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| background-color: #00829f; | |
| display: -webkit-box; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.2em; | |
| transform: translateX(50%); | |
| z-index: 111; | |
| cursor: pointer; | |
| color: white; | |
| box-shadow: 1px 1px 4px #0c1e35; | |
| } | |
| .layout .sidebar.collapsed .pro-sidebar-logo > h5 { | |
| opacity: 0; | |
| } | |
| .layout .sidebar.collapsed .footer-box { | |
| display: none; | |
| } | |
| .layout .sidebar.collapsed .sidebar-collapser { | |
| left: 60px; | |
| } | |
| .layout .sidebar.collapsed .sidebar-collapser i { | |
| transform: rotate(180deg); | |
| } | |
| .badge { | |
| display: inline-block; | |
| padding: 0.25em 0.4em; | |
| font-size: 75%; | |
| font-weight: 700; | |
| line-height: 1; | |
| text-align: center; | |
| white-space: nowrap; | |
| vertical-align: baseline; | |
| border-radius: 0.25rem; | |
| color: #fff; | |
| background-color: #6c757d; | |
| } | |
| .badge.primary { | |
| background-color: #ab2dff; | |
| } | |
| .badge.secondary { | |
| background-color: #079b0b; | |
| } | |
| .sidebar-toggler { | |
| position: fixed; | |
| right: 20px; | |
| top: 20px; | |
| } | |
| .social-links a { | |
| margin: 0 10px; | |
| color: #3f4750; | |
| } | |
| </style> | |
| <script> | |
| window.console = window.console || function(t) {}; | |
| </script> | |
| </head> | |
| <body translate="no"> | |
| <div class="layout has-sidebar fixed-sidebar fixed-header"> | |
| <aside id="sidebar" class="sidebar break-point-sm has-bg-image"> | |
| <a id="btn-collapse" class="sidebar-collapser"><i class="ri-arrow-left-s-line"></i></a> | |
| <div class="image-wrapper"> | |
| <img src="assets/images/sidebar-bg.jpg" alt="sidebar background"> | |
| </div> | |
| <div class="sidebar-layout"> | |
| <div class="sidebar-header"> | |
| <div class="pro-sidebar-logo"> | |
| <div>P</div> | |
| <h5>Pro Sidebar</h5> | |
| </div> | |
| </div> | |
| <div class="sidebar-content"> | |
| <nav class="menu open-current-submenu"> | |
| <ul> | |
| <li class="menu-header"><span> GENERAL </span></li> | |
| <li class="menu-item sub-menu"> | |
| <a href="#"> | |
| <span class="menu-icon"> | |
| <i class="ri-vip-diamond-fill"></i> | |
| </span> | |
| <span class="menu-title">Components</span> | |
| <span class="menu-suffix"> | |
| <span class="badge primary">Hot</span> | |
| </span> | |
| </a> | |
| <div class="sub-menu-list" data-popper-placement="right" style="position: fixed; left: 0px; top: 0px; margin: 0px; visibility: hidden; transform: translate3d(274.436px, 172.18px, 0px); box-sizing: border-box; display: none;"> | |
| <ul> | |
| <li class="menu-item"> | |
| <a href="#"> | |
| <span class="menu-title">Grid</span> | |
| </a> | |
| </li> | |
| <li class="menu-item"> | |
| <a href="#"> | |
| <span class="menu-title">Layout</span> | |
| </a> | |
| </li> | |
| <li class="menu-item sub-menu"> | |
| <a href="#"> | |
| <span class="menu-title">Forms</span> | |
| </a> | |
| <div class="sub-menu-list"> | |
| <ul> | |
| <li class="menu-item"> | |
| <a href="#"> | |
| <span class="menu-title">Input</span> | |
| </a> | |
| </li> | |
| <li class="menu-item"> | |
| <a href="#"> | |
| <span class="menu-title">Select</span> | |
| </a> | |
| </li> | |
| <li class="menu-item sub-menu"> | |
| <a href="#"> | |
| <span class="menu-title">More</span> | |
| </a> | |
| <div class="sub-menu-list"> | |
| <ul> | |
| <li class="menu-item"> | |
| <a href="#"> | |
| <span class="menu-title">CheckBox</span> | |
| </a> | |
| </li> | |
| <li class="menu-item"> | |
| <a href="#"> | |
| <span class="menu-title">Radio</span> | |
| </a> | |
| </li> | |
| <li class="menu-item sub-menu"> | |
| <a href="#"> | |
| <span class="menu-title">Want more ?</span> | |
| <span class="menu-suffix">🤔</span> | |
| </a> | |
| <div class="sub-menu-list"> | |
| <ul> | |
| <li class="menu-item"> | |
| <a href="#"> | |
| <span class="menu-prefix">🎉</span> | |
| <span class="menu-title">You made it </span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| </li> | |
| <li class="menu-item sub-menu"> | |
| <a href="#"> | |
| <span class="menu-icon"> | |
| <i class="ri-bar-chart-2-fill"></i> | |
| </span> | |
| <span class="menu-title">Charts</span> | |
| </a> | |
| <div class="sub-menu-list" data-popper-placement="right" style="position: fixed; left: 0px; top: 0px; margin: 0px; visibility: hidden; transform: translate3d(274.436px, 222.556px, 0px); display: none;"> | |
| <ul> | |
| <li class="menu-item"> | |
| <a href="#"> | |
| <span class="menu-title">Pie chart</span> | |
| </a> | |
| </li> | |
| <li class="menu-item"> | |
| <a href="#"> | |
| <span class="menu-title">Line chart</span> | |
| </a> | |
| </li> | |
| <li class="menu-item"> | |
| <a href="#"> | |
| <span class="menu-title">Bar chart</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </li> | |
| <li class="menu-item sub-menu open"> | |
| <a href="#"> | |
| <span class="menu-icon"> | |
| <i class="ri-shopping-cart-fill"></i> | |
| </span> | |
| <span class="menu-title">E-commerce</span> | |
| </a> | |
| <div class="sub-menu-list" data-popper-placement="right" style="position: fixed; left: 0px; top: 0px; margin: 0px; visibility: hidden; transform: translate3d(274.436px, -150.376px, 0px); display: block; box-sizing: border-box;" data-popper-reference-hidden=""> | |
| <ul> | |
| <li class="menu-item"> | |
| <a href="#"> | |
| <span class="menu-title">Products</span> | |
| </a> | |
| </li> | |
| <li class="menu-item"> | |
| <a href="#"> | |
| <span class="menu-title">Orders</span> | |
| </a> | |
| </li> | |
| <li class="menu-item"> | |
| <a href="#"> | |
| <span class="menu-title">credit card</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </li> | |
| <li class="menu-item sub-menu"> | |
| <a href="#"> | |
| <span class="menu-icon"> | |
| <i class="ri-global-fill"></i> | |
| </span> | |
| <span class="menu-title">Maps</span> | |
| </a> | |
| <div class="sub-menu-list" data-popper-placement="right" data-popper-escaped="" data-popper-reference-hidden="" style="position: fixed; left: 0px; top: 0px; margin: 0px; visibility: hidden; transform: translate3d(274.436px, 447.368px, 0px); display: none;"> | |
| <ul> | |
| <li class="menu-item"> | |
| <a href="#"> | |
| <span class="menu-title">Google maps</span> | |
| </a> | |
| </li> | |
| <li class="menu-item"> | |
| <a href="#"> | |
| <span class="menu-title">Open street map</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </li> | |
| <li class="menu-item sub-menu"> | |
| <a href="#"> | |
| <span class="menu-icon"> | |
| <i class="ri-paint-brush-fill"></i> | |
| </span> | |
| <span class="menu-title">Theme</span> | |
| </a> | |
| <div class="sub-menu-list" data-popper-placement="right" data-popper-escaped="" data-popper-reference-hidden="" style="position: fixed; left: 0px; top: 0px; margin: 0px; visibility: hidden; transform: translate3d(274.436px, 496.992px, 0px); display: none;"> | |
| <ul> | |
| <li class="menu-item"> | |
| <a href="#"> | |
| <span class="menu-title">Dark</span> | |
| </a> | |
| </li> | |
| <li class="menu-item"> | |
| <a href="#"> | |
| <span class="menu-title">Light</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </li> | |
| <li class="menu-header" style="padding-top: 20px"><span> EXTRA </span></li> | |
| <li class="menu-item"> | |
| <a href="#"> | |
| <span class="menu-icon"> | |
| <i class="ri-book-2-fill"></i> | |
| </span> | |
| <span class="menu-title">Documentation</span> | |
| <span class="menu-suffix"> | |
| <span class="badge secondary">Beta</span> | |
| </span> | |
| </a> | |
| </li> | |
| <li class="menu-item"> | |
| <a href="#"> | |
| <span class="menu-icon"> | |
| <i class="ri-calendar-fill"></i> | |
| </span> | |
| <span class="menu-title">Calendar</span> | |
| </a> | |
| </li> | |
| <li class="menu-item"> | |
| <a href="#"> | |
| <span class="menu-icon"> | |
| <i class="ri-service-fill"></i> | |
| </span> | |
| <span class="menu-title">Examples</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </nav> | |
| </div> | |
| <div class="sidebar-footer"> | |
| <div class="footer-box"> | |
| <div> | |
| <img class="react-logo" src="https://user-images.githubusercontent.com/25878302/213938106-ca8f0485-3f30-4861-9188-2920ed7ab284.png" alt="react"> | |
| </div> | |
| <div style="padding: 0 10px"> | |
| <span style="display: block; margin-bottom: 10px">Pro sidebar is also available as a react package | |
| </span> | |
| <div style="margin-bottom: 15px"> | |
| <img alt="preview badge" src="https://img.shields.io/github/stars/azouaoui-med/react-pro-sidebar?style=social"> | |
| </div> | |
| <div> | |
| <a href="https://github.com/azouaoui-med/react-pro-sidebar" target="_blank">Check it out!</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </aside> | |
| <div id="overlay" class="overlay"></div> | |
| <div class="layout"> | |
| <main class="content"> | |
| aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa | |
| ssssssssssssssssssssssssssssssss | |
| <footer class="footer"> | |
| <small style="margin-bottom: 20px; display: inline-block"> | |
| © 2023 made with | |
| <span style="color: red; font-size: 18px">❤</span> by - | |
| <a target="_blank" href="https://azouaoui.netlify.com"> Mohamed Azouaoui </a> | |
| </small> | |
| <br> | |
| <div class="social-links"> | |
| <a href="https://github.com/azouaoui-med" target="_blank"> | |
| <i class="ri-github-fill ri-xl"></i> | |
| </a> | |
| <a href="https://twitter.com/azouaoui_med" target="_blank"> | |
| <i class="ri-twitter-fill ri-xl"></i> | |
| </a> | |
| <a href="https://codepen.io/azouaoui-med" target="_blank"> | |
| <i class="ri-codepen-fill ri-xl"></i> | |
| </a> | |
| <a href="https://www.linkedin.com/in/mohamed-azouaoui/" target="_blank"> | |
| <i class="ri-linkedin-box-fill ri-xl"></i> | |
| </a> | |
| </div> | |
| </footer> | |
| </main> | |
| <div class="overlay"></div> | |
| </div> | |
| </div> | |
| <script src="https://unpkg.com/@popperjs/core@2"></script> | |
| <script id="rendered-js"> | |
| function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;}const ANIMATION_DURATION = 300; | |
| const SIDEBAR_EL = document.getElementById("sidebar"); | |
| const SUB_MENU_ELS = document.querySelectorAll( | |
| ".menu > ul > .menu-item.sub-menu"); | |
| const FIRST_SUB_MENUS_BTN = document.querySelectorAll( | |
| ".menu > ul > .menu-item.sub-menu > a"); | |
| const INNER_SUB_MENUS_BTN = document.querySelectorAll( | |
| ".menu > ul > .menu-item.sub-menu .menu-item.sub-menu > a"); | |
| class PopperObject { | |
| constructor(reference, popperTarget) {_defineProperty(this, "instance", null);_defineProperty(this, "reference", null);_defineProperty(this, "popperTarget", null); | |
| this.init(reference, popperTarget); | |
| } | |
| init(reference, popperTarget) { | |
| this.reference = reference; | |
| this.popperTarget = popperTarget; | |
| this.instance = Popper.createPopper(this.reference, this.popperTarget, { | |
| placement: "right", | |
| strategy: "fixed", | |
| resize: true, | |
| modifiers: [ | |
| { | |
| name: "computeStyles", | |
| options: { | |
| adaptive: false } }, | |
| { | |
| name: "flip", | |
| options: { | |
| fallbackPlacements: ["left", "right"] } }] }); | |
| document.addEventListener( | |
| "click", | |
| e => this.clicker(e, this.popperTarget, this.reference), | |
| false); | |
| const ro = new ResizeObserver(() => { | |
| this.instance.update(); | |
| }); | |
| ro.observe(this.popperTarget); | |
| ro.observe(this.reference); | |
| } | |
| clicker(event, popperTarget, reference) { | |
| if ( | |
| SIDEBAR_EL.classList.contains("collapsed") && | |
| !popperTarget.contains(event.target) && | |
| !reference.contains(event.target)) | |
| { | |
| this.hide(); | |
| } | |
| } | |
| hide() { | |
| this.instance.state.elements.popper.style.visibility = "hidden"; | |
| }} | |
| class Poppers { | |
| constructor() {_defineProperty(this, "subMenuPoppers", []); | |
| this.init(); | |
| } | |
| init() { | |
| SUB_MENU_ELS.forEach(element => { | |
| this.subMenuPoppers.push( | |
| new PopperObject(element, element.lastElementChild)); | |
| this.closePoppers(); | |
| }); | |
| } | |
| togglePopper(target) { | |
| if (window.getComputedStyle(target).visibility === "hidden") | |
| target.style.visibility = "visible";else | |
| target.style.visibility = "hidden"; | |
| } | |
| updatePoppers() { | |
| this.subMenuPoppers.forEach(element => { | |
| element.instance.state.elements.popper.style.display = "none"; | |
| element.instance.update(); | |
| }); | |
| } | |
| closePoppers() { | |
| this.subMenuPoppers.forEach(element => { | |
| element.hide(); | |
| }); | |
| }} | |
| const slideUp = (target, duration = ANIMATION_DURATION) => { | |
| const { parentElement } = target; | |
| parentElement.classList.remove("open"); | |
| target.style.transitionProperty = "height, margin, padding"; | |
| target.style.transitionDuration = `${duration}ms`; | |
| target.style.boxSizing = "border-box"; | |
| target.style.height = `${target.offsetHeight}px`; | |
| target.offsetHeight; | |
| target.style.overflow = "hidden"; | |
| target.style.height = 0; | |
| target.style.paddingTop = 0; | |
| target.style.paddingBottom = 0; | |
| target.style.marginTop = 0; | |
| target.style.marginBottom = 0; | |
| window.setTimeout(() => { | |
| target.style.display = "none"; | |
| target.style.removeProperty("height"); | |
| target.style.removeProperty("padding-top"); | |
| target.style.removeProperty("padding-bottom"); | |
| target.style.removeProperty("margin-top"); | |
| target.style.removeProperty("margin-bottom"); | |
| target.style.removeProperty("overflow"); | |
| target.style.removeProperty("transition-duration"); | |
| target.style.removeProperty("transition-property"); | |
| }, duration); | |
| }; | |
| const slideDown = (target, duration = ANIMATION_DURATION) => { | |
| const { parentElement } = target; | |
| parentElement.classList.add("open"); | |
| target.style.removeProperty("display"); | |
| let { display } = window.getComputedStyle(target); | |
| if (display === "none") display = "block"; | |
| target.style.display = display; | |
| const height = target.offsetHeight; | |
| target.style.overflow = "hidden"; | |
| target.style.height = 0; | |
| target.style.paddingTop = 0; | |
| target.style.paddingBottom = 0; | |
| target.style.marginTop = 0; | |
| target.style.marginBottom = 0; | |
| target.offsetHeight; | |
| target.style.boxSizing = "border-box"; | |
| target.style.transitionProperty = "height, margin, padding"; | |
| target.style.transitionDuration = `${duration}ms`; | |
| target.style.height = `${height}px`; | |
| target.style.removeProperty("padding-top"); | |
| target.style.removeProperty("padding-bottom"); | |
| target.style.removeProperty("margin-top"); | |
| target.style.removeProperty("margin-bottom"); | |
| window.setTimeout(() => { | |
| target.style.removeProperty("height"); | |
| target.style.removeProperty("overflow"); | |
| target.style.removeProperty("transition-duration"); | |
| target.style.removeProperty("transition-property"); | |
| }, duration); | |
| }; | |
| const slideToggle = (target, duration = ANIMATION_DURATION) => { | |
| if (window.getComputedStyle(target).display === "none") | |
| return slideDown(target, duration); | |
| return slideUp(target, duration); | |
| }; | |
| const PoppersInstance = new Poppers(); | |
| /** | |
| * wait for the current animation to finish and update poppers position | |
| */ | |
| const updatePoppersTimeout = () => { | |
| setTimeout(() => { | |
| PoppersInstance.updatePoppers(); | |
| }, ANIMATION_DURATION); | |
| }; | |
| /** | |
| * sidebar collapse handler | |
| */ | |
| document.getElementById("btn-collapse").addEventListener("click", () => { | |
| SIDEBAR_EL.classList.toggle("collapsed"); | |
| PoppersInstance.closePoppers(); | |
| if (SIDEBAR_EL.classList.contains("collapsed")) | |
| FIRST_SUB_MENUS_BTN.forEach(element => { | |
| element.parentElement.classList.remove("open"); | |
| }); | |
| updatePoppersTimeout(); | |
| }); | |
| /** | |
| * sidebar toggle handler (on break point ) | |
| */ | |
| document.getElementById("btn-toggle").addEventListener("click", () => { | |
| SIDEBAR_EL.classList.toggle("toggled"); | |
| updatePoppersTimeout(); | |
| }); | |
| /** | |
| * toggle sidebar on overlay click | |
| */ | |
| document.getElementById("overlay").addEventListener("click", () => { | |
| SIDEBAR_EL.classList.toggle("toggled"); | |
| }); | |
| const defaultOpenMenus = document.querySelectorAll(".menu-item.sub-menu.open"); | |
| defaultOpenMenus.forEach(element => { | |
| element.lastElementChild.style.display = "block"; | |
| }); | |
| /** | |
| * handle top level submenu click | |
| */ | |
| FIRST_SUB_MENUS_BTN.forEach(element => { | |
| element.addEventListener("click", () => { | |
| if (SIDEBAR_EL.classList.contains("collapsed")) | |
| PoppersInstance.togglePopper(element.nextElementSibling);else | |
| { | |
| const parentMenu = element.closest(".menu.open-current-submenu"); | |
| if (parentMenu) | |
| parentMenu. | |
| querySelectorAll(":scope > ul > .menu-item.sub-menu > a"). | |
| forEach( | |
| (el) => | |
| window.getComputedStyle(el.nextElementSibling).display !== | |
| "none" && slideUp(el.nextElementSibling)); | |
| slideToggle(element.nextElementSibling); | |
| } | |
| }); | |
| }); | |
| /** | |
| * handle inner submenu click | |
| */ | |
| INNER_SUB_MENUS_BTN.forEach(element => { | |
| element.addEventListener("click", () => { | |
| slideToggle(element.nextElementSibling); | |
| }); | |
| }); | |
| //# sourceURL=pen.js | |
| </script> | |
| </body></html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
https://codepen.io/azouaoui-med/pen/wpBadb
https://devdevout.com/css/css-sidebar-menus