[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

Read the window customization guide alongside core/tauri/scripts/core.js#L136 and the supplied React example. Determine which drag-region behavior the guide should explain, then update the guide so the expected markup and result are unambiguous; verify the documented example matches the reported window behavior.