Merge pull request #367 from shivendra-webkul/top-nav

Added Top Nav Bar for current version information
bagisto · Jan 15, 2024 · b79aac5 · b79aac5
2 parents bfa54e1 + 54bb831
commit b79aac5
Show file tree

Hide file tree

Showing 5 changed files with 140 additions and 3 deletions.
diff --git a/docs/.vuepress/styles/palette.styl b/docs/.vuepress/styles/palette.styl
@@ -7,6 +7,7 @@ $badgeError = #DA596
 
 // layout
 $navbarHeight = 3.6rem
+$topNavHeight = 2rem
 $sidebarWidth = 20rem
 $contentWidth = 960px
 $homePageWidth = 960px

diff --git a/docs/.vuepress/theme/components/TopNav.vue b/docs/.vuepress/theme/components/TopNav.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="top-nav">
+    <div class="nav-text">
+      {{ displayText }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TopNav',
+
+  data() {
+    return {
+      displayText: '',
+    };
+  },
+
+  mounted() {
+    this.changeText();
+
+    this.$router.afterEach(() => {
+      this.isSidebarOpen = false;
+      this.changeText();
+    });
+  },
+
+  methods: {
+    changeText() {
+      let currentPath = this.$route.path.split('/');
+      let version = currentPath[1];
+
+      if (['2.x'].includes(version)) {
+        this.displayText =  'This is the documentation for the current version (v2.0) of Bagisto. Stay informed and make the most of Bagisto\'s capabilities.';
+      } else {
+        this.displayText = 'Heads up: You are viewing outdated documentation for Bagisto. Please consider upgrading to v2.0 for the latest information.';
+      }
+    },
+  },
+
+}
+</script>
+
+<style>
+  .top-nav {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: rgb(255, 164, 35);
+    color: #fff;
+    padding: 0.5rem;
+    z-index: 20;
+  }
+
+  .nav-text {
+    color: #0e0d0d;
+    text-align: center;
+    margin: 0 auto;
+    font: bold;
+  }
+
+  /* Responsive Styles */
+  @media (max-width: 500px) {
+    .top-nav {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+    .nav-text {
+      margin-right: 0;
+      margin-bottom: 0.5rem;
+    }
+  }
+</style>
diff --git a/docs/.vuepress/theme/layouts/Layout.vue b/docs/.vuepress/theme/layouts/Layout.vue
@@ -5,6 +5,8 @@
     @touchstart="onTouchStart"
     @touchend="onTouchEnd"
   >
+    <TopNav/>
+
     <Navbar
       v-if="shouldShowNavbar"
       @toggle-sidebar="toggleSidebar"
@@ -45,6 +47,7 @@
 
 <script>
 import Home from '@theme/components/Home.vue'
+import TopNav from '@theme/components/TopNav.vue';
 import Navbar from '@theme/components/Navbar.vue'
 import Page from '@theme/components/Page.vue'
 import Sidebar from '@theme/components/Sidebar.vue'
@@ -57,7 +60,8 @@ export default {
     Home,
     Page,
     Sidebar,
-    Navbar
+    Navbar,
+    TopNav,
   },
 
   data () {
@@ -116,12 +120,46 @@ export default {
   },
 
   mounted () {
+    this.updateTopNavStyles();
+
     this.$router.afterEach(() => {
-      this.isSidebarOpen = false
-    })
+      this.isSidebarOpen = false;
+
+      this.updateTopNavStyles();
+    });
   },
 
   methods: {
+    updateTopNavStyles() {
+      let currentPath = this.$route.path.split('/');
+      
+      let version = currentPath[1];
+
+      if (['2.x', '1.5.x', '1.x'].includes(version)) {
+        this.applyTopNavCustomStyles();
+      } else {
+        this.removeTopNavCustomStyles();
+      }
+    },
+
+    applyTopNavCustomStyles() {
+      setTimeout(() => {
+        document.querySelectorAll('.navbar').forEach(element => element.classList.add('custom-navbar-top-height'));
+        document.querySelectorAll('.sidebar').forEach(element => element.classList.add('custom-sidebar-top-height'));
+        document.querySelectorAll('.theme-default-content').forEach(element => element.classList.add('custom-wrapper'));
+        document.querySelectorAll('.top-nav').forEach(element => element.classList.remove('no-custom-navbar'));
+      }, 0);
+    },
+
+    removeTopNavCustomStyles() {
+      setTimeout(() => {
+        document.querySelectorAll('.top-nav').forEach(element => element.classList.add('no-custom-navbar'));
+        document.querySelectorAll('.sidebar').forEach(element => element.classList.remove('custom-sidebar-top-height'));
+        document.querySelectorAll('.theme-default-content').forEach(element => element.classList.remove('custom-wrapper'));
+        document.querySelectorAll('.navbar').forEach(element => element.classList.remove('custom-navbar-top-height'));
+      }, 0);
+    },
+
     toggleSidebar (to) {
       this.isSidebarOpen = typeof to === 'boolean' ? to : !this.isSidebarOpen
       this.$emit('toggle-sidebar', this.isSidebarOpen)

diff --git a/docs/.vuepress/theme/styles/index.styl b/docs/.vuepress/theme/styles/index.styl
@@ -189,7 +189,18 @@ th, td
     .sidebar
       top 0
 
+.no-custom-navbar
+  display none !important
 
+.custom-navbar-top-height
+  top $topNavHeight !important
+
+.custom-sidebar-top-height
+  top $topNavHeight + $navbarHeight !important
+
+.custom-wrapper
+  padding-top 4rem !important
+
 @media (min-width: ($MQMobile + 1px))
   .theme-container.no-sidebar
     .sidebar

diff --git a/docs/.vuepress/theme/styles/mobile.styl b/docs/.vuepress/theme/styles/mobile.styl
@@ -4,6 +4,10 @@ $mobileSidebarWidth = $sidebarWidth * 0.82
 
 // narrow desktop / iPad
 @media (max-width: $MQNarrow)
+  .custom-navbar-top-height
+    top 3rem !important
+  .custom-sidebar-top-height
+    top $topNavHeight + $navbarHeight !important
   .sidebar
     font-size 15px
     width $mobileSidebarWidth
@@ -12,6 +16,8 @@ $mobileSidebarWidth = $sidebarWidth * 0.82
 
 // wide mobile
 @media (max-width: $MQMobile)
+  .custom-navbar-top-height
+    top 3rem !important
   .sidebar
     top 0
     padding-top $navbarHeight
@@ -29,6 +35,10 @@ $mobileSidebarWidth = $sidebarWidth * 0.82
 
 // narrow mobile
 @media (max-width: $MQMobileNarrow)
+  .custom-navbar-top-height
+    top 4.5rem !important
+  .custom-wrapper
+    padding-top 6rem !important  
   h1
     font-size 1.9rem
   {$contentClass}