1 files changed, 127 insertions, 0 deletions
diff --git a/src/views/SystemDescription/Network/SystemNetwork.vue b/src/views/SystemDescription/Network/SystemNetwork.vue
new file mode 100644
index 00000000..4cf264cf
--- /dev/null
+++ b/src/views/SystemDescription/Network/SystemNetwork.vue
@@ -0,0 +1,127 @@
+<template>
+  <b-container
+    :style="{ display: 'flex', 'flex-direction': 'column' }"
+    fluid="xxl pt-0 m-0"
+  >
+    <page-title />
+    <!-- IPv4 -->
+    <div class="main-container">
+      <div class="page-collapse-decorator">
+        <b-button
+          v-b-toggle.toggle-collapse_1
+          variant="link"
+          class="server-info-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="server-info-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>
+      <modal-user @hidden="activeUser = null" />
+    </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;
+}
+
+.server-info-collapse__button {
+  height: 56px;
+  width: 100%;
+  padding: 0 0 0 2rem;
+  margin: 0;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  &:active,
+  &:focus {
+    box-shadow: none;
+  }
+  &:hover {
+    color: $text-primary;
+  }
+}
+
+.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;
+}
+
+.custom-checkbox ::before {
+  box-shadow: none !important;
+  border: 2px solid rgba(4, 10, 15, 0.6);
+  background-color: #fff;
+  border-radius: 3px;
+}
+</style>