@nixweb/nixloc-ui 0.0.292 → 0.0.294

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nixweb/nixloc-ui",
-  "version": "0.0.292",
+  "version": "0.0.294",
   "description": "Componentes UI",
   "author": "Fábio Ávila <fabio@nixweb.com.br>",
   "private": false,

package/src/component/layout/FixedBar.vue

@@ -1,27 +1,17 @@
 <template>
   <div>
-    <div
-      v-show="!isLoading('panel')"
-      class="bar side-by-side"
-      :style="
-        'min-height:' + height + 'px; background-color:' + backgroundColor
-      "
-      :class="{
+    <div v-show="!isLoading('panel')" class="bar side-by-side" :style="'min-height:' + height + 'px; background-color:' + backgroundColor
+      " :class="{
         top: position == 'top',
         footer: position == 'footer',
         none: position == 'none',
-      }"
-    >
+      }">
       <div class="size">
         <div :class="{ 'side-by-side': showButtonClose }">
           <slot></slot>
         </div>
-        <div
-          :class="{ 'side-by-side': showButtonClose }"
-          class="close-icon"
-          v-if="position == 'top' && showButtonClose"
-          @click="close"
-        >
+        <div :class="{ 'side-by-side': showButtonClose }" class="close-icon" v-if="position == 'top' && showButtonClose"
+          @click="close">
           <i class="fa-regular fa-xmark"></i>
         </div>
       </div>

package/src/component/layout/Molded.vue

@@ -19,11 +19,12 @@ export default {
 .molded {
   border: 1px solid #e8eaed;
   background-color: white;
-  border-radius: 8px !important;
+  border-radius: 10px !important;
   padding: 10px;
   padding-top: 15px;
   padding-left: 30px;
   padding-right: 30px;
   padding-bottom: 10px;
+  box-shadow: 0px 10px 100px -6px rgb(0 0 0 / 5%);
 }
 </style>

package/src/component/layout/NewAccount.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="icon-logout" @click="execute">
-      <i class="fa-solid fa-right-from-bracket"></i>
+      <i class="fa-duotone fa-solid fa-right-from-bracket"></i>
     </div>
     <div class="profile-container" v-if="hideShow">
       <div class="item-header text-center">
@@ -67,7 +67,7 @@ export default {
   width: 40px;
   height: 40px;
   border-radius: 12px;
-  color: #3D4EAE;
+  color: #F0134D;
   font-size: 22px;
 }
 

package/src/component/layout/NewHeader.vue

@@ -1,63 +1,60 @@
 <template>
     <div>
-        <div :class="['top', { collapsed: isSidebarCollapsed }]" :style="'background-color:' + backgroundColor">
+        <div :class="['top', { collapsed: menuCollapsed, notCollapsed: !menuCollapsed }]">
             <div class="side-by-side top-space">
                 <slot></slot>
             </div>
+            <div class="side-by-side div-theme">
+                <ToggleTheme />
+            </div>
         </div>
-        <br />
     </div>
 </template>
 
 <script>
 
-import { mapGetters } from "vuex";
+import ToggleTheme from "@nixweb/nixloc-ui/src/component/shared/ToggleTheme.vue";
+
+import { mapState } from "vuex";
 
 export default {
     name: "Top",
+    components: {
+        ToggleTheme
+    },
     props: {
         backgroundColor: {
             type: String,
             default: "#4680A5",
         },
     },
-    data() {
-        return {
-            isSidebarCollapsed: false
-        }
-    },
     computed: {
-        ...mapGetters("generic", ["event"]),
-    },
-    watch: {
-        event: {
-            handler(event) {
-                if (event.name == "isSidebarCollapsed") {
-                    this.isSidebarCollapsed = event.data;
-                }
-            },
-            deep: true,
-        },
+        ...mapState("generic", ["menuCollapsed"]),
     },
 };
 </script>
 
 <style scoped>
 .top {
-    padding-top: 4px;
-    left: 298px;
-    right: 10px;
-    height: 55px;
-    top: 5px;
-    border-radius: 18px;
-    border-bottom: 0px solid #eff0f1;
-    box-shadow: 0px 10px 30px -6px rgb(0 0 0 / 10%);
     position: fixed;
+    padding-left: 30px;
+    padding-top: 5px;
+    right: 0px;
+    height: 58px;
     transition: all 0.3s ease;
-    z-index: 100;
+    background-color: #FAFAFC; 
+    z-index: 1000;
+}
+
+.top.notCollapsed {
+    left: 270px;
 }
 
 .top.collapsed {
-    left: 110px;
+    left: 65px;
+}
+
+.div-theme {
+    margin-left: 15px;
 }
 </style>

package/src/component/layout/NewIconMolded.vue

@@ -2,10 +2,9 @@
   <div>
     <div v-for="icon in icons" class="molded-icon side-by-side" @click="executeEvent(icon.eventName)" v-b-tooltip.hover
       :title="icon.tooltip">
-      <div class="icon-molded-icon" :class="{
-        'icon-active-top': menuActive == icon.module,
-        'icon-normal-top': menuActive != icon.module,
-      }">
+      <div :class="{
+        'icon-active-header': moduleActive === icon.module,
+      }" class="icon-molded-icon">
         <i :class="icon.icon"></i>
       </div>
     </div>
@@ -21,7 +20,7 @@ export default {
     icons: Array,
   },
   data() {
-    return { menuActive: "" };
+    return { moduleActive: "" };
   },
   methods: {
     ...mapMutations("generic", ["addEvent"]),
@@ -29,12 +28,15 @@ export default {
       this.addEvent({
         name: eventName,
       });
+      this.addEvent({
+        name: "cleanMenuSelected",
+      });
     },
   },
   watch: {
     $route: {
       handler: function (router) {
-        this.menuActive = router.matched[0].props.default.module;
+        this.moduleActive = router.matched[0].props.default.module;
       },
       deep: true,
     },
@@ -49,12 +51,21 @@ export default {
   margin-left: 10px;
   margin-top: 4px;
   cursor: pointer;
-
 }
 
 .icon-molded-icon {
   font-size: 20px;
   margin-left: 10px;
-  color: #2c3453 !important;
+  color: #2C3453;
+}
+
+.module-active {
+  border-radius: 50px;
+  background-color: #2C3453;
+}
+
+.icon-active-header {
+  color: #D98621;
+  font-size: 22px;
 }
 </style>