From 952264a2abffd1c01e08611bae26ceaf8d958d43 Mon Sep 17 00:00:00 2001 From: Storm Heg Date: Fri, 23 Jul 2021 11:47:50 +0200 Subject: [PATCH] Slim sidebar: remember collapsed state --- client/scss/components/_main-nav.scss | 1 + .../components/Sidebar/Sidebar.stories.tsx | 1 + client/src/components/Sidebar/Sidebar.tsx | 10 +++++-- client/src/components/Sidebar/index.tsx | 14 ++++++++-- client/src/custom.d.ts | 1 - package-lock.json | 5 ++++ package.json | 1 + .../admin/templates/wagtailadmin/base.html | 28 +++++++++---------- .../templates/wagtailadmin/skeleton.html | 4 ++- .../admin/templatetags/wagtailadmin_tags.py | 9 ++++++ wagtail/admin/tests/test_menu.py | 25 ++++++++++++++++- 11 files changed, 78 insertions(+), 21 deletions(-) diff --git a/client/scss/components/_main-nav.scss b/client/scss/components/_main-nav.scss index 08a9a54743..f03f495d95 100644 --- a/client/scss/components/_main-nav.scss +++ b/client/scss/components/_main-nav.scss @@ -307,6 +307,7 @@ body.explorer-open { } body.sidebar-collapsed .wrapper { + @include transition(padding-left $menu-transition-duration ease); padding-left: $menu-width-slim; } diff --git a/client/src/components/Sidebar/Sidebar.stories.tsx b/client/src/components/Sidebar/Sidebar.stories.tsx index 0a68c43468..13041e2c9f 100644 --- a/client/src/components/Sidebar/Sidebar.stories.tsx +++ b/client/src/components/Sidebar/Sidebar.stories.tsx @@ -237,6 +237,7 @@ function renderSidebarStory( return (
; onExpandCollapse?(collapsed: boolean); } export const Sidebar: React.FunctionComponent = ( - { modules, currentPath, strings, navigate, onExpandCollapse }) => { + { modules, currentPath, collapsedOnLoad, strings, navigate, onExpandCollapse }) => { // 'collapsed' is a persistent state that is controlled by the arrow icon at the top // It records the user's general preference for a collapsed/uncollapsed menu // This is just a hint though, and we may still collapse the menu if the screen is too small // Also, we may display the full menu temporarily in collapsed mode (see 'peeking' below) - const [collapsed, setCollapsed] = React.useState(window.innerWidth < 800); + const [collapsed, setCollapsed] = React.useState((): boolean => { + if (window.innerWidth < 800 || collapsedOnLoad) { + return true; + } + return false; + }); // Call onExpandCollapse(true) if menu is initialised in collapsed state React.useEffect(() => { diff --git a/client/src/components/Sidebar/index.tsx b/client/src/components/Sidebar/index.tsx index d6c9745a2a..21b291ddff 100644 --- a/client/src/components/Sidebar/index.tsx +++ b/client/src/components/Sidebar/index.tsx @@ -1,8 +1,11 @@ import * as React from 'react'; import ReactDOM from 'react-dom'; +import Cookies from 'js-cookie'; import { Sidebar } from './Sidebar'; +export const SIDEBAR_COLLAPSED_COOKIE_NAME = 'wagtail_sidebar_collapsed'; + export function initSidebar() { const element = document.getElementById('wagtail-sidebar'); @@ -20,11 +23,17 @@ export function initSidebar() { if (element instanceof HTMLElement && element.dataset.props) { const props = window.telepath.unpack(JSON.parse(element.dataset.props)); - const onExpandCollapse = (collapsed: boolean) => { - if (collapsed) { + const collapsedCookie: any = Cookies.get(SIDEBAR_COLLAPSED_COOKIE_NAME); + // Cast to boolean + const collapsed = !((collapsedCookie === undefined || collapsedCookie === '0')); + + const onExpandCollapse = (_collapsed: boolean) => { + if (_collapsed) { document.body.classList.add('sidebar-collapsed'); + Cookies.set(SIDEBAR_COLLAPSED_COOKIE_NAME, 1); } else { document.body.classList.remove('sidebar-collapsed'); + Cookies.set(SIDEBAR_COLLAPSED_COOKIE_NAME, 0); } }; @@ -32,6 +41,7 @@ export function initSidebar() { + {% if slim_sidebar_enabled %} + + {% else %} + + {% endif %} -
+
{# Always show messages div so it can be appended to by JS #}
diff --git a/wagtail/admin/templates/wagtailadmin/skeleton.html b/wagtail/admin/templates/wagtailadmin/skeleton.html index 2d01a99e10..4bf2a59199 100644 --- a/wagtail/admin/templates/wagtailadmin/skeleton.html +++ b/wagtail/admin/templates/wagtailadmin/skeleton.html @@ -18,7 +18,9 @@ {% block branding_favicon %}{% endblock %} - +{% slim_sidebar_enabled as slim_sidebar_enabled %} +{% sidebar_collapsed as sidebar_collapsed %} +