1 files changed, 101 insertions, 0 deletions
diff --git a/src/views/_sila/SystemDescription/Network/SystemNetwork.vue b/src/views/_sila/SystemDescription/Network/SystemNetwork.vue
new file mode 100644
index 00000000..19243493
--- /dev/null
+++ b/src/views/_sila/SystemDescription/Network/SystemNetwork.vue
@@ -0,0 +1,101 @@
+<template>
+  <b-container
+    id="page-system-network"
+    :style="{ display: 'flex', 'flex-direction': 'column' }"
+    fluid="xxl pt-0 m-0"
+  >
+    <page-title :description="$t('appNavigation.networkParametrs')" />
+    <!-- IPv4 -->
+    <div class="page-collapse-decorator">
+      <b-button
+        v-b-toggle.toggle-collapse_1
+        variant="link"
+        class="collapse-button semi-bold-16px"
+        @click="ipv4Handler"
+      >
+        {{ $t('SystemDescription.title.Ipv4Settings') }}
+        <b-form-checkbox
+          id="checkbox-1"
+          v-model="ipv4"
+          @click.native.prevent
+        ></b-form-checkbox>
+      </b-button>
+      <b-collapse id="toggle-collapse_1" class="nav-item__nav">
+        <i-pv4-settings ref="system" />
+      </b-collapse>
+    </div>
+    <!-- IPv6 -->
+    <div class="page-collapse-decorator">
+      <b-button
+        v-b-toggle.toggle-collapse_2
+        variant="link"
+        class="collapse-button semi-bold-16px"
+        @click="ipv6Handler"
+      >
+        {{ $t('SystemDescription.title.Ipv6Settings') }}
+        <b-form-checkbox
+          id="checkbox-2"
+          v-model="ipv6"
+          @click.native.prevent
+        ></b-form-checkbox>
+      </b-button>
+      <b-collapse id="toggle-collapse_2" class="nav-item__nav">
+        <i-pv6-settings ref="system" />
+      </b-collapse>
+    </div>
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import IPv4Settings from './InventoryIPv4Settings';
+import IPv6Settings from './InventoryIPv6Settings';
+import iconChevronUp from '@carbon/icons-vue/es/chevron--up/16';
+
+export default {
+  components: {
+    PageTitle,
+    IPv4Settings,
+    IPv6Settings,
+  },
+  data() {
+    return {
+      text: '',
+      iconChevronUp: iconChevronUp,
+      ipv4: false,
+      ipv6: false,
+    };
+  },
+  methods: {
+    ipv4Handler() {
+      this.ipv4 = !this.ipv4;
+    },
+    ipv6Handler() {
+      this.ipv6 = !this.ipv6;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+//nav items style
+.nav-item,
+.nav-link {
+  padding: 0;
+}
+
+.nav-item {
+  list-style-type: none;
+}
+
+a {
+  color: $text-primary !important;
+  &:hover {
+    color: $text-primary !important;
+  }
+}
+
+.custom-checkbox {
+  background-color: none;
+  margin: 0 20px 0 auto;
+}
+</style>