refactor: refactoring project structure and components, optimizing internationalization and page presentation

src/components/Widgets/Scrollbar.astro

@@ -0,0 +1,64 @@
+<script>
+import { OverlayScrollbars } from 'overlayscrollbars'
+
+function initScrollbar() {
+  const bodyElement = document.body
+  const scrollbarTheme = document.documentElement.classList.contains('dark') ? 'scrollbar-dark' : 'scrollbar-light'
+  if (!bodyElement.hasAttribute('data-scrollbar-initialized')) {
+    OverlayScrollbars({
+      target: bodyElement,
+      cancel: {
+        // don't initialize the overlay scrollbar if there is a native one
+        nativeScrollbarsOverlaid: true,
+      },
+    }, {
+      scrollbars: {
+        theme: scrollbarTheme,
+        autoHide: 'scroll',
+        autoHideDelay: 800,
+      },
+      overflow: {
+        x: 'hidden',
+      },
+    })
+
+    bodyElement.setAttribute('data-scrollbar-initialized', 'true')
+  }
+}
+
+initScrollbar()
+document.addEventListener('astro:after-swap', initScrollbar)
+</script>
+
+<style is:global>
+@import 'overlayscrollbars/overlayscrollbars.css';
+
+.scrollbar-light,
+.scrollbar-dark {
+  --os-size: 1rem;
+  --os-padding-perpendicular: 0.2rem;
+  --os-padding-axis: 0.4rem;
+  --os-handle-border-radius: 0.7rem;
+  --os-handle-perpendicular-size-hover: 160%;
+  --os-handle-perpendicular-size-active: 160%;
+  --os-handle-interactive-area-offset: 3px;
+}
+
+.scrollbar-light {
+  --os-handle-bg: #CFC5BD;
+  --os-handle-bg-hover: #ADA49E;
+  --os-handle-bg-active: #ADA49E;
+}
+
+.scrollbar-dark {
+  --os-handle-bg: #2C2C2C;
+  --os-handle-bg-hover: #3C3C3C;
+  --os-handle-bg-active: #3C3C3C;
+}
+
+@media (max-width: 1023px) {
+  .os-scrollbar {
+    display: none !important;
+  }
+}
+</style>