Dashboard chart flow

lib/widgets/catalog.dart

@@ -1,5 +1,5 @@
 import 'package:flutter/material.dart';
-import 'package:oc_front/core/models/cart.dart';
+import 'package:oc_front/core/models/workspace_local.dart';
 import 'package:oc_front/models/search.dart';
 import 'package:oc_front/widgets/items/item_row.dart';
 

lib/widgets/dialog/alert.dart

@@ -0,0 +1,62 @@
+
+import 'package:flutter/material.dart';
+
+class InfoAlertBannerChild extends StatelessWidget {
+  final String text;
+  const InfoAlertBannerChild({super.key, required this.text});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: double.infinity,
+      constraints: BoxConstraints(maxWidth: MediaQuery.of(context).size.width * 0.8),
+      decoration: const BoxDecoration(
+        color: Colors.greenAccent,
+        borderRadius: BorderRadius.all(Radius.circular(5)),
+      ),
+      child: Padding(
+        padding: const EdgeInsets.all(10),
+        child: Material(
+          color: Colors.transparent,
+          child: Text(text,
+            style: const TextStyle(color: Colors.white, fontSize: 18),
+            maxLines: 3,
+            overflow: TextOverflow.ellipsis,
+            textAlign: TextAlign.center,
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class AlertAlertBannerChild extends StatelessWidget {
+  final String text;
+  const AlertAlertBannerChild({super.key, required this.text});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: double.infinity,
+      constraints: BoxConstraints(maxWidth: MediaQuery.of(context).size.width * 0.8),
+      decoration: const BoxDecoration(
+        color: Colors.redAccent,
+        borderRadius: BorderRadius.all(
+          Radius.circular(5),
+        ),
+      ),
+      child: Padding(
+        padding: const EdgeInsets.all(10),
+        child: Material(
+          color: Colors.transparent,
+          child: Text( text,
+            style: const TextStyle(color: Colors.white, fontSize: 18),
+            maxLines: 3,
+            overflow: TextOverflow.ellipsis,
+            textAlign: TextAlign.center,
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/widgets/dialog/confirm_box.dart

@@ -0,0 +1,31 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+
+class ConfirmBoxWidget extends StatefulWidget {
+  String purpose = ""; 
+  Function validate = () {};
+  ConfirmBoxWidget ({ Key? key, required this.purpose, required this.validate }): super(key: key);
+  @override ConfirmBoxWidgetState createState() => ConfirmBoxWidgetState();
+}
+class ConfirmBoxWidgetState extends State<ConfirmBoxWidget> {
+  @override Widget build(BuildContext context) {
+    return AlertDialog(
+        content: Padding(padding: EdgeInsets.all(20), child: Column(mainAxisSize: MainAxisSize.min, children: [
+      Center(child: Padding( padding: EdgeInsets.only(bottom: 10), 
+        child: Icon(Icons.help_outline_outlined, size: 80, color: Colors.grey,))),
+      Center(child: Text("Are you sure ?", style: TextStyle(fontSize: 25, color: Theme.of(context).primaryColor),)),
+      Center(child: Text("Do you really want to ${widget.purpose.toUpperCase()} ?", 
+        style: const TextStyle(fontSize: 12.5, color: Colors.grey),)),
+      const Center(child: Text("You will not able to undo this action.", 
+        style: TextStyle(fontSize: 12.5, color: Colors.grey),)),
+      Padding( padding: EdgeInsets.only(top: 20), child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [
+        Padding( padding: EdgeInsets.only(right: 10), child: TextButton(onPressed: () {
+          widget.validate();
+          context.pop();
+        }, style: ButtonStyle(backgroundColor: MaterialStateProperty.all(Theme.of(context).primaryColor)), 
+        child: Padding( padding: EdgeInsets.symmetric(horizontal: 20), child: Text("YES", style: TextStyle(color: Colors.white, fontSize: 15),)))),
+        TextButton(onPressed: () => context.pop(), style: ButtonStyle(backgroundColor: MaterialStateProperty.all(Theme.of(context).splashColor)), 
+        child: Padding( padding: EdgeInsets.symmetric(horizontal: 20), child: Text("NO", style: TextStyle(color: Colors.white, fontSize: 15),)))]))
+    ],)));
+  }
+}

lib/widgets/dialog/login.dart

@@ -0,0 +1,71 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+import 'package:go_router/go_router.dart';
+
+class LoginWidget extends StatefulWidget {
+  LoginWidget ({ Key? key }): super(key: key);
+  @override LoginWidgetState createState() => LoginWidgetState();
+}
+class LoginWidgetState extends State<LoginWidget> {
+  @override Widget build(BuildContext context) {
+    return AlertDialog(
+        backgroundColor: Colors.white,
+        shape: const RoundedRectangleBorder(
+                    borderRadius: BorderRadius.all(Radius.circular(0))),
+        content: Padding(padding: const EdgeInsets.all(20), child: Column(mainAxisSize: MainAxisSize.min, children: [
+      const Center(child: Padding( padding: EdgeInsets.only(bottom: 10), 
+        child: Icon(Icons.person_search, size: 80, color: Colors.grey,))),
+      const Center(child: Text("WELCOME ON OPENCLOUD", style: TextStyle(fontSize: 25, fontWeight: FontWeight.w600,
+        color: Color.fromRGBO(38, 166, 154, 1)),)),
+      Padding(padding: const EdgeInsets.symmetric(vertical: 20), child: Divider(color: Colors.grey.shade300,),),
+      Container( margin: const EdgeInsets.only(bottom: 10), child: Center(child: Row( mainAxisAlignment: MainAxisAlignment.center,
+        children: [ 
+        Container( 
+          width: MediaQuery.of(context).size.width / 3,
+          alignment : Alignment.center,  
+          child: TextField(
+          decoration: InputDecoration(
+            enabledBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.grey.shade300), borderRadius: BorderRadius.zero),
+            border: OutlineInputBorder(borderSide: BorderSide(color: Colors.grey.shade300), borderRadius: BorderRadius.zero),
+            focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.grey.shade300), borderRadius: BorderRadius.zero),
+            hintText: "username...",
+            contentPadding: const EdgeInsets.symmetric(horizontal: 20),
+            fillColor: Colors.grey.shade300,
+            filled: true,
+            hintStyle: const TextStyle(fontSize: 12.5, color: Colors.grey)),
+          style: const TextStyle(fontSize: 12.5, color: Colors.grey)),),
+        Container(width: 50, height: 50, color: Colors.black, child: const Icon(Icons.person, color: Colors.white))
+      ]))),
+      Container( margin: const EdgeInsets.only(bottom: 20), child: Center(child: Row( mainAxisAlignment: MainAxisAlignment.center,
+        children: [ 
+        Container( 
+          width: MediaQuery.of(context).size.width / 3,
+          alignment : Alignment.center,  
+          child: TextField(
+          obscureText: true,
+          decoration: InputDecoration(
+            focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.grey.shade300), borderRadius: BorderRadius.zero),
+            enabledBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.grey.shade300), borderRadius: BorderRadius.zero),
+            border: OutlineInputBorder(borderSide: BorderSide(color: Colors.grey.shade300), borderRadius: BorderRadius.zero),
+            hintText: "password...",
+            contentPadding: const EdgeInsets.symmetric(horizontal: 20),
+            fillColor: Colors.grey.shade300,
+            filled: true,
+            hintStyle: const TextStyle(fontSize: 12.5, color: Colors.grey)),
+          style: const TextStyle(fontSize: 12.5, color: Colors.grey)),),
+        Container(width: 50, height: 50, color: Colors.black, child: const Icon(Icons.password, color: Colors.white))
+      ]))),
+      Row( mainAxisAlignment: MainAxisAlignment.center, children: [
+        Padding( padding: const EdgeInsets.only(right: 10), child: 
+          InkWell(onTap: () { context.pop(); }, 
+          mouseCursor: SystemMouseCursors.click,
+          child: Container(
+            margin: const EdgeInsets.only(top: 20),
+            width: MediaQuery.of(context).size.width / 3,
+            padding: const EdgeInsets.symmetric(vertical: 20),
+            color: const Color.fromRGBO(38, 166, 154, 1), 
+        child: const Center( child: Text("LOGIN", style: TextStyle(color: Colors.white, fontSize: 15),))))),
+      ])
+    ],)));
+  }
+}

