add app layout collapsible

anubias2/src/Anubias.vue

@@ -1,36 +1,152 @@
 <template>
-  <div id="app">
+  <div id="app" :style="appStyle">
     <div id="tabs">
       tabs
     </div>
+    <div id="buttons">
+      buttons
+    </div>
     <div id="content">
       content
     </div>
-    <div id="components">
-      components
+    <div id="components" :class="componentsClass" :style="componentsStyle">
+      <h3 @click="expandComponents">
+        <span>
+          Components
+        </span>
+        <i class="ri-checkbox-indeterminate-line" @click="toggleComponentsCollapse"></i>
+      </h3>
+    </div>
+    <div id="properties" :class="propertiesClass" :style="propertiesStyle">
+      <h3 @click="expandProperties">
+        <span>
+          Properties
+        </span>
+        <i class="ri-checkbox-indeterminate-line" @click="togglePropertiesCollapse" ></i>
+      </h3>
     </div>
-    <div id="properties">
-      proprties
+    <div id="pages" :class="pagesClass">
+      <h3 @click="expandPages">
+        pages
+        <i class="ri-checkbox-indeterminate-line" @click="togglePagesCollapse"></i>
+      </h3>
     </div>
-    <div id="pages">
-      pages
+    <div id="terminal-btn">
+      <i class="ri-terminal-line"></i>
     </div>
   </div>
 </template>
 
 <script>
-import {mapActions} from 'vuex'
-
+import {mapActions} from 'vuex';
+import {mapState} from 'vuex';
 export default {
   name: "Anubias",
   mounted() {
-    this.setIdeTitle('Anubias');
+    this.setIdeTitle('AnubiasApp');
   }, methods: {
-    ...mapActions(['setIdeTitle']),
+    ...mapActions(['setIdeTitle','toggleComponentsCollapse','togglePropertiesCollapse','togglePagesCollapse']),
+    expandComponents(e){
+      if (this.ide.components.collapsed && e.target.tagName !== 'I'){
+        this.toggleComponentsCollapse();
+      }
+    },
+    expandProperties(e){
+      if (this.ide.properties.collapsed && e.target.tagName !== 'I'){
+        this.togglePropertiesCollapse();
+      }
+    },
+    expandPages(e){
+      if (this.ide.pages.collapsed && e.target.tagName !== 'I'){
+        this.togglePagesCollapse();
+      }
+    },
+  },computed:{
+    ...mapState(['ide']),
+    componentsClass(){
+      if (this.ide.components.collapsed){
+        return 'collapsed';
+      }
+      return '';
+    },
+    propertiesClass(){
+      if (this.ide.properties.collapsed){
+        return 'collapsed';
+      }
+      return '';
+    },
+    pagesClass(){
+      if (this.ide.pages.collapsed){
+        return 'collapsed';
+      }
+      return '';
+    },
+    appStyle(){
+      let style = '';
+      if (this.ide.pages.collapsed){
+        style += 'grid-template-rows: 2em 2em 5fr 5fr 30px;';
+      }
+      return style;
+    },
+    propertiesStyle(){
+      let style = '';
+      // if one of them expanded
+      if (this.ide.components.collapsed ^ this.ide.properties.collapsed){
+          style += 'grid-row: 3 / 5;';
+      }
+      if (this.ide.components.collapsed && !this.ide.properties.collapsed){
+        style += 'grid-column: 16 / 19;';
+      }
+      return style;
+    },
+    componentsStyle(){
+      let style = '';
+      // if one of them expanded
+      if (this.ide.components.collapsed ^ this.ide.properties.collapsed){
+          style += 'grid-row: 3 / 5;';
+      }
+      if (this.ide.properties.collapsed && !this.ide.components.collapsed){
+        style += 'grid-column: 16 / 19;';
+      }
+      return style;
+    }
   }
 }
 </script>
 
 <style scoped>
+ h3{
+   background: var(--def-bg);
+   text-align: center;
+   font-weight: 100;
+   position: relative;
+   overflow: hidden;
+ }
+ h3 i{
+   position: absolute;
+   padding: 0 4px;
+   left: 0;
+   font-weight: 100;
+ }
+ h3 i:hover{
+   background: var(--lighter-bg);
+ }
+
+ #terminal-btn{
+   position: fixed;
+   left: 0;
+   bottom: 0;
+   background: var(--def-bg);
+   border: 1px solid var(--darker-bg);
+   width: 30px;
+   height: 30px;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   transition: var(--transition-duration);
+ }
 
+ #terminal-btn:hover{
+   background: var(--lighter-bg);
+ }
 </style>

anubias2/src/main.ts

@@ -1,9 +1,8 @@
-import Vue from 'vue'
 import {createApp} from 'vue';
 import "./css";
 import App from './Anubias.vue';
 import './samples/node-api';
-import store from "./store";
+import store from './stores/store';
 
 
 const app = createApp(App);

anubias2/src/stores/ideStore.js

@@ -0,0 +1,48 @@
+
+const ideStore = {
+    state: () => ({
+        title: 'Anubias',
+        tabs: {},
+        components: {
+            collapsed: false,
+        },
+        properties: {
+            collapsed: false,
+        },
+        pages: {
+            collapsed: false,
+        },
+    }),
+    mutations: {
+        changeIdeTitle(state, title) {
+            document.querySelector('title').innerText = title;
+            state.title = title;
+        },
+        toggleComponentsCollapse(state){
+            state.components.collapsed = !state.components.collapsed;
+        },
+        togglePropertiesCollapse(state){
+            state.properties.collapsed = !state.properties.collapsed;
+        },
+        togglePagesCollapse(state){
+            state.pages.collapsed = !state.pages.collapsed;
+        },
+    },
+    actions: {
+        setIdeTitle(context, title) {
+            context.commit('changeIdeTitle', title);
+        },
+        toggleComponentsCollapse(context){
+            context.commit('toggleComponentsCollapse');
+        },
+        togglePropertiesCollapse(context){
+            context.commit('togglePropertiesCollapse');
+        },
+        togglePagesCollapse(context){
+            context.commit('togglePagesCollapse');
+        },
+    },
+    getters: {}
+};
+
+export  default  ideStore;

anubias2/src/stores/projectStore.js

@@ -0,0 +1,14 @@
+const projectStore = {
+    state: () => ({
+
+    }),
+    mutations: {
+
+    },
+    actions: {
+
+    },
+    getters: {}
+};
+
+export default  projectStore;

anubias2/src/stores/store.js

@@ -0,0 +1,14 @@
+import {createStore} from 'vuex' ;
+import ideStore from "./ideStore";
+import projectStore from "./projectStore";
+
+
+
+const store = createStore({
+    modules: {
+        ide: ideStore,
+        project: projectStore,
+    }
+});
+
+export default store;