From e48eb3a28b8b6d8dcfe7c9daa0ce470898d15fcf Mon Sep 17 00:00:00 2001
From: Rakesh PR <rakesh.pr@mayadata.io>
Date: Thu, 2 Sep 2021 18:25:31 +0530
Subject: [PATCH] 1. Loading version dropdown issue fix 2. TOC fontsize and
 color fix

Signed-off-by: Rakesh PR <rakesh.pr@mayadata.io>
---
 docs/src/hooks/useViewport.js | 2 +-
 docs/src/scss/custom.scss     | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/docs/src/hooks/useViewport.js b/docs/src/hooks/useViewport.js
index c6195b4c5..0646f5f52 100644
--- a/docs/src/hooks/useViewport.js
+++ b/docs/src/hooks/useViewport.js
@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 
 export const useViewport = () => {
-    const [width, setWidth] = useState(0);
+    const [width, setWidth] = useState(window?.innerWidth);
 
     useEffect(() => {
         if(typeof window !== undefined) {
diff --git a/docs/src/scss/custom.scss b/docs/src/scss/custom.scss
index 09ba1771f..f6e016ed8 100644
--- a/docs/src/scss/custom.scss
+++ b/docs/src/scss/custom.scss
@@ -60,6 +60,7 @@
   --color-lighter-blue: #{$blue-800};
   --color-tealish-blue: #{$blue-400};
   --ifm-code-background: #{$ifm-code-background};
+  --ifm-toc-link-color: #{$blue-500};
 }
 
 .markdown {
@@ -149,7 +150,10 @@
 }
 
 .docs-wrapper .table-of-contents__link {
-  font-size: 12px;
+  font-size: 13px;
+  &.table-of-contents__link--active{
+    font-weight: bold;
+  }
 }
 
 @media (min-width: 768px) {