lib/widgets/dialog/new_box.dart

@@ -0,0 +1,158 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_flow_chart/flutter_flow_chart.dart';
+import 'package:oc_front/core/services/specialized_services/abstract_service.dart';
+import 'package:oc_front/models/abstract.dart';
+import 'package:oc_front/models/response.dart';
+
+abstract class New {
+  String name = "";
+}
+
+class NewBoxWidget<T extends SerializerDeserializer<dynamic>> extends StatefulWidget {
+  String? _selected;
+  Dashboard dash;
+  final TextEditingController _ctrl = TextEditingController();
+  AbstractService<T> service; 
+  Function validate = () {};
+  NewBoxWidget ({ super.key, required this.service, required this.dash, this.getItems });
+  @override NewBoxWidgetState<T> createState() => NewBoxWidgetState<T>();
+
+  List<DropdownMenuItem> Function(APIResponse<T>? data)? getItems;
+}
+class NewBoxWidgetState<T extends SerializerDeserializer<dynamic>> extends State<NewBoxWidget> {
+  @override Widget build(BuildContext context) {
+    widget._ctrl.value = TextEditingValue(text: widget.dash.defaultName);
+    return Container(
+      color: Colors.white,
+      padding: const EdgeInsets.all(20),
+      child: Column(
+          children: [
+            Row( 
+                mainAxisAlignment: MainAxisAlignment.center,
+                children : [ 
+                  FutureBuilder<APIResponse<T>>(
+                      future: (widget.service as AbstractService<T>).all(context),
+                      builder: (context, snapshot) {
+                    List<DropdownMenuItem> items = widget.getItems != null ?  widget.getItems!(snapshot.data) : [];
+                    if (widget._selected != null 
+                    && !items.where((element) => element.value == widget._selected).isNotEmpty) { 
+                      items.add(DropdownMenuItem<String>(
+                              value: widget._selected.toString(),
+                              child: Text(widget._selected.toString()),
+                            ));
+                    }
+                    return SizedBox( width: 400, height: 50, child: DropdownButtonFormField(
+                      value: widget._selected,
+                      hint: const Text("select workflow to load...", style: TextStyle(color: Colors.grey, fontSize: 15)),
+                      decoration: InputDecoration( 
+                        filled: true,
+                        focusedBorder: const OutlineInputBorder( borderRadius: BorderRadius.zero,
+                            borderSide: BorderSide(color: Color.fromARGB(38, 166, 154, 1), width: 0),
+                        ),
+                        fillColor: Colors.grey.shade300,
+                        contentPadding: const EdgeInsets.only(left: 30, right: 30, top: 10, bottom: 30),
+                        enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.zero,
+                            borderSide: BorderSide(color: Colors.grey.shade300, width: 0),
+                        ),
+                        border: OutlineInputBorder( borderRadius: BorderRadius.zero,
+                          borderSide: BorderSide(color: Colors.grey.shade300, width: 0)),
+                      ),
+                      items: items, onChanged: (value) {
+                        setState(() {
+                          widget._selected = value.toString();
+                        });
+                      })); 
+                    }),
+                  Tooltip(
+                    message: 'empty selection',
+                    child: InkWell( 
+                      mouseCursor: widget._selected == null || widget._selected!.isEmpty ? MouseCursor.defer : SystemMouseCursors.click,
+                      onTap: () { 
+                        if (widget._selected == null || widget._selected!.isEmpty) { return; }
+                        setState(() {  widget._selected = null; }); 
+                      },
+                      child: Container( 
+                        width: 50, height: 50,
+                        decoration: const BoxDecoration( color: Colors.black,
+                          border: Border(right: BorderSide(color: Colors.white))),
+                            child: Icon(Icons.refresh, color: widget._selected == null || widget._selected!.isEmpty  ? Colors.grey : Colors.white),
+                        )
+                   )
+                  ),
+                  Tooltip(
+                    message: 'load workflow selected',
+                    child: InkWell( 
+                      mouseCursor: widget._selected == null || widget._selected!.isEmpty  
+                        ? MouseCursor.defer : SystemMouseCursors.click,
+                      onTap: () { 
+                        if (widget._selected == null || widget._selected!.isEmpty) { return; }
+                        widget.dash.name = widget._selected ?? widget.dash.name; 
+                        widget.dash.notifyListeners();
+                        Navigator.pop(context);
+                      },
+                      child: Container(
+                        width: 50, height: 50,
+                        color: Colors.black,
+                        child: Icon(Icons.open_in_browser_outlined, 
+                        color: widget._selected == null || widget._selected!.isEmpty ? Colors.grey : Colors.white),
+                      )
+                    )
+                  )
+                ]),
+              Row(
+                mainAxisAlignment: MainAxisAlignment.center,
+                crossAxisAlignment: CrossAxisAlignment.center,
+                children: [
+                  Container(
+                          margin: const EdgeInsets.only(top: 10),
+                          width: 450,
+                          height: 50,
+                          child: TextFormField(
+                            cursorColor: const Color.fromARGB(38, 166, 154, 1),
+                            controller: widget._ctrl,
+                            onChanged: (value) => setState(() { widget._ctrl.value = TextEditingValue(text: value); }), 
+                            validator: (value) => value == null || value.isEmpty ? "name is required" : null,
+                            decoration: InputDecoration(
+                              hintText: "name a new workflow...",
+                              fillColor: Colors.grey.shade300,
+                              filled: true,
+                              contentPadding: const EdgeInsets.symmetric(horizontal: 30, vertical: 20),
+                              hintStyle: const TextStyle(
+                                color: Colors.black,
+                                fontSize: 14,
+                                fontWeight: FontWeight.w300
+                              ),
+                              border: InputBorder.none
+                            )
+                          )
+                        ),
+                        Tooltip(
+                          message: 'add',
+                          child:InkWell( 
+                            mouseCursor: widget._ctrl.value.text.isEmpty ? MouseCursor.defer : SystemMouseCursors.click,
+                            onTap: () async {
+                              if (widget._ctrl.value.text.isNotEmpty) {
+                                await widget.service.post(context, {}, { "workflowName" : widget._ctrl.value.text });
+                                widget._selected = widget._ctrl.value.text;
+                                widget._ctrl.value = const TextEditingValue(text: "");
+                                widget.dash.name = widget._selected ?? widget.dash.name;
+                                widget.dash.notifyListeners();
+                                // ignore: use_build_context_synchronously
+                                Navigator.pop(context);
+                              }
+                            },
+                            child: Container(
+                              margin: const EdgeInsets.only(top: 10),
+                              width: 50,
+                              height: 50,
+                              color: Colors.black,
+                              child: Icon(Icons.add, color: widget._ctrl.value.text.isEmpty ? Colors.grey : Colors.white)
+                            )
+                          )
+                        )
+                ])
+          ]
+        )
+    );
+  }
+}

