From d9f7099ac8dbcc7f8899af35b821bb26ed5cbe82 Mon Sep 17 00:00:00 2001
From: Uri Simhony <uris@pmtsit.com>
Date: Tue, 21 Jun 2022 21:59:57 +0300
Subject: [PATCH 1/4] added container width support to NavBar

---
 src/Navbar.d.ts                  |  2 +-
 src/Navbar.svelte                |  3 +-
 stories/navbar/Containers.svelte | 55 ++++++++++++++++++++++++++++++++
 stories/navbar/Index.svelte      | 10 ++++++
 4 files changed, 68 insertions(+), 2 deletions(-)
 create mode 100644 stories/navbar/Containers.svelte

diff --git a/src/Navbar.d.ts b/src/Navbar.d.ts
index 8ce25ef1..eb511f36 100644
--- a/src/Navbar.d.ts
+++ b/src/Navbar.d.ts
@@ -4,7 +4,7 @@ import { BackgroundColor } from './shared';
 export interface NavbarProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['nav']> {
   color?: BackgroundColor;
-  container?: boolean | 'fluid'; // TODO also sm-xxl?
+  container?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'fluid';
   dark?: boolean;
   expand?: boolean | string;
   fixed?: string;
diff --git a/src/Navbar.svelte b/src/Navbar.svelte
index fc79bfc0..96119152 100644
--- a/src/Navbar.svelte
+++ b/src/Navbar.svelte
@@ -38,7 +38,8 @@
 
 <nav {...$$restProps} class={classes}>
   {#if container}
-    <Container fluid={container === 'fluid'}>
+    <Container sm={container === 'sm'} md={container === 'md'} lg={container === 'md'}
+               xl={container === 'sm'} xxl={container === 'md'} fluid={container === 'fluid'}>
       <slot />
     </Container>
   {:else}
diff --git a/stories/navbar/Containers.svelte b/stories/navbar/Containers.svelte
new file mode 100644
index 00000000..b935782d
--- /dev/null
+++ b/stories/navbar/Containers.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+  import {
+    Collapse,
+    Navbar,
+    NavbarToggler,
+    NavbarBrand,
+    Nav,
+    NavItem,
+    NavLink,
+    Dropdown,
+    DropdownToggle,
+    DropdownMenu,
+    DropdownItem
+  } from 'sveltestrap';
+  let isOpen = false;
+
+  function handleUpdate(event) {
+    isOpen = event.detail.isOpen;
+  }
+  const widths = [
+    'sm',
+    'md',
+    'lg',
+    'xl',
+    'xxl',
+    'fluid'
+  ];
+</script>
+
+{#each widths as w}
+  <Navbar color="light" light expand="md" container={w}>
+    <NavbarBrand href="/">sveltestrap w/ {w} container</NavbarBrand>
+    <NavbarToggler on:click={() => (isOpen = !isOpen)} />
+    <Collapse {isOpen} navbar expand="md" on:update={handleUpdate}>
+      <Nav class="ms-auto" navbar>
+        <NavItem>
+          <NavLink href="#components/">Components</NavLink>
+        </NavItem>
+        <NavItem>
+          <NavLink href="https://github.com/bestguy/sveltestrap">GitHub</NavLink>
+        </NavItem>
+        <Dropdown nav inNavbar>
+          <DropdownToggle nav caret>Options</DropdownToggle>
+          <DropdownMenu end>
+            <DropdownItem>Option 1</DropdownItem>
+            <DropdownItem>Option 2</DropdownItem>
+            <DropdownItem divider />
+            <DropdownItem>Reset</DropdownItem>
+          </DropdownMenu>
+        </Dropdown>
+      </Nav>
+    </Collapse>
+  </Navbar>
+{/each}
+
diff --git a/stories/navbar/Index.svelte b/stories/navbar/Index.svelte
index e966ac9a..a03c2df0 100644
--- a/stories/navbar/Index.svelte
+++ b/stories/navbar/Index.svelte
@@ -6,6 +6,8 @@
   import sampleSource from '!!raw-loader!./Sample.svelte';
   import Toggler from './Toggler.svelte';
   import togglerSource from '!!raw-loader!./Toggler.svelte';
+  import Containers from './Containers.svelte';
+  import containersSource from '!!raw-loader!./Containers.svelte';
 </script>
 
 <h1>Navbar</h1>
@@ -36,4 +38,12 @@
   <Toggler />
 </Example>
 
+<Example title="Containers" source={containersSource} stacked>
+  <p slot="info">
+    Change the Navbar's container width using the <code>container</code> prop with any of the following values:
+    <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>, <code>xxl</code>, <code>fluid</code> (default).
+  </p>
+  <Containers />
+</Example>
+
 <!-- TODO Add {fixed} {expand} sample -->

From a47bdcad64a54db2e781c90940aa4b8315b2696d Mon Sep 17 00:00:00 2001
From: Uri Simhony <uris@pmtsit.com>
Date: Tue, 21 Jun 2022 22:11:46 +0300
Subject: [PATCH 2/4] fixed matching container width for NavBar

---
 src/Navbar.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Navbar.svelte b/src/Navbar.svelte
index 96119152..a48eb8ea 100644
--- a/src/Navbar.svelte
+++ b/src/Navbar.svelte
@@ -38,8 +38,8 @@
 
 <nav {...$$restProps} class={classes}>
   {#if container}
-    <Container sm={container === 'sm'} md={container === 'md'} lg={container === 'md'}
-               xl={container === 'sm'} xxl={container === 'md'} fluid={container === 'fluid'}>
+    <Container sm={container === 'sm'} md={container === 'md'} lg={container === 'lg'}
+               xl={container === 'xl'} xxl={container === 'xxl'} fluid={container === 'fluid'}>
       <slot />
     </Container>
   {:else}

From 37ff06b626523ecce4770f86106a4bcca9694fb9 Mon Sep 17 00:00:00 2001
From: Uri Simhony <uris@pmtsit.com>
Date: Tue, 21 Jun 2022 22:15:58 +0300
Subject: [PATCH 3/4] changed the NavBarBrand to a more readable name

---
 stories/navbar/Containers.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/stories/navbar/Containers.svelte b/stories/navbar/Containers.svelte
index b935782d..a3a1e09a 100644
--- a/stories/navbar/Containers.svelte
+++ b/stories/navbar/Containers.svelte
@@ -29,7 +29,7 @@
 
 {#each widths as w}
   <Navbar color="light" light expand="md" container={w}>
-    <NavbarBrand href="/">sveltestrap w/ {w} container</NavbarBrand>
+    <NavbarBrand href="/">NavBar with a {w} container</NavbarBrand>
     <NavbarToggler on:click={() => (isOpen = !isOpen)} />
     <Collapse {isOpen} navbar expand="md" on:update={handleUpdate}>
       <Nav class="ms-auto" navbar>

From 14d6b97981a5a691810fd0981bc5abaa65e7a138 Mon Sep 17 00:00:00 2001
From: Uri Simhony <uris@pmtsit.com>
Date: Tue, 21 Jun 2022 22:17:10 +0300
Subject: [PATCH 4/4] changed the NavBarBrand to a more readable name

---
 stories/navbar/Containers.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/stories/navbar/Containers.svelte b/stories/navbar/Containers.svelte
index a3a1e09a..8043b91c 100644
--- a/stories/navbar/Containers.svelte
+++ b/stories/navbar/Containers.svelte
@@ -29,7 +29,7 @@
 
 {#each widths as w}
   <Navbar color="light" light expand="md" container={w}>
-    <NavbarBrand href="/">NavBar with a {w} container</NavbarBrand>
+    <NavbarBrand href="/">NavBar with {w} container</NavbarBrand>
     <NavbarToggler on:click={() => (isOpen = !isOpen)} />
     <Collapse {isOpen} navbar expand="md" on:update={handleUpdate}>
       <Nav class="ms-auto" navbar>