From 11f4fa7a0049d289daf40171e72c1772c0fb31dc Mon Sep 17 00:00:00 2001
From: PhattOZ <phatto2543@gmail.com>
Date: Sat, 9 Oct 2021 21:48:56 +0700
Subject: [PATCH] Export Sass variable to use in JS file

---
 src/pages/_app.js                 | 3 ++-
 src/styles/_variables.module.scss | 5 +++++
 2 files changed, 7 insertions(+), 1 deletion(-)
 create mode 100644 src/styles/_variables.module.scss

diff --git a/src/pages/_app.js b/src/pages/_app.js
index 2b4c882c..aaebb60f 100644
--- a/src/pages/_app.js
+++ b/src/pages/_app.js
@@ -11,6 +11,7 @@ import NextNProgress from 'nextjs-progressbar';
 import { getAllMenus, createMenuFromPages, MENU_LOCATION_NAVIGATION_DEFAULT } from 'lib/menus';
 
 import 'styles/globals.scss';
+import variables from 'styles/_variables.module.scss';
 
 function App({ Component, pageProps = {}, metadata, recentPosts, categories, menus }) {
   const site = useSiteContext({
@@ -23,7 +24,7 @@ function App({ Component, pageProps = {}, metadata, recentPosts, categories, men
   return (
     <SiteContext.Provider value={site}>
       <SearchProvider>
-        <NextNProgress height={4} color="#0070F3" />
+        <NextNProgress height={4} color={variables.progressbarColor} />
         <Component {...pageProps} />
       </SearchProvider>
     </SiteContext.Provider>
diff --git a/src/styles/_variables.module.scss b/src/styles/_variables.module.scss
new file mode 100644
index 00000000..de747265
--- /dev/null
+++ b/src/styles/_variables.module.scss
@@ -0,0 +1,5 @@
+$progressbar_color: #0070f3;
+
+:export {
+  progressbarColor: $progressbar_color;
+}