lib/widgets/items/item.dart

@@ -1,7 +1,7 @@
 
 import 'package:flutter/material.dart';
 import 'package:oc_front/models/search.dart';
-import 'package:oc_front/widgets/items_details/data_item.dart';
+import 'package:oc_front/widgets/items/items_details/data_item.dart';
 
 class ItemWidget extends StatefulWidget {
   AbstractItem item;

lib/widgets/items/item_row.dart

@@ -1,7 +1,7 @@
 import 'dart:convert';
 import 'package:flutter/material.dart';
 import 'package:oc_front/models/search.dart';
-import 'package:oc_front/core/models/cart.dart';
+import 'package:oc_front/core/models/workspace_local.dart';
 import 'package:oc_front/core/services/router.dart';
 
 const List<GlobalKey<State>> _empty = [];
@@ -10,8 +10,9 @@ class ItemRowWidget extends StatefulWidget {
   bool readOnly = false;
   double contextWidth = 0;
   AbstractItem item;
+  bool low = false;
   List<GlobalKey<State>> keys = [];
-  ItemRowWidget ({ super.key,
+  ItemRowWidget ({ super.key, this.low = false,
     required this.contextWidth, this.readOnly = false, required this.item, this.keys = _empty });
   @override ItemRowWidgetState createState() => ItemRowWidgetState();
 }
@@ -31,17 +32,17 @@ class ItemRowWidgetState extends State<ItemRowWidget> {
       height: 100,
       decoration: BoxDecoration( border: Border(bottom: BorderSide(color: Colors.grey.shade300)) ),
       child: Row( children: [
-          Padding( padding: const EdgeInsets.all(10), 
+          widget.low ? Container( padding: EdgeInsets.only(left: 10),) : Padding( padding: const EdgeInsets.all(10), 
             child: image ?? Image.network('https://get-picto.com/wp-content/uploads/2024/01/logo-instagram-png.webp', 
               height: imageSize, width: imageSize)),
           Container(
-            width: widget.contextWidth - (imageSize + 20) - endWidth,
+            width: widget.low ? widget.contextWidth - 20 :  widget.contextWidth - (imageSize + 20) - endWidth,
             child: Padding(padding: widget.contextWidth != MediaQuery.of(context).size.width ? 
             const EdgeInsets.symmetric(horizontal: 10) : const EdgeInsets.symmetric(horizontal: 20),
               child: Column(crossAxisAlignment: CrossAxisAlignment.start, 
                 mainAxisAlignment: MainAxisAlignment.center, children: [
                 Row( children: [ 
-                  Container(padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
+                  widget.low ? Container() : Container(padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
                     margin: const EdgeInsets.only(right: 20),
                     decoration: BoxDecoration(
                       color: isData(widget.item.topic) ? Colors.blue : 
@@ -54,7 +55,7 @@ class ItemRowWidgetState extends State<ItemRowWidget> {
                       style: const TextStyle(fontSize: 10, color: Colors.white, fontWeight: FontWeight.w600)),
                   ),
                   Expanded( child: Text(widget.item.name?.toUpperCase() ?? "", 
-                    style: const TextStyle(fontSize: 20, overflow: TextOverflow.ellipsis, fontWeight: FontWeight.w600, color: Color(0xFFF67C0B9))),
+                    style: TextStyle(fontSize: widget.low ? 14 : 20, overflow: TextOverflow.ellipsis, fontWeight: FontWeight.w600, color: Color(0xFFF67C0B9))),
                   )
                 ]),
                 Text( "From ${widget.item.owner ?? "unknown owner"}", 
@@ -63,7 +64,7 @@ class ItemRowWidgetState extends State<ItemRowWidget> {
               ],)
             )
           ),
-          Container(
+          widget.low ? Container() : Container(
             width: endWidth,
             child: Row( 
               mainAxisAlignment: MainAxisAlignment.center,
@@ -108,8 +109,8 @@ class ItemRowWidgetState extends State<ItemRowWidget> {
           ])
         )]),
     );
-    return widget.readOnly ? w : InkWell( mouseCursor:  SystemMouseCursors.click,
-      onTap: () { AppRouter.zones.last.go(context, { "id" : widget.item.id ?? "" }); },
+    return widget.readOnly || widget.low ? w : InkWell( mouseCursor:  SystemMouseCursors.click,
+      onTap: () { AppRouter.catalogItem.go(context, { "id" : widget.item.id ?? "" }); },
       child: w );
   } 
 }

lib/widgets/menu_clipper/arrow_clipper.dart

@@ -0,0 +1,17 @@
+import 'package:flutter/material.dart';
+
+class ArrowClipper extends CustomClipper<Path> {
+  @override
+  Path getClip(Size size) {
+    Path path = Path();
+    path.moveTo(0, size.height);
+    path.lineTo(size.width / 2, size.height / 2);
+    path.lineTo(size.width, size.height);
+    return path;
+  }
+
+  @override
+  bool shouldReclip(CustomClipper<Path> oldClipper) {
+    return true;
+  }
+}

lib/widgets/menu_clipper/clipper_menu.dart

@@ -0,0 +1,219 @@
+import 'package:flutter/material.dart';
+import 'package:oc_front/core/sections/header/menu.dart';
+import 'package:oc_front/core/services/router.dart';
+import 'package:oc_front/widgets/menu_clipper/arrow_clipper.dart';
+
+class TooltipWidget extends StatefulWidget {
+  int index = -1;
+  Size? buttonSize;
+  List<String> labels;
+  Offset? buttonPosition;
+  TooltipWidget ({ Key? key, 
+                  required this.labels,
+                  required this.index, 
+                  required this.buttonSize,
+                  required this.buttonPosition }): super(key: key);
+  @override TooltipWidgetState createState() => TooltipWidgetState();
+}
+class TooltipWidgetState extends State<TooltipWidget> {
+  @override Widget build(BuildContext context) {
+    double minimal = (widget.index < 0 ? 0 : 7 * widget.labels[widget.index].length).toDouble() + 30;
+    return Positioned(
+            top : ((widget.buttonPosition?.dy ?? 1 ) + 11) + (((widget.buttonSize?.height) ?? 1)* 1.5) * (widget.index + 1),
+            left: (widget.buttonPosition?.dx ?? 1) - minimal,
+            child: Container(
+              width: widget.index < 0 ? 0 : (widget.index < 0 ? 0 : minimal), 
+              height: (widget.buttonSize?.height ?? 1) - 2, 
+              color: Colors.black,
+              child: Text( widget.index < 0 ? "" : widget.labels[widget.index], 
+                style: const TextStyle(
+                  color: Colors.white, 
+                  decoration: TextDecoration.none,
+                  fontSize: 14, 
+                  fontWeight: FontWeight.w300), 
+                textAlign: TextAlign.center, 
+                overflow: TextOverflow.ellipsis
+              ),
+            ));
+  }
+}
+
+GlobalKey<ClipperMenuWidgetState> headerMenuKey = GlobalKey<ClipperMenuWidgetState>();
+class ClipperMenuWidget extends StatefulWidget {
+  final BorderRadius borderRadius;
+  final Color backgroundColor;
+  final Color iconColor;
+  int index = -1;
+
+  ClipperMenuWidget({
+    required this.borderRadius,
+    this.backgroundColor = const Color.fromRGBO(38, 166, 154, 1),
+    this.iconColor = Colors.black,
+  }) : super(key: headerMenuKey);
+  @override
+  // ignore: library_private_types_in_public_api
+  ClipperMenuWidgetState createState() => ClipperMenuWidgetState();
+}
+
+class ClipperMenuWidgetState extends State<ClipperMenuWidget> with SingleTickerProviderStateMixin {
+  late GlobalKey _key;
+  bool isMenuOpen = false;
+  Offset? buttonPosition;
+  Size? buttonSize;
+  final GlobalKey<TooltipWidgetState> _tooltipKey = GlobalKey<TooltipWidgetState>();
+  OverlayEntry? _overlayEntry;
+  BorderRadius? _borderRadius;
+  AnimationController? _animationController;
+
+  @override
+  void initState() {
+    _animationController = AnimationController(
+      vsync: this,
+      duration: const Duration(milliseconds: 250),
+    );
+    _borderRadius = widget.borderRadius; // BorderRadius.circular(4)
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    _animationController?.dispose();
+    super.dispose();
+  }
+
+  findButton() {
+    if (_key.currentContext != null) {
+      RenderBox renderBox = _key.currentContext?.findRenderObject()! as RenderBox;
+      buttonSize = renderBox.size;
+      buttonPosition = renderBox.localToGlobal(Offset.zero);
+    }
+  }
+
+  void closeMenu() {
+    try {
+      _overlayEntry?.remove();
+      _animationController?.reverse();
+      isMenuOpen = false;
+    } catch (e) { }
+    
+  }
+
+  void openMenu() {
+    findButton();
+    _animationController?.forward();
+    _overlayEntry = _overlayEntryBuilder();
+    if (_overlayEntry != null) { Overlay.of(context).insert(_overlayEntry!); }
+    isMenuOpen = true;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    _key = GlobalKey();
+    headerMenuKey = GlobalKey<ClipperMenuWidgetState>();
+    return Container(
+      key: _key,
+      padding: const EdgeInsets.all(0),
+      child: IconButton(
+        splashRadius: 4,
+        icon: _animationController == null ? 
+        const Icon(
+          Icons.close,
+        ) : AnimatedIcon(
+          icon: AnimatedIcons.menu_close,
+          progress: _animationController!,
+        ),
+        onPressed: () {
+          if (isMenuOpen) { closeMenu();
+          } else { openMenu(); }
+        },
+      ),
+    );
+  }
+
+  OverlayEntry _overlayEntryBuilder() {
+    var routes = AppRouter.zones.where(
+      (e) => e.path != AppRouter.currentRoute.path && e.label != null && e.icon != null).toList();
+    return OverlayEntry(
+      builder: (context) {
+        return Stack( children: [ 
+          TooltipWidget(
+            key: _tooltipKey,
+            labels: routes.map((e) => e.label!).toList(),
+            buttonPosition: buttonPosition, 
+            buttonSize: buttonSize, 
+            index: widget.index  
+          ),
+          Positioned(
+            top: (buttonPosition?.dy ?? 1 ) + (buttonSize?.height ?? 1),
+            left: buttonPosition?.dx,
+            width: buttonSize?.width,
+            child: Material(
+              color: Colors.transparent,
+              child: Stack(
+                children: <Widget>[
+                  Align(
+                    alignment: Alignment.topCenter,
+                    child: ClipPath(
+                      clipper: ArrowClipper(),
+                      child: Container(
+                        width: 17,
+                        height: 17,
+                        color: widget.backgroundColor ?? Color(0xFFF),
+                      ),
+                    ),
+                  ),
+                  Padding(
+                    padding: const EdgeInsets.only(top: 15.0),
+                    child: Container(
+                      height: routes.length * ((buttonSize?.height ?? 1) * 1.5),
+                      decoration: BoxDecoration(
+                        boxShadow: const [BoxShadow(color: Colors.black54, spreadRadius: 1, blurRadius: 1, offset: Offset(0, 1))],
+                        color: widget.backgroundColor,
+                        borderRadius: _borderRadius,
+                      ),
+                      child: Theme(
+                        data: ThemeData(
+                          iconTheme: IconThemeData( color: widget.iconColor ),
+                        ),
+                        child: Column(
+                          mainAxisSize: MainAxisSize.min,
+                          children: List.generate(routes.length, (index) {
+                            return GestureDetector(
+                              onTap: () {
+                                if (index >= 0) { routes[index].go(context, {}); } 
+                                closeMenu();
+                              },
+                              child: Container(
+                                decoration: index == (routes.length - 1) ? null : const BoxDecoration(
+                                    border: Border( bottom: BorderSide(color: Colors.white ), ),
+                                  ),
+                                  width: (buttonSize?.width ?? 1) * 1.5,
+                                  height: (buttonSize?.height ?? 1)  * 1.5,
+                                  child: MouseRegion( 
+                                    cursor: SystemMouseCursors.click,
+                                    onEnter: (state) { 
+                                        _tooltipKey.currentState?.setState(() { 
+                                        _tooltipKey.currentState?.widget.index = index;
+                                      });
+                                    },
+                                    onExit: (state) { 
+                                      _tooltipKey.currentState?.setState(() { _tooltipKey.currentState?.widget.index = -1; });
+                                    },
+                                    child: Icon( routes[index].icon, size: 19)
+                                  ),
+                                ),
+                            );
+                          }),
+                        ),
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          )
+        ]);
+      },
+    );
+  }
+}