Any way to change the look of the default toggle button of the sidebar?

[udurraniAtPresage]

I got a hacky solution from shiny assistant but it would be great if there is an option to use an action button in place of default sidebar button. Here's an example on shinylive. And the relevant code is below:

library(shiny)
library(bslib)

ui <- page_sidebar(
  title = "Custom Sidebar Toggle",
  
  # Custom toggle button outside the sidebar
  div(
    id = "toggleWrapper",
    style = "position: fixed; top: 60px; left: 10px; z-index: 1000; transition: left 0.3s ease-in-out;",
    actionButton("sidebarToggle", label = NULL,
                icon = icon("lightbulb"),
                class = "btn rotated-button")
  ),
  
  sidebar = sidebar(
    id = "sdbr",
    title = "Settings",
    open = "desktop",
    width = 300,
    
    # Sample inputs in the sidebar
    sliderInput("n", "Number of points", 
                min = 10, max = 100, value = 50),
    selectInput("color", "Choose color",
                choices = c("red", "blue", "green"),
                selected = "blue")
  ),
  
  # Main panel content
  card(
    card_header("Scatter Plot"),
    plotOutput("plot")
  ),
  
  # Add custom CSS and JavaScript
  tags$head(
    tags$style(HTML("
      /* Sidebar styling */
      .sidebar {
        background-color: rgba(248, 249, 250, 0.1) !important;
        backdrop-filter: blur(5px);
      }
      
      /* Button styling */
      #sidebarToggle {
        padding: 8px 15px;
        border-radius: 20px;
        writing-mode: vertical-rl;
        text-orientation: mixed;
        transform: rotate(180deg);
        height: auto;
        min-height: 120px;
        background: none;
        border: 1px solid rgba(13, 110, 253, 0.3);
        transition: all 0.3s ease;
      }
      
      #sidebarToggle::after {
        content: 'Open me';
        opacity: 0;
        margin-top: 10px;
        transition: opacity 0.3s ease;
      }
      
      #sidebarToggle:hover {
        background-color: #0d6efd;
        border: 1px solid #0a58ca;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        transform: rotate(180deg) scale(1.05);
        color: white;
      }
      
      #sidebarToggle:hover::after {
        opacity: 1;
      }
      
      #sidebarToggle .fa {
        font-size: 1.2em;
      }
    ")),
    tags$script(HTML("
      $(document).ready(function() {
        const sidebarWidth = 280;
        
        if ($('.sidebar').hasClass('show')) {
          $('#toggleWrapper').css('left', sidebarWidth + 10 + 'px');
        }
        
        $('.sidebar').on('shown.bs.collapse', function () {
          $('#toggleWrapper').css('left', sidebarWidth + 10 + 'px');
          $('#sidebarToggle').addClass('btn-primary');
        });
        
        $('.sidebar').on('hidden.bs.collapse', function () {
          $('#toggleWrapper').css('left', '10px');
          $('#sidebarToggle').removeClass('btn-primary');
        });
      });
    "))
  )
)

server <- function(input, output, session) {
  observeEvent(input$sidebarToggle, {
    toggle_sidebar(id = "sdbr")
  })
  
  output$plot <- renderPlot({
    plot(rnorm(input$n), rnorm(input$n),
         col = input$color,
         pch = 16)
  })
}

shinyApp(ui, server)