🪞 Frontend: Added sidebar support to the front end, removed the menu bar.

README.md

@@ -25,7 +25,7 @@ For personal use, one/new-api is too complex with many commercial features that
 - Support four types of load balancing.
   1. Supports channel-level weighted load balancing, allowing requests to be distributed according to different channel weights. It is not enabled by default and requires configuring channel weights.
   2. Support Vertex regional load balancing and high concurrency, which can increase Gemini and Claude concurrency by up to (number of APIs * number of regions) times. Automatically enabled without additional configuration.
-  3. Except for Vertex region-level load balancing, all APIs support channel-level sequential load balancing, enhancing the immersive translation experience. Automatically enabled without additional configuration.
+  3. Except for Vertex region-level load balancing, all APIs support channel-level sequential load balancing, enhancing the immersive translation experience. It is not enabled by default and requires configuring `SCHEDULING_ALGORITHM` as `round_robin`.
   4. Support automatic API key-level round-robin load balancing for multiple API Keys in a single channel.
 - Support automatic retry, when an API channel response fails, automatically retry the next API channel.
 - Support fine-grained permission control. Support using wildcards to set specific models available for API key channels.
@@ -59,36 +59,36 @@ Detailed advanced configuration of `api.yaml`:
 
 ```yaml
 providers:
-  - provider: provider_name # Service provider name, such as openai, anthropic, gemini, openrouter, deepbricks, any name, required
-    base_url: https://api.your.com/v1/chat/completions # Backend service API address, required
+  - provider: provider_name # Service provider name, such as openai, anthropic, gemini, openrouter, deepbricks, any name can be given, required
+    base_url: https://api.your.com/v1/chat/completions # API address of the backend service, required
     api: sk-YgS6GTi0b4bEabc4C # Provider's API Key, required
-    model: # Optional, if model is not configured, all available models will be automatically retrieved through base_url and api via the /v1/models endpoint.
-      - gpt-4o # Usable model name, required
-      - claude-3-5-sonnet-20240620: claude-3-5-sonnet # Rename model, claude-3-5-sonnet-20240620 is the provider's model name, claude-3-5-sonnet is the renamed name, you can use a simpler name instead of the original complex name, optional
+    model: # Optional, if model is not configured, all available models will be automatically obtained via base_url and api through the /v1/models endpoint.
+      - gpt-4o # Model name that can be used, required
+      - claude-3-5-sonnet-20240620: claude-3-5-sonnet # Renamed model, claude-3-5-sonnet-20240620 is the provider's model name, claude-3-5-sonnet is the renamed name, you can use a simple name to replace the original complex name, optional
       - dall-e-3
 
   - provider: anthropic
     base_url: https://api.anthropic.com/v1/messages
-    api: # Supports multiple API Keys, multiple keys automatically enable round-robin load balancing, at least one key, required
+    api: # Supports multiple API Keys, multiple keys automatically enable polling load balancing, at least one key, required
       - sk-ant-api03-bNnAOJyA-xQw_twAA
       - sk-ant-api02-bNnxxxx
     model:
-      - claude-3-5-sonnet-20240620: claude-3-5-sonnet # Rename model, claude-3-5-sonnet-20240620 is the provider's model name, claude-3-5-sonnet is the renamed name, you can use a simpler name instead of the original complex name, optional
-    tools: true # Whether to support tools, such as code generation, document generation, etc., default is true, optional
+      - claude-3-5-sonnet-20240620: claude-3-5-sonnet # Renamed model, claude-3-5-sonnet-20240620 is the provider's model name, claude-3-5-sonnet is the renamed name, you can use a simple name to replace the original complex name, optional
+    tools: true # Whether to support tools, such as generating code, generating documents, etc., default is true, optional
 
   - provider: gemini
     base_url: https://generativelanguage.googleapis.com/v1beta # base_url supports v1beta/v1, only for Gemini models, required
     api: AIzaSyAN2k6IRdgw
     model:
       - gemini-1.5-pro
-      - gemini-1.5-flash-exp-0827: gemini-1.5-flash # After renaming, the original model name gemini-1.5-flash-exp-0827 cannot be used, if you want to use the original name, you can add the original name in the model, just add the following line to use the original name
+      - gemini-1.5-flash-exp-0827: gemini-1.5-flash # After renaming, the original model name gemini-1.5-flash-exp-0827 cannot be used, if you want to use the original name, you can add the original name in the model, just add the line below to use the original name
       - gemini-1.5-flash-exp-0827 # Add this line, both gemini-1.5-flash-exp-0827 and gemini-1.5-flash can be requested
     tools: true
 
   - provider: vertex
-    project_id: gen-lang-client-xxxxxxxxxxxxxx #    Description: Your Google Cloud project ID. Format: String, usually composed of lowercase letters, numbers, and hyphens. How to obtain: You can find your project ID in the project selector of the Google Cloud Console.
-    private_key: "-----BEGIN PRIVATE KEY-----\nxxxxx\n-----END PRIVATE" # Description: The private key of the Google Cloud Vertex AI service account. Format: A JSON-formatted string containing the private key information of the service account. How to obtain: Create a service account in the Google Cloud Console, generate a JSON-formatted key file, and then set its content as the value of this environment variable.
-    client_email: xxxxxxxxxx@xxxxxxx.gserviceaccount.com # Description: The email address of the Google Cloud Vertex AI service account. Format: Usually a string like "service-account-name@project-id.iam.gserviceaccount.com". How to obtain: Generated when creating a service account, or can be obtained by viewing service account details in the "IAM & Admin" section of the Google Cloud Console.
+    project_id: gen-lang-client-xxxxxxxxxxxxxx # Description: Your Google Cloud project ID. Format: String, usually composed of lowercase letters, numbers, and hyphens. How to obtain: You can find your project ID in the project selector in Google Cloud Console.
+    private_key: "-----BEGIN PRIVATE KEY-----\nxxxxx\n-----END PRIVATE" # Description: Private key of Google Cloud Vertex AI service account. Format: A JSON formatted string containing the private key information of the service account. How to obtain: Create a service account in Google Cloud Console, generate a JSON format key file, and then set its content as the value of this environment variable.
+    client_email: xxxxxxxxxx@xxxxxxx.gserviceaccount.com # Description: Email address of Google Cloud Vertex AI service account. Format: Usually a string like "service-account-name@project-id.iam.gserviceaccount.com". How to obtain: Generated when creating a service account, can also be obtained by viewing the service account details in the "IAM and Admin" section of Google Cloud Console.
     model:
       - gemini-1.5-pro
       - gemini-1.5-flash
@@ -97,14 +97,14 @@ providers:
       - claude-3-sonnet@20240229: claude-3-sonnet
       - claude-3-haiku@20240307: claude-3-haiku
     tools: true
-    notes: https://xxxxx.com/ # Can include the provider's website, notes, official documentation, optional
+    notes: https://xxxxx.com/ # You can put the provider's website, notes, official documentation, optional
 
   - provider: cloudflare
     api: f42b3xxxxxxxxxxq4aoGAh # Cloudflare API Key, required
     cf_account_id: 8ec0xxxxxxxxxxxxe721 # Cloudflare Account ID, required
     model:
-      - '@cf/meta/llama-3.1-8b-instruct': llama-3.1-8b # Rename model, @cf/meta/llama-3.1-8b-instruct is the provider's original model name, must be enclosed in quotes to avoid YAML syntax error, llama-3.1-8b is the renamed name, you can use a simpler name instead of the original complex name, optional
-      - '@cf/meta/llama-3.1-8b-instruct' # Must be enclosed in quotes to avoid YAML syntax error
+      - '@cf/meta/llama-3.1-8b-instruct': llama-3.1-8b # Renamed model, @cf/meta/llama-3.1-8b-instruct is the provider's original model name, the model name must be enclosed in quotes, otherwise yaml syntax error, llama-3.1-8b is the renamed name, you can use a simple name to replace the original complex name, optional
+      - '@cf/meta/llama-3.1-8b-instruct' # The model name must be enclosed in quotes, otherwise yaml syntax error
 
   - provider: other-provider
     base_url: https://api.xxx.com/v1/messages
@@ -113,37 +113,38 @@ providers:
       - causallm-35b-beta2ep-q6k: causallm-35b
       - anthropic/claude-3-5-sonnet
     tools: false
-    engine: openrouter # Force use of a specific message format, currently supports gpt, claude, gemini, openrouter native format, optional
+    engine: openrouter # Force to use a specific message format, currently supports gpt, claude, gemini, openrouter native format, optional
 
 api_keys:
-  - api: sk-KjjI60Yf0JFWxfgRmXqFWyGtWUd9GZnmi3KlvowmRWpWpQRo # API Key, required for users to use this service
-    model: # The models that this API Key can use, required. Channel-level round-robin load balancing is enabled by default, and each request model is requested in the order configured in the model. It is unrelated to the original channel order in providers. Therefore, you can set different request orders for each API key.
-      - gpt-4o # Usable model name, can use all gpt-4o models provided by providers
-      - claude-3-5-sonnet # Usable model name, can use all claude-3-5-sonnet models provided by providers
-      - gemini/* # Usable model name, can only use all models provided by the provider named gemini, where gemini is the provider name, * represents all models
+  - api: sk-KjjI60Yf0JFWxfgRmXqFWyGtWUd9GZnmi3KlvowmRWpWpQRo # API Key, users need an API key to use this service, required
+    model: # The model that this API Key can use, required. Channel-level polling load balancing is enabled by default, each request model is requested in the order configured in the model. It is unrelated to the original channel order in providers. Therefore, you can set different request orders for each API key.
+      - gpt-4o # Model name that can be used, can use the gpt-4o model provided by all providers
+      - claude-3-5-sonnet # Model name that can be used, can use the claude-3-5-sonnet model provided by all providers
+      - gemini/* # Model name that can be used, can only use all models provided by the provider named gemini, where gemini is the provider name, * represents all models
     role: admin
 
   - api: sk-pkhf60Yf0JGyJxgRmXqFQyTgWUd9GZnmi3KlvowmRWpWqrhy
     model:
-      - anthropic/claude-3-5-sonnet # Usable model name, can only use the claude-3-5-sonnet model provided by the provider named anthropic. Models named claude-3-5-sonnet from other providers cannot be used. This notation will not match the model named anthropic/claude-3-5-sonnet provided by other-provider.
-      - <anthropic/claude-3-5-sonnet> # By adding angle brackets around the model name, it will not look for the claude-3-5-sonnet model under the channel named anthropic, but instead treat the entire anthropic/claude-3-5-sonnet as the model name. This notation can match the model named anthropic/claude-3-5-sonnet provided by other-provider. But it will not match the claude-3-5-sonnet model under anthropic.
-      - openai-test/text-moderation-latest # When message moderation is enabled, the text-moderation-latest model under the channel named openai-test can be used for message moderation.
+      - anthropic/claude-3-5-sonnet # Model name that can be used, can only use the claude-3-5-sonnet model provided by the provider named anthropic. The claude-3-5-sonnet model from other providers cannot be used. This way of writing will not match the model named anthropic/claude-3-5-sonnet provided by other-provider.
+      - <anthropic/claude-3-5-sonnet> # By adding angle brackets on both sides of the model name, it will not look for the claude-3-5-sonnet model under the channel named anthropic, but will use the entire anthropic/claude-3-5-sonnet as the model name. This way of writing can match the model named anthropic/claude-3-5-sonnet provided by other-provider. But it will not match the claude-3-5-sonnet model under anthropic.
+      - openai-test/text-moderation-latest # When message moderation is enabled, the text-moderation-latest model under the channel named openai-test can be used for moral review.
     preferences:
-      SCHEDULING_ALGORITHM: fixed_priority # When SCHEDULING_ALGORITHM is fixed_priority, fixed priority scheduling is used, always executing the channel of the first model with a request. Modify the default channel round-robin load balancing. SCHEDULING_ALGORITHM options are: fixed_priority, weighted_round_robin, lottery, random.
-      # When SCHEDULING_ALGORITHM is random, random round-robin load balancing is used, randomly requesting the channel of the model with a request.
+      SCHEDULING_ALGORITHM: fixed_priority # When SCHEDULING_ALGORITHM is fixed_priority, use fixed priority scheduling, always execute the first channel with a request. Enabled by default, the default value of SCHEDULING_ALGORITHM is fixed_priority. Optional values for SCHEDULING_ALGORITHM are: fixed_priority, round_robin, weighted_round_robin, lottery, random.
+      # When SCHEDULING_ALGORITHM is random, use random polling load balancing, randomly request the channel with the requested model.
+      # When SCHEDULING_ALGORITHM is round_robin, use polling load balancing, request the channel of the user's model in order.
       AUTO_RETRY: true # Whether to automatically retry, automatically retry the next provider, true for automatic retry, false for no automatic retry, default is true
-      RATE_LIMIT: 2/min # Supports rate limiting, the maximum number of requests per minute, can be set as an integer, such as 2/min, 2 times per minute, 5/hour, 5 times per hour, 10/day, 10 times per day, 10/month, 10 times per month, 10/year, 10 times per year. Default is 60/min, optional
-      ENABLE_MODERATION: true # Whether to enable message moderation, true to enable, false to disable, default is false, when enabled, user messages will be moderated, and if inappropriate messages are found, an error message will be returned.
+      RATE_LIMIT: 2/min # Supports rate limiting, maximum number of requests per minute, can be set to an integer, such as 2/min, 2 times per minute, 5/hour, 5 times per hour, 10/day, 10 times per day, 10/month, 10 times per month, 10/year, 10 times per year. Default is 60/min, optional
+      ENABLE_MODERATION: true # Whether to enable message moderation, true for enable, false for disable, default is false, when enabled, messages will be morally reviewed, if inappropriate messages are found, an error message will be returned.
 
   # Channel-level weighted load balancing configuration example
   - api: sk-KjjI60Yd0JFWtxxxxxxxxxxxxxxwmRWpWpQRo
     model:
       - gcp1/*: 5 # The number after the colon is the weight, weight only supports positive integers.
-      - gcp2/*: 3 # The larger the number, the greater the probability of the request.
-      - gcp3/*: 2 # In this example, there are a total of 10 weights across all channels, and out of 10 requests, 5 requests will request the gcp1/* model, 2 requests will request the gcp2/* model, and 3 requests will request the gcp3/* model.
+      - gcp2/*: 3 # The size of the number represents the weight, the larger the number, the greater the probability of the request.
+      - gcp3/*: 2 # In this example, there are a total of 10 weights across all channels, and 5 out of 10 requests will request the gcp1/* model, 2 requests will request the gcp2/* model, and 3 requests will request the gcp3/* model.
 
     preferences:
-      SCHEDULING_ALGORITHM: weighted_round_robin # Only when SCHEDULING_ALGORITHM is weighted_round_robin and if the above channels have weights, requests will be made according to the weighted order. Use weighted round-robin load balancing, request the channel of the model with a request according to the weight order. When SCHEDULING_ALGORITHM is lottery, use lottery round-robin load balancing, request the channel of the model with a request according to the weight randomly.
+      SCHEDULING_ALGORITHM: weighted_round_robin # Only when SCHEDULING_ALGORITHM is weighted_round_robin and the channels above have weights, requests will be made in the weighted order. Use weighted polling load balancing, request the channel of the model with the request in weight order. When SCHEDULING_ALGORITHM is lottery, use lottery polling load balancing, randomly request the channel of the model with the request according to weight. Channels without weights automatically fall back to round_robin polling load balancing.
       AUTO_RETRY: true
 ```
 

