added container width support to NavBar

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;

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 === 'lg'}
+               xl={container === 'xl'} xxl={container === 'xxl'} fluid={container === 'fluid'}>
       <slot />
     </Container>
   {:else}

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="/">NavBar with {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}
+

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 -->