[docs] Improve window customization guide

Maybe this should be used as a feat? idk

Describe the bug

https://github.com/tauri-apps/tauri/blob/45d427e44c0e06194079426c2690019643e03277/core/tauri/scripts/core.js#L136

here is my dom hierarchy:

import React from "react";
import classes from "./index.module.scss";
import clsx from "clsx";
import { Icon } from "@rsuite/icons";
import {
  VscChromeClose,
  VscChromeMinimize,
  VscChromeMaximize,
  VscChromeRestore,
} from "react-icons/vsc";
import { appWindow } from "@tauri-apps/api/window";
import { IoLogoChrome } from "react-icons/io5";

const AppBar: React.FC = () => {
  const [isMaxsize, setIsMaxsize] = React.useState(false);

  React.useEffect(() => {
    appWindow.isMaximized().then(setIsMaxsize);
  }, []);

  return (
    <div className={classes.titlebar}>
      <div data-tauri-drag-region className={classes["drag-region"]}>
        <div>
          <Icon as={IoLogoChrome} />
          <span>{appWindow.label}</span>
        </div>
        <div className={classes["window-controls"]}>
          <div
            className={classes.button}
            onClick={() => {
              appWindow.minimize();
            }}
          >
            <Icon as={VscChromeMinimize} />
          </div>
          <div
            className={classes.button}
            onClick={() => {
              appWindow
                .toggleMaximize()
                .then(() => appWindow.isMaximized())
                .then(setIsMaxsize);
            }}
          >
            <Icon as={isMaxsize ? VscChromeRestore : VscChromeMaximize} />
          </div>
          <div
            className={clsx(classes.button, classes["close-button"])}
            onClick={() => {
              appWindow.close();
            }}
          >
            <Icon as={VscChromeClose} />
          </div>
        </div>
      </div>
    </div>
  );
};

export default AppBar;

It renders like this:

I can’t properly trigger the window’s drag unless I add data-tauri-drag-region to every element.

Perhapes

Customize an event and allow tauri users to bind it themselves

Reproduction

No response

Expected behavior

No response

Platform and versions

> tauri "info"


Operating System - Windows, version 10.0.19044 X64
Webview2 - 99.0.1150.55
Visual Studio Build Tools:
   - Visual Studio Community 2019

Node.js environment
  Node.js - 14.17.6
  @tauri-apps/cli - 1.0.0-rc.5 (outdated, latest: 1.0.0-rc.8)
  @tauri-apps/api - 1.0.0-rc.3

Global packages
  npm - 6.14.11
  pnpm - 6.23.6
  yarn - 1.22.17

Rust environment
  rustup - 1.24.3
  rustc - 1.59.0
  cargo - 1.59.0
  toolchain - stable-x86_64-pc-windows-msvc 

App directory structure
/.git
/.parcel-cache
/client
/dist
/node_modules
/server

App
  tauri - 1.0.0-rc.6
  tauri-build - 1.0.0-rc.5
  tao - 0.7.0
  wry - 0.14.0
  build-type - bundle
  CSP - default-src 'self'
  distDir - ../dist
  devPath - http://localhost:3000/
  framework - React

Stack trace

No response

Additional context

No response

[FabianLars]

The search is currently not nearly as optimized enough and basically only picks up headers right now 😕 And code blocks will probably never be indexed, not sure

Is there something I could do to help improving the docs (or the search)?

We always appreciate PRs adding or rewriting guides, or improving the api docs. We know that all that is far from perfect.

The search itself is a spicy topic and still needs a lot of work 😕

[amrbashir]

Yeah that guide needs to highlight data-tauri-drag-region more and also include a manual implementation of it using window.startDragging and mousedown event.