ui-react/src/components/menu/MenuBar.js

   1 /*-
   2  * ============LICENSE_START=======================================================
   3  * ONAP CLAMP
   4  * ================================================================================
   5  * Copyright (C) 2019 AT&T Intellectual Property. All rights
   6  *                             reserved.
   7  * ================================================================================
   8  * Licensed under the Apache License, Version 2.0 (the "License");
   9  * you may not use this file except in compliance with the License.
  10  * You may obtain a copy of the License at
  11  *
  12  * http://www.apache.org/licenses/LICENSE-2.0
  13  *
  14  * Unless required by applicable law or agreed to in writing, software
  15  * distributed under the License is distributed on an "AS IS" BASIS,
  16  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  17  * See the License for the specific language governing permissions and
  18  * limitations under the License.
  19  * ============LICENSE_END============================================
  20  * ===================================================================
  21  *
  22  */
  23 import React from 'react';
  24 import Navbar from 'react-bootstrap/Navbar';
  25 import NavDropdown from 'react-bootstrap/NavDropdown';
  26 import 'bootstrap-css-only/css/bootstrap.min.css';
  27 import styled from 'styled-components';
  28 import { Link } from 'react-router-dom'
  29
  30 const StyledNavDropdownItem = styled(NavDropdown.Item)`
  31         color: ${props => props.theme.menuFontColor};
  32         background-color: ${props => props.theme.menuBackgroundColor};
  33         :hover {
  34                         background-color: ${props => props.theme.menuHighlightedBackgroundColor};
  35                         color:  ${props => props.theme.menuHighlightedFontColor};
  36         }
  37 `;
  38
  39 const StyledLink = styled(Link)`
  40         color: ${props => props.theme.menuColor};
  41         background-color: ${props => props.theme.menuBackgroundColor};
  42         font-weight: normal;
  43         display: block;
  44         width: 100%;
  45         padding: .25rem 1.5rem;
  46         clear: both;
  47         text-align: inherit;
  48         white-space: nowrap;
  49         border: 0;
  50         :hover {
  51                         text-decoration: none;
  52                         background-color: ${props => props.theme.loopViewerHeaderBackgroundColor};
  53                         color:  ${props => props.theme.loopViewerHeaderFontColor};
  54         }
  55 `;
  56
  57 export default class MenuBar extends React.Component {
  58         render () {
  59                 return (
  60                                 <Navbar.Collapse id="basic-navbar-nav" className="justify-content-center">
  61                                         <NavDropdown title="Closed Loop" id="basic-nav-dropdown">
  62                                                 <StyledNavDropdownItem as={StyledLink} to="/openLoop">Open CL</StyledNavDropdownItem>
  63                                                 <StyledNavDropdownItem as={StyledLink} to="/loopProperties">Properties CL</StyledNavDropdownItem>
  64                                                 <StyledNavDropdownItem as={StyledLink} to="/closeLoop">Close Model</StyledNavDropdownItem>
  65                                         </NavDropdown>
  66                                         <NavDropdown title="Manage" id="basic-nav-dropdown">
  67                                                 <StyledNavDropdownItem as={StyledLink} to="/operationalPolicyModal">Submit</StyledNavDropdownItem>
  68                                                 <StyledNavDropdownItem as={StyledLink} to="#action/3.2">Stop</StyledNavDropdownItem>
  69                                                 <StyledNavDropdownItem as={StyledLink} to="#action/3.3">Restart</StyledNavDropdownItem>
  70                                                 <StyledNavDropdownItem as={StyledLink} to="#action/3.3">Delete</StyledNavDropdownItem>
  71                                                 <StyledNavDropdownItem as={StyledLink} to="#action/3.3">Deploy</StyledNavDropdownItem>
  72                                                 <StyledNavDropdownItem as={StyledLink} to="#action/3.3">UnDeploy</StyledNavDropdownItem>
  73                                         </NavDropdown>
  74                                         <NavDropdown title="View" id="basic-nav-dropdown">
  75                                                 <StyledNavDropdownItem as={StyledLink} to="#action/3.1">Refresh Status</StyledNavDropdownItem>
  76                                         </NavDropdown>
  77                                         <NavDropdown title="Help" id="basic-nav-dropdown">
  78                                                 <StyledNavDropdownItem href="https://wiki.onap.org/" target="_blank">Wiki</StyledNavDropdownItem>
  79                                                 <StyledNavDropdownItem href="mailto:onap-discuss@lists.onap.org?subject=CLAMP&body=Please send us suggestions or feature enhancements or defect. If possible, please send us the steps to replicate any defect.">Contact Us</StyledNavDropdownItem>
  80                                                 <StyledNavDropdownItem as={StyledLink} to="/userInfo">User Info</StyledNavDropdownItem>
  81                                         </NavDropdown>
  82                                 </Navbar.Collapse>
  83                 );
  84         }
  85 }