Skip to content

Commit cbfe384

Browse files
shinokadashinokada
committed
fix: docs: sidebar examples
1 parent 44bc028 commit cbfe384

15 files changed

+62
-17
lines changed

‎src/routes/components/sidebar/examples/ActiveClass.svelte‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
<script lang="ts">
22
import { Sidebar, SidebarGroup, SidebarItem, SidebarButton, uiHelpers } from "$lib";
33
import { ChartOutline, GridSolid, MailBoxSolid, UserSolid } from "flowbite-svelte-icons";
4+
import { page } from '$app/stores';
5+
let activeUrl = $state($page.url.pathname);
46
import PlusPlaceholder from "../../../utils/PlusPlaceholder.svelte";
57
const demoSidebarUi = uiHelpers();
68
let isDemoOpen = $state(false);
79
const closeDemoSidebar = demoSidebarUi.close;
810
$effect(() => {
911
isDemoOpen = demoSidebarUi.isOpen;
12+
activeUrl = $page.url.pathname;
1013
});
1114
const spanClass = "flex-1 ms-3 whitespace-nowrap";
1215
const activeClass = "flex items-center p-2 text-base font-normal text-white bg-primary-600 dark:bg-primary-700 rounded-lg dark:text-white hover:bg-primary-800 dark:hover:bg-primary-800";
@@ -15,7 +18,7 @@
1518

