Feature/floating draggable position

config/debugbar.php

@@ -339,6 +339,34 @@
      */
     'theme' => env('DEBUGBAR_THEME', 'auto'),
 
+    /*
+     |--------------------------------------------------------------------------
+     | Debugbar Position
+     |--------------------------------------------------------------------------
+     |
+     | Controls where the debugbar appears on the page.
+     | Possible values: bottom, top, floating
+     |
+     | When set to 'floating', the debugbar can be dragged anywhere on the screen.
+     */
+    'position' => 'bottom',
+
+    /*
+     |--------------------------------------------------------------------------
+     | Floating Position Options
+     |--------------------------------------------------------------------------
+     |
+     | When position is set to 'floating', these options control the behavior.
+     |
+     | 'initial_x' and 'initial_y' set the starting position (null = auto position at bottom-right)
+     | 'remember_position' persists the position in localStorage across page reloads
+     */
+    'floating' => [
+        'initial_x' => env('DEBUGBAR_FLOATING_X'),
+        'initial_y' => env('DEBUGBAR_FLOATING_Y'),
+        'remember_position' => env('DEBUGBAR_FLOATING_REMEMBER', true),
+    ],
+
     /*
      |--------------------------------------------------------------------------
      | Backtrace stack limit

readme.md

@@ -199,6 +199,41 @@ Make sure you only do this on local development, because otherwise other people
 In general, Debugbar should only be used locally or at least restricted by IP.
 It's possible to pass a callback, which will receive the Request object, so you can determine access to the OpenHandler storage.
 
+## Floating/Draggable Position
+
+By default, the Debugbar is fixed to the bottom of the screen. You can enable a floating/draggable mode that allows you to drag the Debugbar anywhere on the screen.
+
+To enable floating mode, set the `position` option in your `config/debugbar.php`:
+
+```php
+'position' => 'floating',
+```
+
+### Floating Options
+
+When using floating mode, you can configure additional options:
+
+```php
+'floating' => [
+    'initial_x' => null,           // Initial X position (null = auto, bottom-right)
+    'initial_y' => null,           // Initial Y position (null = auto, bottom-right)
+    'remember_position' => true,   // Persist position in localStorage across page reloads
+],
+```
+
+### Features
+
+- **Drag anywhere**: Click and drag the Debugbar header to move it anywhere on screen
+- **Touch support**: Works on mobile devices with touch events
+- **Position persistence**: When `remember_position` is enabled, your position is saved in localStorage
+- **Viewport constraints**: The Debugbar stays within the visible viewport
+- **Works with minimize/maximize**: Fully compatible with the Debugbar's minimize/maximize functionality
+
+### Available Positions
+
+- `bottom` (default): Fixed to the bottom of the screen
+- `floating`: Draggable anywhere on the screen (can snap to edges)
+
 ## Twig Integration
 
 Laravel Debugbar comes with two Twig Extensions. These are tested with [rcrowe/TwigBridge](https://github.com/rcrowe/TwigBridge) 0.6.x

src/JavascriptRenderer.php

@@ -4,7 +4,6 @@
 
 use DebugBar\DebugBar;
 use DebugBar\JavascriptRenderer as BaseJavascriptRenderer;
-use Illuminate\Routing\UrlGenerator;
 
 /**
  * {@inheritdoc}
@@ -15,17 +14,54 @@ class JavascriptRenderer extends BaseJavascriptRenderer
     protected $ajaxHandlerBindToJquery = false;
     protected $ajaxHandlerBindToXHR = true;
 
+    /**
+     * Position configuration for floating debugbar
+     *
+     * @var array
+     */
+    protected $positionConfig = [];
+
     public function __construct(DebugBar $debugBar, $baseUrl = null, $basePath = null)
     {
         parent::__construct($debugBar, $baseUrl, $basePath);
 
         $this->cssFiles['laravel'] = __DIR__ . '/Resources/laravel-debugbar.css';
         $this->jsFiles['laravel-cache'] = __DIR__ . '/Resources/cache/widget.js';
         $this->jsFiles['laravel-queries'] = __DIR__ . '/Resources/queries/widget.js';
+        $this->jsFiles['laravel-draggable'] = __DIR__ . '/Resources/draggable.js';
 
         $this->setTheme(config('debugbar.theme', 'auto'));
     }
 
+    /**
+     * Set the position configuration for the debugbar
+     *
+     * @param string $position Position setting: 'bottom', 'top', or 'floating'
+     * @param array $floatingOptions Options for floating mode
+     * @return void
+     */
+    public function setPositionOptions(string $position = 'bottom', array $floatingOptions = []): void
+    {
+        $this->positionConfig = [
+            'position' => $position,
+            'floating' => array_merge([
+                'initial_x' => null,
+                'initial_y' => null,
+                'remember_position' => true,
+            ], $floatingOptions),
+        ];
+    }
+
+    /**
+     * Get the position configuration
+     *
+     * @return array
+     */
+    public function getPositionConfig(): array
+    {
+        return $this->positionConfig;
+    }
+
     /**
      * Set the URL Generator
      *
@@ -52,6 +88,8 @@ public function renderHead()
         $nonce = $this->getNonceAttribute();
 
         $html  = "<link rel='stylesheet' type='text/css' property='stylesheet' href='{$cssRoute}' data-turbolinks-eval='false' data-turbo-eval='false'>";
+        $html .= $this->getPreloadInlineHtml($nonce);
+
         $html .= "<script{$nonce} src='{$jsRoute}' data-turbolinks-eval='false' data-turbo-eval='false'></script>";
 
         if ($this->isJqueryNoConflictEnabled()) {
@@ -68,6 +106,20 @@ public function renderHead()
         return $html;
     }
 
+    protected function getPreloadInlineHtml(string $nonce): string
+    {
+        $html = '';
+
+        if (!empty($this->positionConfig)) {
+            $configJson = json_encode($this->positionConfig, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP);
+            $html .= "<script{$nonce}>window.phpdebugbar_position_config = {$configJson};</script>";
+        }
+
+        $html .= "<script{$nonce}>(function(){try{var s=JSON.parse(localStorage.getItem('phpdebugbar-settings')||'{}');var c=window.phpdebugbar_position_config||{};if((s.positionMode||c.position)==='floating'){var st=document.createElement('style');st.id='phpdebugbar-fouc-fix';st.textContent='div.phpdebugbar:not(.phpdebugbar-ready){opacity:0!important}';(document.head||document.documentElement).appendChild(st);}}catch(e){}})();</script>";
+
+        return $html;
+    }
+
     protected function getInlineHtml()
     {
         $html = '';

src/LaravelDebugbar.php

@@ -636,6 +636,11 @@ public function __toString(): string
         $renderer->setBindAjaxHandlerToXHR($config->get('debugbar.capture_ajax', true));
         $renderer->setDeferDatasets($config->get('debugbar.defer_datasets', false));
 
+        // Set position configuration for draggable/floating support
+        $position = $config->get('debugbar.position', 'bottom');
+        $floatingOptions = $config->get('debugbar.floating', []);
+        $renderer->setPositionOptions($position, $floatingOptions);
+
         $this->booted = true;
     }