diff --git a/resources/views/segments/menu/SideMenu/SideMenu.blade.php b/resources/views/segments/menu/SideMenu/SideMenu.blade.php
new file mode 100644
index 0000000..33f17d5
--- /dev/null
+++ b/resources/views/segments/menu/SideMenu/SideMenu.blade.php
@@ -0,0 +1,29 @@
+<nav id='SideMenu'  style="---side-bg: {{getSetting($data->area->name.'_'.$data->part.'_bg')}};">
+    <div class="text-center py-3" id="side-menu-logo">
+        <a href="{{url('/')}}">
+            <img src="{{asset('upload/images/logo.svg')}}" alt="">
+            {{--                <i class="ri-apple-line "></i>--}}
+        </a>
+    </div>
+    <div id="side-menu-btn">
+        <i class="ri-menu-line"></i>
+    </div>
+    <ul>
+        @foreach(getMenuBySetting($data->area->name.'_'.$data->part.'_menu')->items as $item)
+            <li>
+                @if($item->meta == null)
+                    <a href="{{$item->dest->webUrl()}}">
+                        {{$item->title}}
+                    </a>
+                @else
+                    <a href="{{$item->meta}}">
+                        {{$item->title}}
+                    </a>
+                @endif
+            </li>
+        @endforeach
+    </ul>
+    <div class="p-2" id="side-menu-content">
+        {!! getSetting($data->area->name.'_'.$data->part.'_text') !!}
+    </div>
+</nav>
diff --git a/resources/views/segments/menu/SideMenu/SideMenu.js b/resources/views/segments/menu/SideMenu/SideMenu.js
new file mode 100644
index 0000000..e5bf6ae
--- /dev/null
+++ b/resources/views/segments/menu/SideMenu/SideMenu.js
@@ -0,0 +1,31 @@
+/**
+ * trim char
+ * @param s String
+ * @param c char
+ * @returns {*}
+ */
+function trimer (s, c) {
+    if (c === "]") c = "\\]";
+    if (c === "^") c = "\\^";
+    if (c === "\\") c = "\\\\";
+    return s.replace(new RegExp(
+        "^[" + c + "]+|[" + c + "]+$", "g"
+    ), "");
+}
+document.addEventListener('DOMContentLoaded',function () {
+
+    // make current page
+    document.querySelectorAll('#SideMenu li').forEach(function (el) {
+        if (trimer(el.querySelector('a').getAttribute('href'),'/') == trimer( window.location.href,'/')){
+            el.classList.add('current-page');
+        }
+    });
+    if (document.querySelectorAll('#SideMenu li.current-page').length == 0){
+        document.querySelector('#SideMenu li:first-child').classList.add('current-page');
+    }
+
+    // toggle menu for reposive
+    document.querySelector('#side-menu-btn').addEventListener('click',function () {
+       this.closest('nav').querySelector('ul').classList.toggle('active');
+    });
+});
diff --git a/resources/views/segments/menu/SideMenu/SideMenu.json b/resources/views/segments/menu/SideMenu/SideMenu.json
new file mode 100644
index 0000000..5c44088
--- /dev/null
+++ b/resources/views/segments/menu/SideMenu/SideMenu.json
@@ -0,0 +1,10 @@
+{
+    "name": "SideMenu",
+    "version": "1.0",
+    "author": "xStack",
+    "email": "xshop@xstack.ir",
+    "license": "GPL-3.0-or-later",
+    "url": "https:\/\/xstack.ir",
+    "author_url": "https:\/\/4xmen.ir",
+    "packages": []
+}
\ No newline at end of file
diff --git a/resources/views/segments/menu/SideMenu/SideMenu.php b/resources/views/segments/menu/SideMenu/SideMenu.php
new file mode 100644
index 0000000..2b86149
--- /dev/null
+++ b/resources/views/segments/menu/SideMenu/SideMenu.php
@@ -0,0 +1,52 @@
+<?php
+
+namespace Resources\Views\Segments;
+
+use App\Models\Menu;
+use App\Models\Part;
+use App\Models\Setting;
+
+class SideMenu
+{
+    public static function onAdd(Part $part = null)
+    {
+
+        $setting = new Setting();
+        $setting->section = 'theme';
+        $setting->key = $part->area->name . '_' . $part->part.'_menu';
+        $setting->value = Menu::first()->id;
+        $setting->type = 'MENU';
+        $setting->size = 12;
+        $setting->title =  $part->area->name . ' ' . $part->part .' menu';
+        $setting->save();
+
+        $setting = new Setting();
+        $setting->section = 'theme';
+        $setting->key = $part->area->name . '_' . $part->part.'_text';
+        $setting->value = 'lorem ipsum';
+        $setting->type = 'EDITOR';
+        $setting->size = 12;
+        $setting->title =  $part->area->name . ' ' . $part->part .' text';
+        $setting->save();
+
+
+        $setting = new Setting();
+        $setting->section = 'theme';
+        $setting->key = $part->area->name . '_' . $part->part.'_bg';
+        $setting->value = '#ececec';
+        $setting->type = 'COLOR';
+        $setting->size = 3;
+        $setting->title =  $part->area->name . ' ' . $part->part .' background';
+        $setting->save();
+    }
+    public static function onRemove(Part $part = null)
+    {
+        Setting::where('key',$part->area->name . '_' . $part->part.'_menu')->first()?->delete();
+        Setting::where('key',$part->area->name . '_' . $part->part.'_text')->first()?->delete();
+        Setting::where('key',$part->area->name . '_' . $part->part.'bg')->first()?->delete();
+    }
+    public static function onMount(Part $part = null)
+    {
+        return $part;
+    }
+}
diff --git a/resources/views/segments/menu/SideMenu/SideMenu.scss b/resources/views/segments/menu/SideMenu/SideMenu.scss
new file mode 100644
index 0000000..2cd602c
--- /dev/null
+++ b/resources/views/segments/menu/SideMenu/SideMenu.scss
@@ -0,0 +1,108 @@
+#SideMenu {
+    // scss
+    position: fixed;
+    overflow: hidden;
+    overflow-y: auto;
+    z-index: 8;
+    background: var(---side-bg);
+    width: 20rem;
+    bottom: 0;
+    top: 0;
+    inset-inline-start: 0;
+    img{
+        width: 50% !important;
+        height: auto !important;
+    }
+    ul{
+        list-style: none;
+        padding: 0;
+        li{
+            transition: 600ms;
+            a{
+                padding: .75rem 1rem;
+                display: block;
+            }
+            text-align: center;
+
+            &:hover{
+                background: var(--xshop-secondary);
+               a{
+                   color: var(--xshop-diff);
+               }
+            }
+
+            &.current-page{
+                background: var(--xshop-primary);
+                a{
+                    color: var(--xshop-diff);
+                }
+            }
+        }
+    }
+    #side-menu-btn{
+        display: none;
+    }
+}
+
+main{
+    position: relative;
+    inset-inline-start: 20rem;
+    width: calc(100% - 20rem);
+}
+
+
+/*-1024px width*/
+@media (max-width: 1024px) {
+    main{
+        position: static;
+        width: auto;
+    }
+
+    #SideMenu{
+        inset-inline-start: 0;
+        width: 100%;
+        bottom: auto;
+        overflow: visible !important;
+        //position: relative;
+
+        #side-menu-logo{
+            float: left;
+            img{
+                width: auto !important;
+                height: 48px !important;
+                margin-right: 1rem;
+                margin-left: 1rem;
+            }
+        }
+        ul{
+            display: none;
+            position: absolute;
+            top: 100%;
+            left: 0;
+            right: 0;
+            background: var(--xshop-background);
+            li{
+                text-align: start;
+            }
+            &.active{
+                display: block ;
+            }
+        }
+        #side-menu-btn{
+            display: block !important;
+            float: right;
+            padding: 1.7rem 2rem;
+            &:hover{
+                background: var(--xshop-primary);
+                color: var(--xshop-diff);
+            }
+        }
+
+        #side-menu-content{
+            display:  none !important;
+        }
+    }
+
+
+
+}
diff --git a/resources/views/segments/menu/SideMenu/screenshot.png b/resources/views/segments/menu/SideMenu/screenshot.png
new file mode 100644
index 0000000..e396580
Binary files /dev/null and b/resources/views/segments/menu/SideMenu/screenshot.png differ
diff --git a/resources/views/segments/products/TreeGridProducts/TreeGridProducts.js b/resources/views/segments/products/TreeGridProducts/TreeGridProducts.js
index 9330ae8..6007c73 100644
--- a/resources/views/segments/products/TreeGridProducts/TreeGridProducts.js
+++ b/resources/views/segments/products/TreeGridProducts/TreeGridProducts.js
@@ -3,7 +3,7 @@ import {tns} from "tiny-slider/src/tiny-slider";
 var treeSlider,treeSliderX, treeSliderY ;
 
 document.addEventListener('DOMContentLoaded', () => {
-    console.log('3 slider');
+    console.log('3 slider 1');
     document.querySelectorAll('.tree-grid .section-main')?.forEach(function (el) {
         if (el.classList.contains('.tns-slider')){
             console.log('ignore');