<commit_before>import React, { useState, useEffect, useRef } from 'react';
import {
  getAuthorizedMenuItems,
  menuItemProps,
  registerComponent,
  withCurrentUser,
  Components,
} from 'meteor/vulcan:core';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';
import styled from 'styled-components';

const MenuItem = (
  { name, label, path, onClick, labelToken, LeftComponent, RightComponent },
  { intl }
) => {
  let Wrapper = React.Fragment;
  if (path) {
    const LinkToPath = ({ children }) => <Link to={path}>{children}</Link>;
    Wrapper = LinkToPath;
  }
  return (
    <Wrapper key={name}>
      <li
        //selected={path && router.isActive(path)}
        onClick={onClick}>
        {LeftComponent && <LeftComponent />}
        <span>{label || intl.formatMessage({ id: labelToken })}</span>
        {RightComponent && <RightComponent />}
      </li>
    </Wrapper>
  );
};

MenuItem.propTypes = {
  ...menuItemProps,
  // parent can pass another onClick callback
  // eg to close the menu
  afterClick: PropTypes.func,
};

const SideWrapper = styled.div`
	padding-left: 16px;
	padding-right: 16px;
`

const MainWrapper = styled.div`
	margin: 16px;
`

const Layout = ({ children, currentUser }) => {
  const [open, setOpen] = useState(true)
	const [height, setHeight] = useState(0)

  const backofficeMenuItems =
		getAuthorizedMenuItems(currentUser, 'vulcan-backoffice');

	const ref = useRef(null)
	useEffect(() => {
		setHeight(ref.current.clientHeight)
	}, [ref])

  const side = (
		<SideWrapper>
      <ul>{backofficeMenuItems.map(MenuItem)}</ul>
      <ul>{backofficeMenuItems.map(MenuItem)}</ul>
      <ul>{backofficeMenuItems.map(MenuItem)}</ul>
      <ul>{backofficeMenuItems.map(MenuItem)}</ul>
      <ul>{backofficeMenuItems.map(MenuItem)}</ul>
      <ul>{backofficeMenuItems.map(MenuItem)}</ul>
      <ul>{backofficeMenuItems.map(MenuItem)}</ul>
      <ul>{backofficeMenuItems.map(MenuItem)}</ul>
      <ul>{backofficeMenuItems.map(MenuItem)}</ul>
      <ul>{backofficeMenuItems.map(MenuItem)}</ul>
      <ul>{backofficeMenuItems.map(MenuItem)}</ul>
      <ul>{backofficeMenuItems.map(MenuItem)}</ul>
      <ul>{backofficeMenuItems.map(MenuItem)}</ul>
      <ul>{backofficeMenuItems.map(MenuItem)}</ul>
      <ul>{backofficeMenuItems.map(MenuItem)}</ul>
      <ul>{backofficeMenuItems.map(MenuItem)}</ul>
      <ul>{backofficeMenuItems.map(MenuItem)}</ul>
      <ul>{backofficeMenuItems.map(MenuItem)}</ul>
      <ul>{backofficeMenuItems.map(MenuItem)}</ul>
      <ul>{backofficeMenuItems.map(MenuItem)}</ul>
      <ul>{backofficeMenuItems.map(MenuItem)}</ul>
      <ul>{backofficeMenuItems.map(MenuItem)}</ul>
      <ul>{backofficeMenuItems.map(MenuItem)}</ul>
      <ul>{backofficeMenuItems.map(MenuItem)}</ul>
      <ul>{backofficeMenuItems.map(MenuItem)}</ul>
      <ul>{backofficeMenuItems.map(MenuItem)}</ul>
      <ul>{backofficeMenuItems.map(MenuItem)}</ul>
      <ul>{backofficeMenuItems.map(MenuItem)}</ul>
      <ul>{backofficeMenuItems.map(MenuItem)}</ul>
      <ul>{backofficeMenuItems.map(MenuItem)}</ul>
      <ul>{backofficeMenuItems.map(MenuItem)}</ul>
    </SideWrapper><commit_msg>Use verticalnavigation component<commit_after>import React, { useState, useEffect, useRef } from 'react';
import {
  getAuthorizedMenuItems,
  menuItemProps,
  registerComponent,
  withCurrentUser,
  Components,
} from 'meteor/vulcan:core';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';
import styled from 'styled-components';

const MenuItem = (
  { name, label, path, onClick, labelToken, LeftComponent, RightComponent },
  { intl }
) => {
  let Wrapper = React.Fragment;
  if (path) {
    const LinkToPath = ({ children }) => <Link to={path}>{children}</Link>;
    Wrapper = LinkToPath;
  }
  return (
    <Wrapper key={name}>
      <li
        //selected={path && router.isActive(path)}
        onClick={onClick}>
        {LeftComponent && <LeftComponent />}
        <span>{label || intl.formatMessage({ id: labelToken })}</span>
        {RightComponent && <RightComponent />}
      </li>
    </Wrapper>
  );
};

MenuItem.propTypes = {
  ...menuItemProps,
  // parent can pass another onClick callback
  // eg to close the menu
  afterClick: PropTypes.func,
};

const SideWrapper = styled.div`
	padding-left: 16px;
	padding-right: 16px;
`

const MainWrapper = styled.div`
	margin: 16px;
`

const Layout = ({ children, currentUser }) => {
  const [open, setOpen] = useState(true)
	const [height, setHeight] = useState(0)

  const backofficeMenuItems =
		getAuthorizedMenuItems(currentUser, 'vulcan-backoffice');

	const ref = useRef(null)
	useEffect(() => {
		setHeight(ref.current.clientHeight)
	}, [ref])

  const side = (
		<SideWrapper>
      <Components.VerticalNavigation links={backofficeMenuItems} />
    </SideWrapper>
{'fraction_non_alphanumeric': 0.16050664451827243, 'fraction_numerical': 0.0029069767441860465, 'mean_word_length': 3.9711042311661506, 'pattern_counts': {'":': 0, '<': 90, '<?xml version=': 0, '>': 98, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6742615', 'n_tokens_mistral': 1605, 'n_tokens_neox': 1550, 'n_words': 274}