@defra/docusaurus-theme-govuk 0.0.10-alpha → 0.0.12-alpha

package/index.js

@@ -380,7 +380,7 @@ module.exports = function themeGovuk(context, options) {
                         path.resolve(__dirname, 'node_modules'),
                       ],
                       quietDeps: true,
-                      silenceDeprecations: ['import', 'if-function'],
+                      silenceDeprecations: ['import'],
                     },
                   },
                 },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@defra/docusaurus-theme-govuk",
-  "version": "0.0.10-alpha",
+  "version": "0.0.12-alpha",
   "description": "A Docusaurus theme implementing the GOV.UK Design System for consistent, accessible documentation sites",
   "main": "index.js",
   "license": "MIT",

package/src/css/components.scss

@@ -290,3 +290,29 @@
   }
 }
 
+@media (max-width: 767px) {
+  .app-layout-sidebar {
+    flex-direction: column;
+    gap: 0;
+  }
+
+  .app-layout-sidebar__nav {
+    width: 100%;
+    padding-left: 0;
+    flex-shrink: 0;
+    position: static;
+    top: auto;
+    max-height: none;
+    overflow: visible;
+  }
+
+  .app-layout-sidebar__content {
+    width: 100%;
+    min-width: 0;
+  }
+
+  .app-header-search .autocomplete__wrapper {
+    width: 180px;
+  }
+}
+

package/src/theme/Layout/index.js

@@ -1,4 +1,4 @@
-import React, {useState, useEffect} from 'react';
+import {useState, useEffect} from 'react';
 import '../../css/theme.scss';
 import {SkipLink, Footer, PhaseBanner, ServiceNavigation} from '@not-govuk/simple-components';
 import Header from '../Header';
@@ -300,4 +300,4 @@ export default function Layout(props) {
       </div>
     </LayoutProvider>
   );
-}
+}