README_CN.md

@@ -25,7 +25,7 @@
 - 支持四种负载均衡。
   1. 支持渠道级加权负载均衡，可以根据不同的渠道权重分配请求。默认不开启，需要配置渠道权重。
   2. 支持 Vertex 区域级负载均衡，支持 Vertex 高并发，最高可将 Gemini，Claude 并发提高 （API数量 * 区域数量） 倍。自动开启不需要额外配置。
-  3. 除了 Vertex 区域级负载均衡，所有 API 均支持渠道级顺序负载均衡，提高沉浸式翻译体验。自动开启不需要额外配置。
+  3. 除了 Vertex 区域级负载均衡，所有 API 均支持渠道级顺序负载均衡，提高沉浸式翻译体验。默认不开启，需要配置 `SCHEDULING_ALGORITHM` 为 `round_robin`。
   4. 支持单个渠道多个 API Key 自动开启 API key 级别的轮训负载均衡。
 - 支持自动重试，当一个 API 渠道响应失败时，自动重试下一个 API 渠道。
 - 支持细粒度的权限控制。支持使用通配符设置 API key 可用渠道的特定模型。
@@ -87,8 +87,8 @@ providers:
 
   - provider: vertex
     project_id: gen-lang-client-xxxxxxxxxxxxxx #    描述： 您的Google Cloud项目ID。格式： 字符串，通常由小写字母、数字和连字符组成。获取方式： 在Google Cloud Console的项目选择器中可以找到您的项目ID。
