add dropdown to select version (#4842)

* add dropdown to select version

* add e2e test

* fix test

* force the action

* change pageLoadTimeout

* remove e2e test as there is no v4.webpack.js.org:4200

* optimize select

* add tailwindcss

* hide dropdown when click outside

* add icon

* use select for better accessibility

* define spacing

* add icon

* add loading indicator

package.json

@@ -135,6 +135,7 @@
     "start-server-and-test": "^1.12.1",
     "static-site-generator-webpack-plugin": "^3.4.1",
     "style-loader": "^2.0.0",
+    "tailwindcss": "^2.1.2",
     "tap-spot": "^1.1.1",
     "unist-util-visit": "^2.0.3",
     "webpack": "^5.37.0",

postcss.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  plugins: [require('autoprefixer')],
+  plugins: [require('tailwindcss'), require('autoprefixer')],
 };

src/components/Sidebar/Sidebar.jsx

@@ -1,43 +1,71 @@
 // Import External Dependencies
-import Shield from '../Shield/Shield';
 import SidebarItem from '../SidebarItem/SidebarItem';
 import Print from '../Print/Print';
 import PropTypes from 'prop-types';
 
 // Load Styling
 import './Sidebar.scss';
+import { useEffect, useState } from 'react';
 
-const docs = [
-  {
-    version: 5,
-    url: 'https://webpack.js.org',
-  },
-  {
-    version: 4,
-    url: 'https://v4.webpack.js.org',
-  },
-];
+import DownIcon from '../../styles/icons/chevron-down.svg';
+import LoadingIcon from '../../styles/icons/loading.svg';
 
+const versions = [5, 4];
 const currentDocsVersion = 5;
+
 Sidebar.propTypes = {
   className: PropTypes.string,
   pages: PropTypes.array,
   currentPage: PropTypes.string,
 };
 // Create and export the component
 export default function Sidebar({ className = '', pages, currentPage }) {
+  const [version, setVersion] = useState(currentDocsVersion);
+  const [loading, setLoading] = useState(false);
+  useEffect(() => {
+    if (version === currentDocsVersion) return;
+    const href = window.location.href;
+    const url = new URL(href);
+    url.hostname = `v${version}.webpack.js.org`;
+
+    // redirect
+    window.location.href = url.href;
+  }, [version]);
   let group;
 
   return (
     <nav className={`sidebar ${className}`}>
       <div className="sidebar__inner">
-        <div className="sidebar__shields">
-          <a href="https://github.com/webpack/webpack/releases">
-            <Shield
-              content="github/package-json/v/webpack/webpack"
-              label="webpack"
+        <div className="relative z-0 bg-white dark:bg-gray-100 ">
+          <select
+            className="text-gray-600 text-14 px-5 py-5 appearance-none box-border border border-gray-200 border-solid flex-col flex w-full rounded-none bg-transparent bg-none"
+            value={version}
+            onChange={(e) => {
+              setVersion(+e.target.value);
+              if (+e.target.value !== currentDocsVersion) {
+                setLoading(true);
+              }
+            }}
+          >
+            {versions.map((version) => (
+              <option key={version} value={version}>
+                Webpack {version}
+              </option>
+            ))}
+          </select>
+          {loading ? (
+            <LoadingIcon
+              className="absolute right-5 top-5 fill-current text-gray-300 z-[-1]"
+              width={20}
+              height={20}
             />
-          </a>
+          ) : (
+            <DownIcon
+              className="absolute right-5 top-5 fill-current text-gray-300 z-[-1]"
+              width={20}
+              height={20}
+            />
+          )}
         </div>
         <Print url={currentPage} />
 
@@ -61,21 +89,6 @@ export default function Sidebar({ className = '', pages, currentPage }) {
             </div>
           );
         })}
-        <div className="sidebar__docs-version">
-          You are reading webpack {currentDocsVersion} documentation. Change
-          here to:
-          <ul>
-            {docs
-              .filter((item) => item.version !== currentDocsVersion)
-              .map(({ version, url }) => (
-                <li key={`webpack-${version}-docs`}>
-                  <a rel="nofollow" href={url}>
-                    webpack {version} documentation
-                  </a>
-                </li>
-              ))}
-          </ul>
-        </div>
       </div>
     </nav>
   );

src/components/Site/Site.jsx

@@ -70,6 +70,7 @@ function Site(props) {
 
   const applyTheme = (theme) => {
     document.documentElement.setAttribute('data-theme', theme);
+    document.documentElement.classList.add(theme);
   };
   useEffect(() => {
     applyTheme(theme);

src/index.jsx

@@ -5,6 +5,7 @@ import { BrowserRouter as AnalyticsRouter } from 'react-g-analytics';
 
 import App from './App.jsx';
 
+import './styles/tailwind.css';
 // Import helpers
 import isClient from './utilities/is-client';
 import { HelmetProvider } from 'react-helmet-async';

src/styles/tailwind.css

@@ -0,0 +1,3 @@
+/* @import "tailwindcss/base"; */
+/* @import "tailwindcss/components"; */
+@import 'tailwindcss/utilities';

tailwind.config.js

@@ -0,0 +1,38 @@
+module.exports = {
+  mode: 'jit',
+  purge: ['./src/components/**/*.{js,jsx}'],
+  darkMode: 'class', // or 'media' or 'class'
+  theme: {
+    extend: {
+      fontSize: {
+        14: '14px',
+      },
+    },
+    spacing: {
+      5: '5px',
+    },
+    colors: {
+      white: '#fff',
+      black: '#000',
+      transparent: 'transparent',
+      blue: {
+        200: '#8dd6f9',
+        400: '#1d78c1',
+        600: '#465E69',
+        800: '#2B3A42',
+      },
+      gray: {
+        100: '#f2f2f2',
+        200: '#dedede',
+        300: '#999',
+        500: '#666',
+        600: '#535353',
+        700: '#333',
+      },
+    },
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+};