From e9501be58adfbb670f0b274d42d5520f802ae162 Mon Sep 17 00:00:00 2001 From: jqlio18 Date: Wed, 14 Dec 2022 00:18:40 -0500 Subject: [PATCH 01/10] SideNav should overlay Content in UIShell Fixes #1463 --- src/UIShell/Content.svelte | 18 +----------------- src/UIShell/SideNav.svelte | 5 ++--- 2 files changed, 3 insertions(+), 20 deletions(-) diff --git a/src/UIShell/Content.svelte b/src/UIShell/Content.svelte index 768b1dc563..cda23db30a 100644 --- a/src/UIShell/Content.svelte +++ b/src/UIShell/Content.svelte @@ -1,24 +1,8 @@ -
+
diff --git a/src/UIShell/SideNav.svelte b/src/UIShell/SideNav.svelte index 3db9e0bb9b..7b5108363a 100644 --- a/src/UIShell/SideNav.svelte +++ b/src/UIShell/SideNav.svelte @@ -72,9 +72,8 @@ class:bx--side-nav__navigation="{true}" class:bx--side-nav="{true}" class:bx--side-nav--ux="{true}" - class:bx--side-nav--expanded="{rail && winWidth >= expansionBreakpoint - ? false - : isOpen}" + class:bx--side-nav--fixed="{isOpen && !rail}" + class:bx--side-nav--expanded="{!rail && winWidth >= expansionBreakpoint}" class:bx--side-nav--collapsed="{!isOpen && !rail}" class:bx--side-nav--rail="{rail}" {...$$restProps} From 717d6d88dee69581474bee8e7f13c5a6cf5aaf9b Mon Sep 17 00:00:00 2001 From: jqlio18 Date: Wed, 14 Dec 2022 12:58:44 -0500 Subject: [PATCH 02/10] Previous commit was removing `margin-left: 0` style. This revert back this change and add more consistencies with the `navStore` and classes. --- src/UIShell/Content.svelte | 18 +++++++++++++++++- src/UIShell/SideNav.svelte | 6 +++++- src/UIShell/navStore.js | 4 ++++ 3 files changed, 26 insertions(+), 2 deletions(-) diff --git a/src/UIShell/Content.svelte b/src/UIShell/Content.svelte index cda23db30a..0689c22eb8 100644 --- a/src/UIShell/Content.svelte +++ b/src/UIShell/Content.svelte @@ -1,8 +1,24 @@ -
+
diff --git a/src/UIShell/SideNav.svelte b/src/UIShell/SideNav.svelte index 7b5108363a..a21193b4fe 100644 --- a/src/UIShell/SideNav.svelte +++ b/src/UIShell/SideNav.svelte @@ -35,7 +35,9 @@ import { shouldRenderHamburgerMenu, isSideNavCollapsed, + isSideNavFixed, isSideNavRail, + isSideNavExpanded, } from "./navStore"; const dispatch = createEventDispatcher(); @@ -43,7 +45,9 @@ let winWidth = undefined; $: dispatch(isOpen ? "open" : "close"); - $: $isSideNavCollapsed = !isOpen; + $: $isSideNavExpanded = !rail && winWidth >= expansionBreakpoint; + $: $isSideNavCollapsed = !$isSideNavExpanded; + $: $isSideNavFixed = !rail & isOpen; $: $isSideNavRail = rail; onMount(() => { diff --git a/src/UIShell/navStore.js b/src/UIShell/navStore.js index 182613a87a..6a827bcfb6 100644 --- a/src/UIShell/navStore.js +++ b/src/UIShell/navStore.js @@ -2,6 +2,10 @@ import { writable } from "svelte/store"; export const shouldRenderHamburgerMenu = writable(false); +export const isSideNavExpanded = writable(false); + export const isSideNavCollapsed = writable(false); +export const isSideNavFixed = writable(false); + export const isSideNavRail = writable(false); From 0042c3c7c8d546fb1703748de1c14583305cbb65 Mon Sep 17 00:00:00 2001 From: jqlio18 Date: Wed, 14 Dec 2022 13:05:26 -0500 Subject: [PATCH 03/10] Use variables since we have them -_- --- src/UIShell/SideNav.svelte | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/UIShell/SideNav.svelte b/src/UIShell/SideNav.svelte index a21193b4fe..5cdf4b4982 100644 --- a/src/UIShell/SideNav.svelte +++ b/src/UIShell/SideNav.svelte @@ -76,10 +76,10 @@ class:bx--side-nav__navigation="{true}" class:bx--side-nav="{true}" class:bx--side-nav--ux="{true}" - class:bx--side-nav--fixed="{isOpen && !rail}" - class:bx--side-nav--expanded="{!rail && winWidth >= expansionBreakpoint}" - class:bx--side-nav--collapsed="{!isOpen && !rail}" - class:bx--side-nav--rail="{rail}" + class:bx--side-nav--fixed="{$isSideNavFixed}" + class:bx--side-nav--expanded="{$isSideNavExpanded}" + class:bx--side-nav--collapsed="{$isSideNavCollapsed}" + class:bx--side-nav--rail="{$isSideNavRail}" {...$$restProps} > From bf639a5c2df6c19f519771006609cb2fbef2343e Mon Sep 17 00:00:00 2001 From: jqlio18 Date: Sun, 18 Dec 2022 00:24:25 -0500 Subject: [PATCH 04/10] Take the same approach as react --- src/UIShell/Content.svelte | 37 ++++++++++++++++++++----------------- src/UIShell/SideNav.svelte | 30 ++++-------------------------- src/UIShell/navStore.js | 8 -------- 3 files changed, 24 insertions(+), 51 deletions(-) diff --git a/src/UIShell/Content.svelte b/src/UIShell/Content.svelte index 0689c22eb8..926683634d 100644 --- a/src/UIShell/Content.svelte +++ b/src/UIShell/Content.svelte @@ -2,23 +2,26 @@ /** Specify the id for the main element */ export let id = "main-content"; - import { isSideNavExpanded, isSideNavRail } from "./navStore"; - - /** - * By default, the `SideNav` applies a left margin of `3rem` to `Content` - * if it's a sibling component (e.g., .bx--side-nav ~ .bx--content). - * - * We manually unset the left margin if the `SideNav` - * is collapsed and if it's not the `rail` variant. - */ - $: unsetLeftMargin = !$isSideNavRail && !$isSideNavExpanded; + import { Grid, Row, Column } from "../Grid"; -
- -
+
+
+ + + + + + + +
+
+ diff --git a/src/UIShell/SideNav.svelte b/src/UIShell/SideNav.svelte index 5cdf4b4982..9711e58037 100644 --- a/src/UIShell/SideNav.svelte +++ b/src/UIShell/SideNav.svelte @@ -20,35 +20,14 @@ /** Set to `true` to toggle the expanded state */ export let isOpen = false; - /** - * The window width (px) at which the SideNav is expanded and the hamburger menu is hidden - * 1056 represents the "large" breakpoint in pixels from the Carbon Design System: - * small: 320 - * medium: 672 - * large: 1056 - * x-large: 1312 - * max: 1584 - */ - export let expansionBreakpoint = 1056; - import { onMount, createEventDispatcher } from "svelte"; - import { - shouldRenderHamburgerMenu, - isSideNavCollapsed, - isSideNavFixed, - isSideNavRail, - isSideNavExpanded, - } from "./navStore"; + import { shouldRenderHamburgerMenu } from "./navStore"; const dispatch = createEventDispatcher(); let winWidth = undefined; $: dispatch(isOpen ? "open" : "close"); - $: $isSideNavExpanded = !rail && winWidth >= expansionBreakpoint; - $: $isSideNavCollapsed = !$isSideNavExpanded; - $: $isSideNavFixed = !rail & isOpen; - $: $isSideNavRail = rail; onMount(() => { shouldRenderHamburgerMenu.set(true); @@ -76,10 +55,9 @@ class:bx--side-nav__navigation="{true}" class:bx--side-nav="{true}" class:bx--side-nav--ux="{true}" - class:bx--side-nav--fixed="{$isSideNavFixed}" - class:bx--side-nav--expanded="{$isSideNavExpanded}" - class:bx--side-nav--collapsed="{$isSideNavCollapsed}" - class:bx--side-nav--rail="{$isSideNavRail}" + class:bx--side-nav--expanded="{isOpen}" + class:bx--side-nav--collapsed="{!isOpen}" + class:bx--side-nav--rail="{rail}" {...$$restProps} > diff --git a/src/UIShell/navStore.js b/src/UIShell/navStore.js index 6a827bcfb6..358127be5e 100644 --- a/src/UIShell/navStore.js +++ b/src/UIShell/navStore.js @@ -1,11 +1,3 @@ import { writable } from "svelte/store"; export const shouldRenderHamburgerMenu = writable(false); - -export const isSideNavExpanded = writable(false); - -export const isSideNavCollapsed = writable(false); - -export const isSideNavFixed = writable(false); - -export const isSideNavRail = writable(false); From d5251ff47cdf485f60407644908305d0a76cc669 Mon Sep 17 00:00:00 2001 From: jqlio18 Date: Sun, 18 Dec 2022 12:28:19 -0500 Subject: [PATCH 05/10] Fix some bugs with rail variant and fix offset when side nav was not present. --- src/UIShell/Content.svelte | 5 ++++- src/UIShell/SideNav.svelte | 4 ++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/UIShell/Content.svelte b/src/UIShell/Content.svelte index 926683634d..c492458b25 100644 --- a/src/UIShell/Content.svelte +++ b/src/UIShell/Content.svelte @@ -3,6 +3,7 @@ export let id = "main-content"; import { Grid, Row, Column } from "../Grid"; + import { shouldRenderHamburgerMenu } from "./navStore";
- + diff --git a/src/UIShell/SideNav.svelte b/src/UIShell/SideNav.svelte index 9711e58037..125d552145 100644 --- a/src/UIShell/SideNav.svelte +++ b/src/UIShell/SideNav.svelte @@ -55,8 +55,8 @@ class:bx--side-nav__navigation="{true}" class:bx--side-nav="{true}" class:bx--side-nav--ux="{true}" - class:bx--side-nav--expanded="{isOpen}" - class:bx--side-nav--collapsed="{!isOpen}" + class:bx--side-nav--expanded="{isOpen && !rail}" + class:bx--side-nav--collapsed="{!isOpen && !rail}" class:bx--side-nav--rail="{rail}" {...$$restProps} > From 69b208add274cfa3d291916421cdce826f2a9f38 Mon Sep 17 00:00:00 2001 From: jqlio18 Date: Sun, 18 Dec 2022 20:52:27 -0500 Subject: [PATCH 06/10] add $$restProps.style --- src/UIShell/Content.svelte | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/UIShell/Content.svelte b/src/UIShell/Content.svelte index c492458b25..b5ba5db53a 100644 --- a/src/UIShell/Content.svelte +++ b/src/UIShell/Content.svelte @@ -4,6 +4,8 @@ import { Grid, Row, Column } from "../Grid"; import { shouldRenderHamburgerMenu } from "./navStore"; + + const { style, ...rest } = $$restProps;
From da7f03a8f8433805140d505d7101b8aefb4c7cec Mon Sep 17 00:00:00 2001 From: jqlio18 Date: Sun, 18 Dec 2022 21:56:22 -0500 Subject: [PATCH 07/10] React don't have the `narrow` and `noGutter`props The text in the docs have more margins because they use grid so it have the double the margins needed. --- src/UIShell/Content.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/UIShell/Content.svelte b/src/UIShell/Content.svelte index b5ba5db53a..d3fc1e0307 100644 --- a/src/UIShell/Content.svelte +++ b/src/UIShell/Content.svelte @@ -18,7 +18,7 @@ {...$$restProps} style="{`height: 100%; margin: 0px; width: 100%; ${$$restProps.style}`}" > - + Date: Sun, 18 Dec 2022 21:58:43 -0500 Subject: [PATCH 08/10] Remove unsued variables. --- src/UIShell/Content.svelte | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/UIShell/Content.svelte b/src/UIShell/Content.svelte index d3fc1e0307..150fea14bf 100644 --- a/src/UIShell/Content.svelte +++ b/src/UIShell/Content.svelte @@ -4,8 +4,6 @@ import { Grid, Row, Column } from "../Grid"; import { shouldRenderHamburgerMenu } from "./navStore"; - - const { style, ...rest } = $$restProps;
Date: Sun, 18 Dec 2022 22:58:00 -0500 Subject: [PATCH 09/10] Fix `HamburgerMenu` not working with `rail SideNav`. --- src/UIShell/SideNav.svelte | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/UIShell/SideNav.svelte b/src/UIShell/SideNav.svelte index 125d552145..fe1c3af941 100644 --- a/src/UIShell/SideNav.svelte +++ b/src/UIShell/SideNav.svelte @@ -26,6 +26,7 @@ const dispatch = createEventDispatcher(); let winWidth = undefined; + let railIsOpen = false; $: dispatch(isOpen ? "open" : "close"); @@ -50,12 +51,18 @@ >
{/if}