-    private_key: "-----BEGIN PRIVATE KEY-----\nxxxxx\n-----END PRIVATE" # 描述： Google Cloud Vertex AI服务账号的私钥。格式： 一个JSON格式的字符串，包含服务账号的私钥信息。获取方式： 在Google Cloud Console中创建服务账号，生成JSON格式的密钥文件，然后将其内容设置为此环境变量的值。
-    client_email: xxxxxxxxxx@xxxxxxx.gserviceaccount.com # 描述： Google Cloud Vertex AI服务账号的电子邮件地址。格式： 通常是形如 "service-account-name@project-id.iam.gserviceaccount.com" 的字符串。获取方式： 在创建服务账号时生成，也可以在Google Cloud Console的"IAM与管理"部分查看服务账号详情获得。
+    private_key: "-----BEGIN PRIVATE KEY-----\nxxxxx\n-----END PRIVATE" # 描述： Google Cloud Vertex AI服务账号的私钥。格式： 一个 JSON 格式的字符串，包含服务账号的私钥信息。获取方式： 在 Google Cloud Console 中创建服务账号，生成JSON格式的密钥文件，然后将其内容设置为此环境变量的值。
+    client_email: xxxxxxxxxx@xxxxxxx.gserviceaccount.com # 描述： Google Cloud Vertex AI 服务账号的电子邮件地址。格式： 通常是形如 "service-account-name@project-id.iam.gserviceaccount.com" 的字符串。获取方式： 在创建服务账号时生成，也可以在 Google Cloud Console 的"IAM与管理"部分查看服务账号详情获得。
     model:
       - gemini-1.5-pro
       - gemini-1.5-flash
