Navigate
diff --git a/dashboard-prime/src/stores/UseContentMaxWidthState.js b/dashboard-prime/src/stores/UseContentMaxWidthState.js
new file mode 100644
index 0000000000..2e29d850e7
--- /dev/null
+++ b/dashboard-prime/src/stores/UseContentMaxWidthState.js
@@ -0,0 +1,39 @@
+import { ref, onMounted, onBeforeUnmount, nextTick, computed, reactive } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useContentMaxWidthState = defineStore('contentMaxWidthState', () => {
+ const main1ContentWidth = ref(0)
+ const navWidth = ref(0)
+
+ const updateWidth = () => {
+ main1ContentWidth.value = document.getElementById('mainContent1').clientWidth
+ const skillsNavigation = document.getElementById('skillsNavigation')
+ const forceReflow = skillsNavigation.offsetWidth
+ navWidth.value = forceReflow
+ }
+
+ onMounted(() => {
+ updateWidth()
+ window.addEventListener('resize', updateWidth)
+ })
+
+ onBeforeUnmount(() => {
+ window.removeEventListener('resize', updateWidth)
+ })
+
+ const main2ContentMaxWidth = computed(() => main1ContentWidth.value - navWidth.value - 50)
+
+ const main2ContentMaxWidthStyleObj = computed(() => {
+ return {
+ 'max-width': `${main2ContentMaxWidth.value}px`
+ }
+ })
+
+ return {
+ updateWidth,
+ navWidth,
+ main1ContentWidth,
+ main2ContentMaxWidth,
+ main2ContentMaxWidthStyleObj
+ }
+})
\ No newline at end of file