1619
<SidebarButton onclick={demoSidebarUi.toggle} class="mb-2" />
1720
<div class="relative">
18-
<Sidebar backdrop={false} isOpen={isDemoOpen} closeSidebar={closeDemoSidebar} params={{ x: -50, duration: 50 }} {activeClass} {nonActiveClass} position="absolute" class="z-50 h-full">
21+
<Sidebar {activeUrl} backdrop={false} isOpen={isDemoOpen} closeSidebar={closeDemoSidebar} params={{ x: -50, duration: 50 }} {activeClass} {nonActiveClass} position="absolute" class="z-50 h-full">
1922
<SidebarGroup>
2023
<SidebarItem label="Dashboard" href="/">
2124
{#snippet iconSlot()}

‎src/routes/components/sidebar/examples/AllOpen.svelte‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,21 @@
22
import { Sidebar, SidebarGroup, SidebarItem, SidebarDropdownWrapper, SidebarButton, uiHelpers } from "$lib";
33
import { ChartOutline, GridSolid, UserSolid, EditSolid, ShoppingBagSolid } from "flowbite-svelte-icons";
44
import PlusPlaceholder from "../../../utils/PlusPlaceholder.svelte";
5+
import { page } from '$app/stores';
6+
let activeUrl = $state($page.url.pathname);
57
const spanClass = "flex-1 ms-3 whitespace-nowrap";
68
const demoSidebarUi = uiHelpers();
79
let isDemoOpen = $state(false);
810
const closeDemoSidebar = demoSidebarUi.close;
911
$effect(() => {
1012
isDemoOpen = demoSidebarUi.isOpen;
13+
activeUrl = $page.url.pathname;
1114
});
1215
</script>
1316

1417
<SidebarButton onclick={demoSidebarUi.toggle} class="mb-2" />
1518
<div class="relative">
16-
<Sidebar isSingle={false} backdrop={false} isOpen={isDemoOpen} closeSidebar={closeDemoSidebar} params={{ x: -50, duration: 50 }} position="absolute" activeClass="p-2" nonActiveClass="p-2" class="z-50 h-full">
19+
<Sidebar {activeUrl} isSingle={false} backdrop={false} isOpen={isDemoOpen} closeSidebar={closeDemoSidebar} params={{ x: -50, duration: 50 }} position="absolute" activeClass="p-2" nonActiveClass="p-2" class="z-50 h-full">
1720
<SidebarGroup>
1821
<SidebarItem label="Dashboard">
1922
{#snippet iconSlot()}
@@ -32,7 +35,7 @@
3235
{/snippet}
3336
<SidebarItem label="Projects" href="/" />
3437
</SidebarDropdownWrapper>
35-
<SidebarItem label="Kanban" {spanClass} href="/">
38+
<SidebarItem label="Sidebar" {spanClass} href="/components/sidebar">
3639
{#snippet iconSlot()}
3740
<GridSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
3841
{/snippet}

‎src/routes/components/sidebar/examples/BrandingWithChildren.svelte‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,21 @@
22
import { Sidebar, SidebarGroup, SidebarItem, SidebarButton, SidebarBrand, uiHelpers, CloseButton } from "$lib";
33
import { ChartOutline, GridSolid, MailBoxSolid, UserSolid } from "flowbite-svelte-icons";
44
import PlusPlaceholder from "../../../utils/PlusPlaceholder.svelte";
5+
import { page } from '$app/stores';
6+
let activeUrl = $state($page.url.pathname);
57
const spanClass = "flex-1 ms-3 whitespace-nowrap";
68
const demoSidebarUi = uiHelpers();
79
let isDemoOpen = $state(false);
810
const closeDemoSidebar = demoSidebarUi.close;
911
$effect(() => {
1012
isDemoOpen = demoSidebarUi.isOpen;
13+
activeUrl = $page.url.pathname;
1114
});
1215
</script>
1316

1417
<SidebarButton onclick={demoSidebarUi.toggle} class="mb-2" />
1518
<div class="relative">
16-
<Sidebar backdrop={false} isOpen={isDemoOpen} closeSidebar={closeDemoSidebar} params={{ x: -50, duration: 50 }} class="z-50 h-full" position="absolute" activeClass="p-2" nonActiveClass="p-2">
19+
<Sidebar {activeUrl} backdrop={false} isOpen={isDemoOpen} closeSidebar={closeDemoSidebar} params={{ x: -50, duration: 50 }} class="z-50 h-full" position="absolute" activeClass="p-2" nonActiveClass="p-2">
1720
<CloseButton onclick={closeDemoSidebar} color="gray" class="absolute right-1 top-3 p-2 md:hidden" />
1821
<SidebarGroup>
1922
<SidebarBrand>

‎src/routes/components/sidebar/examples/CloseButton.svelte‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,22 @@
11
<script lang="ts">
22
import { CloseButton, Sidebar, SidebarGroup, SidebarItem, SidebarButton, uiHelpers } from "$lib";
33
import { ChartOutline, GridSolid, MailBoxSolid, UserSolid } from "flowbite-svelte-icons";
4+
import { page } from '$app/stores';
5+
let activeUrl = $state($page.url.pathname);
46
import PlusPlaceholder from "../../../utils/PlusPlaceholder.svelte";
57
const spanClass = "flex-1 ms-3 whitespace-nowrap";
68
const demoSidebarUi = uiHelpers();
79
let isDemoOpen = $state(false);
810
const closeDemoSidebar = demoSidebarUi.close;
911
$effect(() => {
1012
isDemoOpen = demoSidebarUi.isOpen;
13+
activeUrl = $page.url.pathname;
1114
});
1215
</script>
1316

1417
<SidebarButton onclick={demoSidebarUi.toggle} class="mb-2" />
1518
<div class="relative">
16-
<Sidebar backdrop={false} isOpen={isDemoOpen} closeSidebar={closeDemoSidebar} params={{ x: -50, duration: 50 }} class="z-50 h-full pt-6" position="absolute" activeClass="p-2" nonActiveClass="p-2">
19+
<Sidebar {activeUrl} backdrop={false} isOpen={isDemoOpen} closeSidebar={closeDemoSidebar} params={{ x: -50, duration: 50 }} class="z-50 h-full pt-6" position="absolute" activeClass="p-2" nonActiveClass="p-2">
1720
<CloseButton onclick={closeDemoSidebar} color="gray" class="absolute right-2 top-2 p-2 md:hidden" />
1821
<SidebarGroup>
1922
<SidebarItem label="Dashboard" href="/">

‎src/routes/components/sidebar/examples/ContentSeparator.svelte‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,21 @@
22
import { Sidebar, SidebarGroup, SidebarItem, SidebarButton, uiHelpers } from "$lib";
33
import { ChartOutline, GridSolid, MailBoxSolid, UserSolid, BookSolid, RestoreWindowOutline, FireSolid } from "flowbite-svelte-icons";
44
import PlusPlaceholder from "../../../utils/PlusPlaceholder.svelte";
5+
import { page } from '$app/stores';
6+
let activeUrl = $state($page.url.pathname);
57
const spanClass = "flex-1 ms-3 whitespace-nowrap";
68
const demoSidebarUi = uiHelpers();
79
let isDemoOpen = $state(false);
810
const closeDemoSidebar = demoSidebarUi.close;
911
$effect(() => {
1012
isDemoOpen = demoSidebarUi.isOpen;
13+
activeUrl = $page.url.pathname;
1114
});
1215
</script>
1316

1417
<SidebarButton onclick={demoSidebarUi.toggle} class="mb-2" />
1518
<div class="relative">
16-
<Sidebar backdrop={false} isOpen={isDemoOpen} closeSidebar={closeDemoSidebar} params={{ x: -50, duration: 50 }} class="z-50 h-full" position="absolute" activeClass="p-2" nonActiveClass="p-2">
19+
<Sidebar {activeUrl} backdrop={false} isOpen={isDemoOpen} closeSidebar={closeDemoSidebar} params={{ x: -50, duration: 50 }} class="z-50 h-full" position="absolute" activeClass="p-2" nonActiveClass="p-2">
1720
<SidebarGroup>
1821
<SidebarItem label="Dashboard" href="/">
1922
{#snippet iconSlot()}

‎src/routes/components/sidebar/examples/Cta.svelte‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,21 @@
22
import { Sidebar, SidebarGroup, SidebarItem, SidebarButton, SidebarCta, uiHelpers } from "$lib";
33
import { ChartOutline, GridSolid, MailBoxSolid, UserSolid, CloseOutline } from "flowbite-svelte-icons";
44
import PlusPlaceholder from "../../../utils/PlusPlaceholder.svelte";
5+
import { page } from '$app/stores';
6+
let activeUrl = $state($page.url.pathname);
57
const spanClass = "flex-1 ms-3 whitespace-nowrap";
68
const demoSidebarUi = uiHelpers();
79
let isDemoOpen = $state(false);
810
const closeDemoSidebar = demoSidebarUi.close;
911
$effect(() => {
1012
isDemoOpen = demoSidebarUi.isOpen;
13+
activeUrl = $page.url.pathname;
1114
});
1215
</script>
1316

1417
<SidebarButton onclick={demoSidebarUi.toggle} class="mb-2" />
1518
<div class="relative">
16-
<Sidebar backdrop={false} isOpen={isDemoOpen} closeSidebar={closeDemoSidebar} params={{ x: -50, duration: 50 }} class="z-50 h-full" position="absolute" activeClass="p-2" nonActiveClass="p-2">
19+
<Sidebar {activeUrl} backdrop={false} isOpen={isDemoOpen} closeSidebar={closeDemoSidebar} params={{ x: -50, duration: 50 }} class="z-50 h-full" position="absolute" activeClass="p-2" nonActiveClass="p-2">
1720
<SidebarGroup>
1821
<SidebarItem label="Dashboard" href="/">
1922
{#snippet iconSlot()}

‎src/routes/components/sidebar/examples/Default.svelte‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,22 @@
11
<script lang="ts">
22
import { Sidebar, SidebarGroup, SidebarItem, SidebarButton, uiHelpers } from "$lib";
33
import { ChartOutline, GridSolid, MailBoxSolid, UserSolid } from "flowbite-svelte-icons";
4+
import { page } from '$app/stores';
5+
let activeUrl = $state($page.url.pathname);
46
import PlusPlaceholder from "../../../utils/PlusPlaceholder.svelte";
57
const spanClass = "flex-1 ms-3 whitespace-nowrap";
68
const demoSidebarUi = uiHelpers();
79
let isDemoOpen = $state(false);
810
const closeDemoSidebar = demoSidebarUi.close;
911
$effect(() => {
1012
isDemoOpen = demoSidebarUi.isOpen;
13+
activeUrl = $page.url.pathname;
1114
});
1215
</script>
1316

1417
<SidebarButton onclick={demoSidebarUi.toggle} class="mb-2" />
1518
<div class="relative">
16-
<Sidebar backdrop={false} isOpen={isDemoOpen} closeSidebar={closeDemoSidebar} params={{ x: -50, duration: 50 }} class="z-50 h-full" position="absolute" activeClass="p-2" nonActiveClass="p-2">
19+
<Sidebar {activeUrl} backdrop={false} isOpen={isDemoOpen} closeSidebar={closeDemoSidebar} params={{ x: -50, duration: 50 }} class="z-50 h-full" position="absolute" activeClass="p-2" nonActiveClass="p-2">
1720
<SidebarGroup>
1821
<SidebarItem label="Dashboard" href="/">
1922
{#snippet iconSlot()}

‎src/routes/components/sidebar/examples/DropdownTransition.svelte‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
import PlusPlaceholder from "../../../utils/PlusPlaceholder.svelte";
55
import { fade } from "svelte/transition";
66
import { sineIn } from "svelte/easing";
7+
import { page } from '$app/stores';
8+
let activeUrl = $state($page.url.pathname);
79
let params = {
810
duration: 700,
911
easing: sineIn
@@ -14,12 +16,13 @@
1416
const closeDemoSidebar = demoSidebarUi.close;
1517
$effect(() => {
1618
isDemoOpen = demoSidebarUi.isOpen;
19+
activeUrl = $page.url.pathname;
1720
});
1821
</script>
1922

2023
<SidebarButton onclick={demoSidebarUi.toggle} class="mb-2" />
2124
<div class="relative">
22-
<Sidebar backdrop={false} isOpen={isDemoOpen} closeSidebar={closeDemoSidebar} params={{ x: -50, duration: 50 }} position="absolute" activeClass="p-2" nonActiveClass="p-2" class="z-50 h-full">
25+
<Sidebar {activeUrl} backdrop={false} isOpen={isDemoOpen} closeSidebar={closeDemoSidebar} params={{ x: -50, duration: 50 }} position="absolute" activeClass="p-2" nonActiveClass="p-2" class="z-50 h-full">
2326
<SidebarGroup>
2427
<SidebarItem label="Dashboard">
2528
{#snippet iconSlot()}

‎src/routes/components/sidebar/examples/Icon.svelte‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,20 @@
22
import { Sidebar, SidebarGroup, SidebarItem, SidebarDropdownWrapper, SidebarButton, uiHelpers } from "$lib";
33
import { ChartOutline, ChevronDoubleUpOutline, ChevronDoubleDownOutline, ShoppingBagSolid } from "flowbite-svelte-icons";
44
import PlusPlaceholder from "../../../utils/PlusPlaceholder.svelte";
5+
import { page } from '$app/stores';
6+
let activeUrl = $state($page.url.pathname);
57
const demoSidebarUi = uiHelpers();
68
let isDemoOpen = $state(false);
79
const closeDemoSidebar = demoSidebarUi.close;
810
$effect(() => {
911
isDemoOpen = demoSidebarUi.isOpen;
12+
activeUrl = $page.url.pathname;
1013
});
1114
</script>
1215

1316
<SidebarButton onclick={demoSidebarUi.toggle} class="mb-2" />
1417
<div class="relative">
15-
<Sidebar backdrop={false} isOpen={isDemoOpen} closeSidebar={closeDemoSidebar} params={{ x: -50, duration: 50 }} position="absolute" class="z-50 h-full" activeClass="p-2" nonActiveClass="p-2">
18+
<Sidebar {activeUrl} backdrop={false} isOpen={isDemoOpen} closeSidebar={closeDemoSidebar} params={{ x: -50, duration: 50 }} position="absolute" class="z-50 h-full" activeClass="p-2" nonActiveClass="p-2">
1619
<SidebarGroup>
1720
<SidebarItem label="Dashboard">
1821
{#snippet iconSlot()}

‎src/routes/components/sidebar/examples/LogoBranding.svelte‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,15 @@
22
import { Sidebar, SidebarGroup, SidebarItem, SidebarButton, SidebarBrand, uiHelpers, CloseButton } from "$lib";
33
import { ChartOutline, GridSolid, MailBoxSolid, UserSolid } from "flowbite-svelte-icons";
44
import PlusPlaceholder from "../../../utils/PlusPlaceholder.svelte";
5+
import { page } from '$app/stores';
6+
let activeUrl = $state($page.url.pathname);
57
const spanClass = "flex-1 ms-3 whitespace-nowrap";
68
const demoSidebarUi = uiHelpers();
79
let isDemoOpen = $state(false);
810
const closeDemoSidebar = demoSidebarUi.close;
911
$effect(() => {
1012
isDemoOpen = demoSidebarUi.isOpen;
13+
activeUrl = $page.url.pathname;
1114
});
1215
const site = {
1316
name: "Flowbite-Svelte",
@@ -19,7 +22,7 @@
1922

2023
<SidebarButton onclick={demoSidebarUi.toggle} class="mb-2" />
2124
<div class="relative">
22-
<Sidebar backdrop={false} isOpen={isDemoOpen} closeSidebar={closeDemoSidebar} params={{ x: -50, duration: 50 }} class="z-50 h-full" position="absolute" activeClass="p-2" nonActiveClass="p-2">
25+
<Sidebar {activeUrl} backdrop={false} isOpen={isDemoOpen} closeSidebar={closeDemoSidebar} params={{ x: -50, duration: 50 }} class="z-50 h-full" position="absolute" activeClass="p-2" nonActiveClass="p-2">
2326
<CloseButton onclick={closeDemoSidebar} color="gray" class="absolute right-1 top-3 p-2 md:hidden" />
2427
<SidebarGroup>
2528
<SidebarBrand {site} />

0 commit comments

Comments
 (0)