@@ -129,8 +129,9 @@ api_keys:
       - <anthropic/claude-3-5-sonnet> # 通过在模型名两侧加上尖括号，这样就不会去名为anthropic的渠道下去寻找claude-3-5-sonnet模型，而是将整个 anthropic/claude-3-5-sonnet 作为模型名称。这种写法可以匹配到other-provider提供的名为 anthropic/claude-3-5-sonnet 的模型。但不会匹配到anthropic下面的claude-3-5-sonnet模型。
       - openai-test/text-moderation-latest # 当开启消息道德审查后，可以使用名为 openai-test 渠道下的 text-moderation-latest 模型进行道德审查。
     preferences:
-      SCHEDULING_ALGORITHM: fixed_priority # 当 SCHEDULING_ALGORITHM 为 fixed_priority 时，使用固定优先级调度，永远执行第一个拥有请求的模型的渠道。修改默认开启的渠道轮询负载均衡。SCHEDULING_ALGORITHM 可选值为：fixed_priority，weighted_round_robin, lottery, random。
+      SCHEDULING_ALGORITHM: fixed_priority # 当 SCHEDULING_ALGORITHM 为 fixed_priority 时，使用固定优先级调度，永远执行第一个拥有请求的模型的渠道。默认开启，SCHEDULING_ALGORITHM 缺省值为 fixed_priority。SCHEDULING_ALGORITHM 可选值有：fixed_priority，round_robin，weighted_round_robin, lottery, random。
       # 当 SCHEDULING_ALGORITHM 为 random 时，使用随机轮训负载均衡，随机请求拥有请求的模型的渠道。
