@wulperstudio/cms/organisms/NavDrawer/NavDrawer.js

Wulper Studio Library Components CMS

import React from 'react';
import { Stack } from '@mui/material';
import { Icon } from '@iconify/react';
import { IconButtonComponent } from '../../components/IconButtonComponent';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export var NavDrawer = function NavDrawer(props) {
  var $color = props.colorPrimary;
  var $background = props.background;
  return /*#__PURE__*/_jsxs(Stack, {
    component: "nav",
    direction: "row",
    spacing: 2,
    justifyContent: "center",
    sx: {
      padding: ' 0px 16px'
    },
    children: [/*#__PURE__*/_jsx(IconButtonComponent, {
      iconProps: {
        onClick: function onClick() {
          return props.firstRouter && props.firstRouter();
        },
        sx: {
          backgroundColor: $background,
          '&:hover': {
            backgroundColor: $background
          }
        },
        disableRipple: true,
        disableFocusRipple: true
      },
      children: /*#__PURE__*/_jsx(Icon, {
        icon: "mdi:fullscreen",
        color: $color
      })
    }), /*#__PURE__*/_jsx(IconButtonComponent, {
      iconProps: {
        onClick: function onClick() {
          return props.secondRouter && props.secondRouter();
        },
        sx: {
          backgroundColor: $background,
          '&:hover': {
            backgroundColor: $background
          }
        },
        disableRipple: true,
        disableFocusRipple: true
      },
      children: /*#__PURE__*/_jsx(Icon, {
        icon: "mdi:pencil",
        color: $color
      })
    }), /*#__PURE__*/_jsx(IconButtonComponent, {
      iconProps: {
        onClick: function onClick() {
          return props.thirdRouter && props.thirdRouter();
        },
        sx: {
          backgroundColor: $background,
          '&:hover': {
            backgroundColor: $background
          }
        },
        disableRipple: true,
        disableFocusRipple: true
      },
      children: /*#__PURE__*/_jsx(Icon, {
        icon: "mdi:share-variant",
        color: $color
      })
    }), /*#__PURE__*/_jsx(IconButtonComponent, {
      iconProps: {
        onClick: function onClick() {
          return props.fourthRouter && props.fourthRouter();
        },
        sx: {
          backgroundColor: $background,
          '&:hover': {
            backgroundColor: $background
          }
        },
        disableRipple: true,
        disableFocusRipple: true
      },
      children: /*#__PURE__*/_jsx(Icon, {
        icon: "ic:round-preview",
        color: $color
      })
    })]
  });
};