Sidebar Component

.changeset/little-yaks-drum.md

@@ -0,0 +1,8 @@
+---
+"@gradio/core": minor
+"@gradio/sidebar": minor
+"gradio": minor
+"gradio_client": minor
+---
+
+feat:Sidebar Component

client/python/gradio_client/utils.py

@@ -1202,6 +1202,7 @@ def is_file_obj_with_url(d) -> bool:
     "group",
     "interpretation",
     "dataset",
+    "sidebar",
 }
 
 

demo/sidebar/run.py

@@ -0,0 +1,48 @@
+import gradio as gr
+import random
+
+def generate_pet_name(animal_type, personality):
+    cute_prefixes = ["Fluffy", "Ziggy", "Bubbles", "Pickle", "Waffle", "Mochi", "Cookie", "Pepper"]
+    animal_suffixes = {
+        "Cat": ["Whiskers", "Paws", "Mittens", "Purrington"],
+        "Dog": ["Woofles", "Barkington", "Waggins", "Pawsome"],
+        "Bird": ["Feathers", "Wings", "Chirpy", "Tweets"],
+        "Rabbit": ["Hops", "Cottontail", "Bouncy", "Fluff"]
+    }
+
+    prefix = random.choice(cute_prefixes)
+    suffix = random.choice(animal_suffixes[animal_type])
+
+    if personality == "Silly":
+        prefix = random.choice(["Sir", "Lady", "Captain", "Professor"]) + " " + prefix
+    elif personality == "Royal":
+        suffix += " the " + random.choice(["Great", "Magnificent", "Wise", "Brave"])
+
+    return f"{prefix} {suffix}"
+
+with gr.Blocks(theme=gr.themes.Soft()) as demo:
+    with gr.Sidebar():
+        gr.Markdown("# 🐾 Pet Name Generator")
+        gr.Markdown("Use the options below to generate a unique pet name!")
+
+        animal_type = gr.Dropdown(
+            choices=["Cat", "Dog", "Bird", "Rabbit"],
+            label="Choose your pet type",
+            value="Cat"
+        )
+        personality = gr.Radio(
+            choices=["Normal", "Silly", "Royal"],
+            label="Personality type",
+            value="Normal"
+        )
+
+    name_output = gr.Textbox(label="Your pet's fancy name:", lines=2)
+    generate_btn = gr.Button("Generate Name! 🎲", variant="primary")
+    generate_btn.click(
+        fn=generate_pet_name,
+        inputs=[animal_type, personality],
+        outputs=name_output
+    )
+
+if __name__ == "__main__":
+    demo.launch()

gradio/__init__.py

@@ -88,7 +88,7 @@
 from gradio.helpers import Info, Progress, Success, Warning, skip, update
 from gradio.helpers import create_examples as Examples  # noqa: N812
 from gradio.interface import Interface, TabbedInterface, close_all
-from gradio.layouts import Accordion, Column, Group, Row, Tab, TabItem, Tabs
+from gradio.layouts import Accordion, Column, Group, Row, Sidebar, Tab, TabItem, Tabs
 from gradio.oauth import OAuthProfile, OAuthToken
 from gradio.renderable import render
 from gradio.routes import Request, mount_gradio_app
@@ -200,6 +200,7 @@
     "Row",
     "ScatterPlot",
     "SelectData",
+    "Sidebar",
     "SimpleCSVLogger",
     "Sketchpad",
     "Slider",

gradio/layouts/__init__.py

@@ -3,6 +3,7 @@
 from .form import Form
 from .group import Group
 from .row import Row
+from .sidebar import Sidebar
 from .tabs import Tab, TabItem, Tabs
 
 __all__ = [
@@ -14,4 +15,5 @@
     "Tabs",
     "Tab",
     "TabItem",
+    "Sidebar",
 ]

gradio/layouts/sidebar.py

@@ -0,0 +1,48 @@
+from __future__ import annotations
+
+from gradio_client.documentation import document
+
+from gradio.blocks import BlockContext
+from gradio.component_meta import ComponentMeta
+from gradio.events import Events
+
+
+@document()
+class Sidebar(BlockContext, metaclass=ComponentMeta):
+    """
+    Sidebar is a layout element within Blocks that renders all children in a panel on the left side of the screen that can be expanded or collapsed.
+    Example:
+        with gr.Blocks() as demo:
+            with gr.Sidebar():
+                gr.Textbox()
+                gr.Button()
+    """
+    EVENTS = [Events.expand, Events.collapse]
+
+    def __init__(
+        self,
+        label: str | None = None,
+        *,
+        open: bool = True,
+        visible: bool = True,
+        elem_id: str | None = None,
+        elem_classes: list[str] | str | None = None,
+        render: bool = True,
+    ):
+        """
+        Parameters:
+            label: name of the sidebar.
+            open: if True, sidebar is open by default.
+            elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
+            elem_classes: An optional string or list of strings that are assigned as the class of this component in the HTML DOM. Can be used for targeting CSS styles.
+            render: If False, this layout will not be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
+        """
+        self.label = label
+        self.open = open
+        BlockContext.__init__(
+            self,
+            visible=visible,
+            elem_id=elem_id,
+            elem_classes=elem_classes,
+            render=render,
+        )

