<template> <div class="main-page" ref="myInput3"> <div v-if="showMainpag"> <div class="home-list p-3 main" id="main"> <div class="row"> <div class="col-md-12 col-sm-12 main-button"> <div class="button-change"> <div @click="nextNumber" title="پهنای بیشتر"> <span> <svg data-testid="chevron-double-lg-left-icon" class="s12 icon-chevron-double-lg-right span1" > <use data-v-46e9fe5b="" href="/assets/img/icons.d6ff8c17.svg#chevron-double-lg-left" ></use> </svg> </span> </div> <p>پهنای {{ numberPag }}</p> <div @click="beforeNumber" title="پهنای کمتر"> <span> <svg data-testid="chevron-double-lg-left-icon" class="s12 icon-chevron-double-lg-right" > <use data-v-46e9fe5b="" href="/assets/img/icons.d6ff8c17.svg#chevron-double-lg-left" ></use> </svg> </span> </div> </div> <button title="بستن" @click="hidenPanel()" type="button" class="popUp-tab__clear btn button-hiden" style="margin-right: -20px" > <span class="tavasi tavasi-Component-21--1"></span> </button> <button :class="{ 'text-primary borderBottom': showNavigation }" type="button" class="popUp-tab__clear btn p-2 ms-2" style="font-size: 11px" @click.prevent="showNavigation = true" > مشخصات </button> <button :class="{ 'text-primary borderBottom': !showNavigation }" type="button" class="popUp-tab__clear btn p-2 me-2" @click.prevent="showNavigation = false" style="font-size: 11px" > موضوعات </button> </div> </div> <hr /> <div class="row mt-4" style="position: relative"> <div class="col-md-12"> <div v-if="showNavigation"> <div class="collapses-main"> <div class="accordion" id="accordionExample"> <div class="card rounded-0"> <div class="card-header" id="headingOne" style="height: 3rem" > <div class="d-flex justify-content-between"> <p style="font-size: 12px; color: black">مشخصات اصلی</p> <button class="btn btn-link btn-block text-end collapsed button-meno" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne" > <span class="tavasi tavasi-Component-358--1"></span> </button> </div> </div> <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample" > <div class="card-body"> <form> <div class="form-group"> <label for="formGroupExampleInput" style="font-size: 11px" >عنوان </label> <input type="text" class="form-control select-text" id="formGroupExampleInput" placeholder="عنوان را وارد نمایید." v-model="cloneItem.title" style="font-size: 11px" /> </div> <div class="form-group"> <label for="formGroupExampleInput2" style="font-size: 11px" >صاحب اثر </label> <input type="text" class="form-control select-text" id="formGroupExampleInput2" placeholder=" عنوان را وارد نمایید." v-model="cloneItem.author" style="font-size: 11px" /> </div> <div class="d-flex"> <div class="form-group"> <label for="formGroupExampleInput2" style="font-size: 11px" > کد داخلی </label> <input type="text" class="form-control select-text" id="formGroupExampleInput2" placeholder="کد داخلی را وارد کنید " v-model="cloneItem.meet_lid" style="font-size: 11px" /> </div> <div class="form-group me-1"> <label for="formGroupExampleInput2" style="font-size: 11px" > نوع </label> <select type="text" class="custom-select select-text" id="formGroupExampleInput2" v-model="cloneItem.format" style=" font-size: 11px; border-color: rgba( 150, 243, 243, 0.4588235294 ); " placeholder="نوع جلسه را وارد کنید ." > <option v-if="cloneOptions" v-for="(cloneOption, index) in cloneOptions" :key="index" > {{ cloneOption.title }} </option> </select> </div> </div> <div class="form-group"> <label for="formGroupExampleInput" style="font-size: 11px" >دوره </label> <input type="text" class="form-control select-text" id="formGroupExampleInput" placeholder="نام دوره را وارد فرمایید" v-model="cloneItem.branch" style="font-size: 11px" /> </div> <div class="form-group"> <label for="formGroupExampleInput2" style="font-size: 11px" > تاریخ </label> <input type="text" class="form-control select-text" id="formGroupExampleInput2" placeholder="تاریخ را وارد کنید ." :value="datefa()" style="font-size: 11px" /> </div> <div class="" style="position: relative; right: 80%"> <button type="submit" class="btn btn-primary" style="font-size: 11px" @click.prevent="save2()" > ثبت </button> </div> </form> </div> </div> </div> <div class="card rounded-0"> <div class="card-header" id="headingTwo" style="height: 3rem" > <div class="d-flex justify-content-between"> <p style="font-size: 12px; color: black">مشخصات فرعی</p> <button class="btn btn-link btn-block text-end collapsed button-meno" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" > <span class="tavasi tavasi-Component-358--1"></span> </button> </div> </div> <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample" > <div class="card-body"> <form> <div class="form-group"> <label for="formGroupExampleInput" style="font-size: 11px" >عنوان موضوعی </label> <input type="text" class="form-control select-text" id="formGroupExampleInput" placeholder="عنوان را وارد کنید" v-model="cloneItem.subtitle" style="font-size: 11px" /> </div> <div class="form-group"> <label for="formGroupExampleInput2" style="font-size: 11px" > پیوند </label> <input type="text" class="form-control select-text" id="formGroupExampleInput2" placeholder="پیوند اینترنتی را وارد کنید " v-model="cloneItem.link" style="font-size: 11px" /> </div> <div class="d-flex"> <div class="form-group"> <label for="formGroupExampleInput2" style="font-size: 11px" > شهر </label> <input type="text" class="form-control select-text" id="formGroupExampleInput2" placeholder=" شهر" v-model="cloneItem.city" style="font-size: 11px" /> </div> <div class="form-group me-1"> <label for="formGroupExampleInput2" style="font-size: 11px" > مکان </label> <input type="text" class="form-control select-text" id="formGroupExampleInput2" placeholder=" مکان" v-model="cloneItem.place" style="font-size: 11px" /> </div> </div> <div class="form-group"> <label for="formGroupExampleInput" style="font-size: 11px" > نشانی </label> <input type="text" class="form-control select-text" id="formGroupExampleInput" placeholder="نشانی را وارد کنید" v-model="cloneItem.address" style="font-size: 11px" /> </div> <div class="form-group"> <label for="formGroupExampleInput2" style="font-size: 11px" > تاریخ پایان </label> <input type="text" class="form-control select-text" id="formGroupExampleInput2" placeholder=" تاریخ پایان را وارد کنید" v-model="cloneItem.end_date" style="font-size: 11px" /> </div> <div class="" style="position: relative; right: 80%"> <button type="submit" class="btn btn-primary" style="font-size: 11px" @click.prevent="save2()" > ثبت </button> </div> </form> </div> </div> </div> <div class="card rounded-0"> <div class="card-header" id="headingThree" style="height: 3rem" > <div class="d-flex justify-content-between"> <p style="font-size: 12px; color: black"> اطلاعات جلسه </p> <button class="btn btn-link btn-block text-end collapsed button-meno" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree" > <span class="tavasi tavasi-Component-358--1"></span> </button> </div> </div> <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample" > <div class="card-body"> <form> <div class="form-group"> <label for="formGroupExampleInput" style="font-size: 11px" >نوع مخاطب </label> <input type="text" class="form-control select-text" id="formGroupExampleInput" placeholder="عنوان را وارد کنید." v-model="cloneItem.audience" style="font-size: 11px" /> </div> <div class="form-group"> <label for="formGroupExampleInput2" style="font-size: 11px" > مناسبت </label> <input type="text" class="form-control select-text" id="formGroupExampleInput2" placeholder="عنوان را وارد کنید." v-model="cloneItem.ralation" style="font-size: 11px" /> </div> <div class="form-group"> <label for="formGroupExampleInput" style="font-size: 11px" >حاضرین </label> <input type="text" class="form-control select-text" id="formGroupExampleInput" placeholder="عنوان را با ، جدا کنید" v-model="cloneItem.attendees" style="font-size: 11px" /> </div> <div class="" style="position: relative; right: 80%"> <button type="submit" class="btn btn-primary" style="font-size: 11px" @click.prevent="save2()" > ثبت </button> </div> </form> </div> </div> </div> <div class="card rounded-0"> <div class="card-header" id="headingFour" style="height: 3rem" > <div class="d-flex justify-content-between"> <p style="font-size: 12px; color: black">کدها</p> <button class="btn btn-link btn-block text-end collapsed button-meno" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour" > <span class="tavasi tavasi-Component-358--1"></span> </button> </div> </div> <div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordionExample" > <div class="card-body"> <form> <div class="form-group"> <label for="formGroupExampleInput" style="font-size: 11px" > کد جلسه </label> <input type="text" class="form-control select-text" id="formGroupExampleInput" placeholder="کد جلسه را وارد کنید " v-model="cloneItem.meet_code" style="font-size: 11px" /> </div> <div class="form-group"> <label for="formGroupExampleInput2" style="font-size: 11px" > کد شخصی </label> <input type="text" class="form-control select-text" id="formGroupExampleInput2" placeholder="کد شخصی را وارد کنید " v-model="cloneItem.person_code" style="font-size: 11px" /> </div> <div class="form-group"> <label for="formGroupExampleInput" style="font-size: 11px" >کد پژوهش </label> <input type="text" class="form-control select-text" id="formGroupExampleInput" placeholder="کد پژوهش را وارد کنید " v-model="cloneItem.research_code" style="font-size: 11px" /> </div> <div class="form-group"> <label for="formGroupExampleInput" style="font-size: 11px" >کد 1 </label> <input type="text" class="form-control select-text" id="formGroupExampleInput" placeholder="کد داخلی را وارد کنید " v-model="cloneItem.meet_lid" style="font-size: 11px" /> </div> <div class="" style="position: relative; right: 80%"> <button type="submit" class="btn btn-primary" style="font-size: 11px" @click.prevent="save2()" > ثبت </button> </div> </form> </div> </div> </div> <div class="card rounded-0"> <div class="card-header" id="headingFive" style="height: 3rem" > <div class="d-flex justify-content-between"> <p style="font-size: 12px; color: black">خلاصه</p> <button class="btn btn-link btn-block text-end collapsed button-meno" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive" > <span class="tavasi tavasi-Component-358--1"></span> </button> </div> </div> <div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#accordionExample" > <div class="card-body"> <form> <div class="form-group"> <label for="formGroupExampleInput" style="font-size: 11px" >فعل </label> <input type="text" class="form-control select-text" id="formGroupExampleInput" placeholder="عنوان را وارد کنید" v-model="cloneItem.verb" style="font-size: 11px" /> </div> <div class="form-group"> <label for="formGroupExampleInput2" style="font-size: 11px" > واژگان </label> <input type="text" class="form-control select-text" id="formGroupExampleInput2" placeholder=" عنوان را با , جدا کنید" v-model="cloneItem.keywords" style="font-size: 11px" /> </div> <div class="form-group"> <label for="formGroupExampleInput" style="font-size: 11px" >چکیده </label> <textarea type="text" class="form-control select-text" id="formGroupExampleInput" rows="4" placeholder="متن را اینجا بنویسید" v-model="cloneItem.mintro" style="font-size: 11px" ></textarea> </div> <div class="" style="position: relative; right: 80%"> <button type="submit" class="btn btn-primary" style="font-size: 11px" @click.prevent="save2()" > ثبت </button> </div> </form> </div> </div> </div> </div> </div> </div> <div v-else> <div class="container"> <div class="navigation mt-3" style="max-height: 400px; position: relative" > <subject-form style="font-size: 13px"></subject-form> </div> </div> </div> </div> </div> </div> </div> <div v-else> <div> <div class="button-main"> <button @click="showfilter()"> <span class="tavasi tavasi-Component-160--1"></span> </button> </div> </div> </div> </div> </template> <script> import { mapState, mapActions } from "pinia"; import apis from "~/apis/listApi"; import formBuilderMixin from "~/extensions/formBuilderExtension.js"; export default { extends: formBuilderMixin, props: { listPanelUrl: { default: "", }, }, beforeCreate() { ApiService.init(import.meta.env.VITE_REPO_BASE_URL); }, emits: ["show-paragraph"], watch: { selectedItemGetter(newVal) { this.chengTextMain(); }, }, mounted() { if (this.selectedProjectGetter) { this.getListItem(); this.chengTextMain(); // this.listMindex(); this.cloneItem = structuredClone(this.selectedItemGetter); if (window.location.href.includes("list")) { this.cloneOptions = structuredClone( this.selectedProjectGetter.meta[0].items[4].options ); } this.$emit("statusPag", (this.statuspag = 1)); } }, data() { return { cloneItem: {}, cloneOptions: [], numberPag: 1, statuspag: 1, showpag: true, showMainpag: true, showNavigation: true, prevActiveIndex: 0, loading: false, fetchingData: false, items: [], lists: [], textlists: "", // pagination: { // pages: 0, // total: 0, // page: 1, // offset: 0, // page * per_page // limit: 50, //per_page // }, }; }, computed: { ...mapState(["isSidebarCollapsed"]), ...mapState("list", [ "selectedProjectGetter", "listIdGetter", "selectedItemGetter", "listGetter", ]), }, methods: { ...mapActions(["sidebarCollapsedSetter"]), ...mapActions("list", ["SET_IS_RETURN_FROM_ITEM_SHOW_PAGE"]), // mehdi showMenoBarSm() { // this.$refs.myInput3.classList.add("menuBar-sm"); // this.$refs.myInput3.classList.remove("menuBar-lg" , "menuBar-xl"); this.statuspag = 1; this.$emit("statusPag", (this.statuspag = 1)); }, chengTextMain() { this.cloneItem = structuredClone(this.selectedItemGetter); }, showMenoBarLg() { // this.$refs.myInput3.classList.add("menuBar-lg"); // this.$refs.myInput3.classList.remove("menuBar-sm" , "menuBar-xl"); this.statuspag = 2; this.$emit("statusPag", (this.statuspag = 2)); }, showMenoBarXl() { this.statuspag = 3; this.$emit("statusPag", (this.statuspag = 3)); }, nextNumber() { if (this.numberPag > 3) { this.numberPag = 3; } else { this.numberPag++; } switch (this.numberPag) { case (this.numberPag = 0): this.numberPag = 0; this.$emit("statusPag", (this.statuspag = 0)); this.showMainpag = false; break; case (this.numberPag = 1): this.showMenoBarSm(); break; case (this.numberPag = 2): this.showMenoBarLg(); break; case (this.numberPag = 3): this.showMenoBarXl(); break; } }, beforeNumber() { if (this.numberPag <= 0) { this.numberPag = 0; } else { this.numberPag--; } switch (this.numberPag) { case (this.numberPag = 0): this.numberPag = 0; this.$emit("statusPag", (this.statuspag = 0)); this.showMainpag = false; break; case (this.numberPag = 1): this.showMenoBarSm(); break; case (this.numberPag = 2): this.showMenoBarLg(); break; case (this.numberPag = 3): this.showMenoBarXl(); break; } }, hidenPanel() { //this.$emit("hide-panel"); this.showMainpag = false; // this.showpag= false; }, showfilter() { // this.$refs.myInput3.classList.remove("d-md-none"); // document.getElementById("main").classList.toggle("d-main-none"); // document.getElementById("main").style.display = "inline-block"; this.showMainpag = true; this.numberPag = 1; this.$emit("statusPag", (this.statuspag = 1)); }, // listMindex() { // this.lists = this.selectedItemGetter.mindex.split("\n"); // var tt = ""; // this.lists.forEach((list) => { // tt = tt + "<p>" + list + "</p>"; // }); // this.textlists = tt; // }, // showfilter() { // this.$ref.myInput.classList.remove("hide"); // this.showpag1=true // }, // hidefilter() { // this.$ref.myInput.classList.add("hide"); // this.showpag1=false // }, save2() { if (window.location.href.includes("search")) { const formData = { id_store: this.selectedItemGetter._id, item_state: 1, meta: JSON.stringify(this.cloneItem), }; const url = this.selectedItemGetter.id ? apis.item.edit : apis.item.addbylist; ApiService.formData(url, formData) .then((res) => { this.mySwalToast({ title: "تبریک", html: res.data.message, icon: "success", }); this.$emit("update-list"); }) .finally(() => { this.buttonLoading = false; }); } else if (window.location.href.includes("list")) { const formData = { id_store: this.selectedItemGetter?.id_store, item_state: this.selectedItemGetter?.item_state, meta: JSON.stringify(this.cloneItem), }; const url = this.selectedItemGetter.id ? apis.item.edit : apis.item.addbylist; ApiService.formData(url, formData) .then((res) => { this.mySwalToast({ title: "تبریک", html: res.data.message, icon: "success", }); this.$emit("update-list"); }) .finally(() => { this.buttonLoading = false; }); } else { } }, save() { const formData = { id_store: this.selectedItemGetter?.id_store, item_state: this.selectedItemGetter?.item_state, meta: JSON.stringify(this.cloneItem), }; const url = this.selectedItemGetter.id ? apis.item.edit : apis.item.addbylist; ApiService.formData(url, formData) .then((res) => { this.mySwalToast({ title: "تبریک", html: res.data.message, icon: "success", }); this.$emit("update-list"); }) .finally(() => { this.buttonLoading = false; }); }, // mehdi showParagraphs(item, index) { this.$emit("show-paragraph", item); this.items[this.prevActiveIndex]["active"] = false; this.items[index]["active"] = true; this.prevActiveIndex = index; }, getListItem() { if (this.fetchingData) return; this.fetchingData = true; const payload = { projectid: this.selectedProjectGetter?.id, item_state: this.selectedProjectGetter?.item_state, listid: this.listIdGetter, subjectid: this.listIdGetter, bychilds: 0, ...this.pagination, // offset: offset, // limit: this.pagination.limit, }; let url = apis.listItem.list; if (this.$route.params.prevPage == "subjects") url = apis.subjectRelation.list; ApiService.formData(url, payload) .then((res) => { this.items = res.data.data; this.items.forEach((element, index) => { if (element.id == this.selectedItemGetter.id) { element["active"] = true; this.prevActiveIndex = index; } }); this.pagination = { ...this.pagination, ...res.data.pagination }; }) .catch((err) => { this.mySwalToast({ title: err.response.data.message, html: "", text: "", icon: "error", }); }) .finally(() => { this.fetchingData = false; }); }, goToListPage() { this.SET_IS_RETURN_FROM_ITEM_SHOW_PAGE(this.listGetter.parent); const routeName = this.$route.params.prevPage; this.$router.push({ name: routeName, }); }, loadMore($event) { // const listElm = document.querySelector("#last-search"); const listElm = $event.target; const vm = this; if (vm.busy) return; if (listElm.scrollTop + listElm.clientHeight >= listElm.scrollHeight) { this.busy = true; vm.pagination.offset = vm.pagination.offset + vm.pagination.limit; if (vm.pagination.total > vm.pagination.offset) { setTimeout(() => { vm.getListOnScroll(); }, 300); } else { vm.mySwalToast({ title: "کاربر محترم", html: "دیگر رکوردی جهت بارگزاری وجود ندارد.", icon: "info", position: "bottom-start", }); vm.busy = false; } } else vm.busy = false; }, getListOnScroll() { if (this.fetchingData) return; this.fetchingData = true; const payload = { projectid: this.selectedProjectGetter?.id, item_state: this.selectedProjectGetter?.item_state, listid: this.listIdGetter, subjectid: this.listIdGetter, bychilds: 0, ...this.pagination, }; let url = apis.listItem.list; if (this.$route.params.prevPage == "subjects") url = apis.subjectRelation.list; ApiService.formData(url, payload) .then((res) => { this.items = [...this.items, ...res.data.data]; this.pagination = { ...this.pagination, ...res.data.pagination }; }) .finally(() => { this.busy = false; }); }, datefa(item) { var m = this.cloneItem.begin_date; var d = new Date(m).toLocaleDateString("fa-IR"); return d; }, }, }; </script> <style scoped lang="scss"> .select-text { text-align: right; background-color: #fff; font-size: 14px; border-radius: 8px; border-color: #f1f1f1; padding: 6px; &:hover { border-color: #afbac6; } } .open-sub-folder { text-decoration: none; &:hover { background-color: #eee; } } .menu-bar-content { position: static; flex: 1 1 100%; width: auto; height: 180px; &.show-list-panel { right: 0px !important; } } .home-list__content { /*max-height: calc(100vh - 12em);*/ height: calc(100vh - 8.5em); position: relative; overflow-x: hidden; padding-left: 0.3em; &.loading { //background-image: url('./img/item-loading.svg'); background-repeat: repeat-y; background-position: top right; background-size: 12em; &::before { content: ""; clear: both; position: absolute; right: 0; width: 0.5em; height: 100%; background-color: #fff; animation-name: example; animation-duration: 2s; animation-fill-mode: forwards; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } } } .sidebar-toggler { right: 2.6em; &.expanded { right: 11.1em; } } .meta-list { display: flex; align-items: ceter; flex-wrap: nowrap; white-space: nowrap; overflow: auto; } //mehdi .button-meno { font-size: 12px; transform: rotate(90deg); width: 10px; height: 10px; margin-top: 15px; text-decoration: none; span:hover { color: #00b6e3; } } .main-button { display: grid; grid-template-columns: 1fr 1fr 2fr; } .button-change { display: flex; div { margin: 5px; } p { width: 33px; text-align: center; font-size: 11px; position: relative; top: 8px; } svg { font-size: 11px; &:hover { fill: #00b6e3; } } .span1 { transform: rotate(180deg); } } .main { position: relative; &::before { content: ""; height: 35em; border-right: solid #f1f1f1 1px; position: absolute; top: 0px; left: 0px; right: 10px; bottom: 0px; } } .borderBottom { position: relative; &::before { content: ""; border-bottom: solid #00b6e3 2px; position: absolute; top: 31px !important; left: 0px; right: 0px; bottom: 0px; } } hr { margin: 0px; } .lists { overflow-y: scroll; } .borderBottom::before { content: ""; border-bottom: solid #00b6e3 2px; position: absolute; top: 46px; left: 0px; right: 0px; bottom: 0px; } .active { position: relative; background-color: #d8f8fd; text-decoration: none; color: #212529; } .Breadcrumbs { //width: 230px; margin: 2px auto; position: relative; right: 10px; } .btnHide svg { transform: rotate(180deg); } .button-main { position: relative; & button { border: 0px; background-color: #f8f8f8; text-align: center; & span { color: #333238; } } } @media (min-width: 992px) { .navigation { overflow-x: hidden; overflow-y: scroll; width: 100%; height: 450px; margin-right: 5px; min-width: 200px; } .collapses-main { width: 100%; height: 80vh; margin-right: 5px; min-width: 200px; //background-color: #00b6e3; overflow: hidden; overflow-y: scroll; } .d-main-none { display: none; } .button-main { top: 5px; // left: -24vh ; } .button-hiden { display: none; } } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .Breadcrumbs { position: relative !important; top: 0px !important; } .menu-bar-content { max-width: 220px !important; position: relative; top: 0px; right: 0px; } .navigation { width: 200px !important; & div { width: 190px !important; } } .hide { display: none; } .d-main-none { display: none; } .button-main { top: 20px; } .main-page { position: fixed; left: 0rem; background-color: #fff; } .button-change { display: none; } } @media only screen and (min-width: 576px) and (max-width: 766.98px) { .Breadcrumbs { position: relative !important; top: 0px !important; } .navigation { width: 200px !important; & div { width: 190px !important; } } .menu-bar-content { max-width: 220px !important; position: fixed; top: 0px; right: 0px !important; background-color: #fff; z-index: 999999; } .button-main { display: none; } .main-page { position: fixed; left: 0rem; background-color: #fff; } .button-change { display: none; } } @media (max-width: 575.98px) { .Breadcrumbs { position: relative !important; top: 0px !important; } .menu-bar-content { max-width: 220px !important; position: relative; top: 0px; right: 0px !important; background-color: #fff; } .navigation { width: 200px !important; & div { width: 190px !important; } } .menu-bar-content { max-width: 220px !important; position: fixed; top: 0px; right: 0px !important; background-color: #fff; z-index: 9999999; } .button-main { display: none; } .main-page { position: fixed; left: 0rem; background-color: #fff; } .button-change { display: none; } } //mehdi </style>