+      # 当 SCHEDULING_ALGORITHM 为 round_robin 时，使用轮训负载均衡，按照顺序请求用户使用的模型的渠道。
       AUTO_RETRY: true # 是否自动重试，自动重试下一个提供商，true 为自动重试，false 为不自动重试，默认为 true
       RATE_LIMIT: 2/min # 支持限流，每分钟最多请求次数，可以设置为整数，如 2/min，2 次每分钟、5/hour，5 次每小时、10/day，10 次每天，10/month，10 次每月，10/year，10 次每年。默认60/min，选填
       ENABLE_MODERATION: true # 是否开启消息道德审查，true 为开启，false 为不开启，默认为 false，当开启后，会对用户的消息进行道德审查，如果发现不当的消息，会返回错误信息。
@@ -143,7 +144,7 @@ api_keys:
       - gcp3/*: 2 # 在该示例中，所有渠道加起来一共�� 10 个权重，及 10 个请求里面有 5 个请求会请求 gcp1/* 模型，2 个请求会请求 gcp2/* 模型，3 个请求会请求 gcp3/* 模型。
 
     preferences:
-      SCHEDULING_ALGORITHM: weighted_round_robin # 仅当 SCHEDULING_ALGORITHM 为 weighted_round_robin 并且上面的渠道如果有权重，会按照加权后的顺序请求。使用加权轮训负载均衡，按照权重顺序请求拥有请求的模型的渠道。当 SCHEDULING_ALGORITHM 为 lottery 时，使用抽奖轮训负载均衡，按照权重随机请求拥有请求的模型的渠道。
+      SCHEDULING_ALGORITHM: weighted_round_robin # 仅当 SCHEDULING_ALGORITHM 为 weighted_round_robin 并且上面的渠道如果有权重，会按照加权后的顺序请求。使用加权轮训负载均衡，按照权重顺序请求拥有请求的模型的渠道。当 SCHEDULING_ALGORITHM 为 lottery 时，使用抽奖轮训负载均衡，按照权重随机请求拥有请求的模型的渠道。没设置权重的渠道自动回退到 round_robin 轮训负载均衡。
       AUTO_RETRY: true
 ```
 

main.py

@@ -1077,8 +1077,7 @@ from xue.components.menubar import (
     Menubar, MenubarMenu, MenubarTrigger, MenubarContent,
     MenubarItem, MenubarSeparator
 )
-from xue.components import input
-from xue.components import dropdown, sheet, form, button, checkbox
+from xue.components import input, dropdown, sheet, form, button, checkbox, sidebar
 from xue.components.model_config_row import model_config_row
 # import sys
 # import os
@@ -1184,6 +1183,38 @@ async def verify_api_key(x_api_key: str = FastapiForm(...)):
     else:
         return Div("无效的API密钥", class_="text-red-500").render()
 
+# 添加侧边栏配置
+sidebar_items = [
+    {
+        "icon": "layout-dashboard",
+        # "label": "仪表盘",
+        "label": "Dashboard",
+        "value": "dashboard",
+        "hx": {"get": "/dashboard", "target": "#main-content"}
+    },
+    # {
+    #     "icon": "settings",
+    #     # "label": "设置",
+    #     "label": "Settings",
+    #     "value": "settings",
+    #     "hx": {"get": "/settings", "target": "#main-content"}
+    # },
+    # {
+    #     "icon": "database",
+    #     # "label": "数据",
+    #     "label": "Data",
+    #     "value": "data",
+    #     "hx": {"get": "/data", "target": "#main-content"}
+    # },
+    # {
+    #     "icon": "scroll-text",
+    #     # "label": "日志",
+    #     "label": "Logs",
+    #     "value": "logs",
+    #     "hx": {"get": "/logs", "target": "#main-content"}
+    # }
+]
+
 @frontend_router.get("/", response_class=HTMLResponse, dependencies=[Depends(frontend_rate_limit_dependency)])
 async def root(x_api_key: str = Depends(get_api_key)):
     if not x_api_key:
@@ -1200,56 +1231,22 @@ async def root(x_api_key: str = Depends(get_api_key)):
                     });
                 });
             """),
-            title="Menubar Example"
+            title="uni-api"
         ),
         Body(
             Div(
-                Menubar(
-                    MenubarMenu(
-                        MenubarTrigger("File", "file-menu"),
-                        MenubarContent(
-                            MenubarItem("New Tab", shortcut="⌘T"),
-                            MenubarItem("New Window", shortcut="⌘N"),
-                            MenubarItem("New Incognito Window", disabled=True),
-                            MenubarSeparator(),
-                            MenubarItem("Print...", shortcut="⌘P"),
-                        ),
-                        id="file-menu"
-                    ),
-                    MenubarMenu(
-                        MenubarTrigger("Edit", "edit-menu"),
-                        MenubarContent(
-                            MenubarItem("Undo", shortcut="⌘Z"),
-                            MenubarItem("Redo", shortcut="⇧⌘Z"),
-                            MenubarSeparator(),
-                            MenubarItem("Cut"),
-                            MenubarItem("Copy"),
-                            MenubarItem("Paste"),
-                        ),
-                        id="edit-menu"
-                    ),
-                    MenubarMenu(
-                        MenubarTrigger("View", "view-menu"),
-                        MenubarContent(
-                            MenubarItem("Always Show Bookmarks Bar"),
-                            MenubarItem("Always Show Full URLs"),
-                            MenubarSeparator(),
-                            MenubarItem("Reload", shortcut="⌘R"),
-                            MenubarItem("Force Reload", shortcut="⇧⌘R", disabled=True),
-                            MenubarSeparator(),
-                            MenubarItem("Toggle Fullscreen"),
-                            MenubarItem("Hide Sidebar"),
-                        ),
-                        id="view-menu"
+                sidebar.Sidebar("zap", "uni-api", sidebar_items, is_collapsed=False, active_item="dashboard"),
+                Div(
+                    Div(
+                        data_table(data_table_columns, app.state.config["providers"], "users-table"),
+                        class_="p-4"
                     ),
+                    Div(id="sheet-container"),  # sheet加载位置
+                    id="main-content",
+                    class_="ml-[240px] p-6 transition-[margin] duration-200 ease-in-out"
                 ),
-                class_="p-4"
-            ),
-            Div(
-                data_table(data_table_columns, app.state.config["providers"], "users-table"),
-                class_="p-4"
+                class_="flex"
             ),
-            Div(id="sheet-container"),  # 这里是 sheet 将被加载的地方
             class_="container mx-auto",
             id="body"
         )
@@ -1257,6 +1254,16 @@ async def root(x_api_key: str = Depends(get_api_key)):
     # print(result)
     return result
 
+@frontend_router.get("/sidebar/toggle", response_class=HTMLResponse)
+async def toggle_sidebar(is_collapsed: bool = False):
+    return sidebar.Sidebar(
+        "zap",
+        "uni-api",
+        sidebar_items,
+        is_collapsed=not is_collapsed,
+        active_item="dashboard"
+    ).render()
+
 @frontend_router.get("/dropdown-menu/{menu_id}/{row_id}", response_class=HTMLResponse, dependencies=[Depends(frontend_rate_limit_dependency)])
 async def get_columns_menu(menu_id: str, row_id: str):
     columns = [