js/core/package.json

@@ -44,6 +44,7 @@
 		"@gradio/plot": "workspace:^",
 		"@gradio/radio": "workspace:^",
 		"@gradio/row": "workspace:^",
+		"@gradio/sidebar": "workspace:^",
 		"@gradio/simpledropdown": "workspace:^",
 		"@gradio/simpleimage": "workspace:^",
 		"@gradio/simpletextbox": "workspace:^",

js/sidebar/Index.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import Sidebar from "./shared/Sidebar.svelte";
+	import { Block } from "@gradio/atoms";
+	import { StatusTracker } from "@gradio/statustracker";
+	import type { LoadingStatus } from "@gradio/statustracker";
+
+	import Column from "@gradio/column";
+	import type { Gradio } from "@gradio/utils";
+
+	export let label: string;
+	export let elem_id: string;
+	export let elem_classes: string[];
+	export let visible = true;
+	export let open = true;
+	export let loading_status: LoadingStatus;
+	export let gradio: Gradio<{
+		expand: never;
+		collapse: never;
+	}>;
+</script>
+
+<StatusTracker
+	autoscroll={gradio.autoscroll}
+	i18n={gradio.i18n}
+	{...loading_status}
+/>
+
+<Sidebar
+	bind:open
+	on:expand={() => gradio.dispatch("expand")}
+	on:collapse={() => gradio.dispatch("collapse")}
+>
+	<Column>
+		<slot />
+	</Column>
+</Sidebar>

js/sidebar/README.md

@@ -0,0 +1,10 @@
+# `@gradio/sidebar`
+
+```html
+<script>
+	import { Sidebar } from "@gradio/sidebar";
+</script>
+
+<Sidebar>
+</Sidebar>	
+```

js/sidebar/package.json

@@ -0,0 +1,34 @@
+{
+	"name": "@gradio/sidebar",
+	"version": "0.0.1",
+	"description": "Gradio UI packages",
+	"type": "module",
+	"author": "",
+	"license": "ISC",
+	"main_changeset": true,
+	"dependencies": {
+		"@gradio/atoms": "workspace:^",
+		"@gradio/column": "workspace:^",
+		"@gradio/statustracker": "workspace:^",
+		"@gradio/utils": "workspace:^"
+	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
+	"devDependencies": {
+		"@gradio/preview": "workspace:^"
+	},
+	"exports": {
+		".": {
+			"gradio": "./Index.svelte",
+			"svelte": "./dist/Index.svelte",
+			"types": "./dist/Index.svelte.d.ts"
+		},
+		"./package.json": "./package.json"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/gradio-app/gradio.git",
+		"directory": "js/sidebar"
+	}
+}

js/sidebar/shared/Sidebar.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	const dispatch = createEventDispatcher<{
+		expand: void;
+		collapse: void;
+	}>();
+
+	export let open = true;
+</script>
+
+<div class="sidebar" class:open>
+    <button
+        on:click={() => {
+            open = !open;
+            if (open) {
+                dispatch("expand");
+            } else {
+                dispatch("collapse");
+            }
+        }}
+        class="toggle-button"
+        aria-label="Toggle Sidebar"
+    >
+        <div class="chevron">
+            <span class="chevron-left"></span>
+        </div>
+    </button>
+    <div class="sidebar-content">
+        <slot />
+    </div>
+</div>
+
+<style>
+    .sidebar {
+        position: fixed;
+        top: 0;
+        left: 0;
+        height: 100vh;
+        background-color: var(--background-fill-secondary);
+        box-shadow: var(--size-1) 0 var(--size-2) rgba(100, 89, 89, 0.1);
+        transform: translateX(-100%);
+        transition: transform 0.3s ease-in-out;
+        width: var(--size-64);
+        z-index: 1000;
+    }
+
+    .sidebar.open {
+        transform: translateX(0);
+    }
+
+    .toggle-button {
+        position: absolute;
+        top: var(--size-4);
+        right: calc(var(--size-8) * -1);
+        background: none;
+        border: none;
+        cursor: pointer;
+        padding: var(--size-2);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: right 0.3s ease-in-out;
+        width: var(--size-8);
+        height: var(--size-8);
+		z-index: 1001;
+    }
+
+    .open .toggle-button {
+        right: var(--size-2-5);
+        transform: rotate(180deg);
+    }
+
+    .chevron {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .chevron-left {
+        position: relative;
+        width: var(--size-3);
+        height: var(--size-3);
+        border-top: var(--size-0-5) solid var(--button-secondary-background-fill);
+        border-right: var(--size-0-5) solid var(--button-secondary-background-fill);
+        transform: rotate(45deg);
+    }
+
+    .sidebar-content {
+        padding: var(--size-5);
+    }
+</style>

package.json

@@ -134,6 +134,7 @@
 		"@gradio/plot": "workspace:^",
 		"@gradio/radio": "workspace:^",
 		"@gradio/row": "workspace:^",
+		"@gradio/sidebar": "workspace:^",
 		"@gradio/simpledropdown": "workspace:^",
 		"@gradio/simpleimage": "workspace:^",
 		"@gradio/simpletextbox": "workspace:^",

sidebar/shared/Sidebar.svelte

@@ -0,0 +1 @@
+