Official tab

src/Components/ClippedDrawer.js

@@ -95,6 +95,12 @@ const ClippedDrawer = withWebId((props) => {
       icon: availableViews.help.icon,
       className: "active",
       eventHandler: function(e) { setSelectedView(availableViews.help)}
+    },
+    official: {
+      label: availableViews.official.label,
+      icon: availableViews.official.icon,
+      className: "active",
+      eventHandler: function(e) { setSelectedView(availableViews.official)}
     }
   }
 
@@ -166,6 +172,16 @@ const ClippedDrawer = withWebId((props) => {
             ))}
           </List>
           <Divider />
+          <br />
+          <br />
+          <Divider />
+          {[sidebarItems.official].map((item, index) => (
+            <ListItem button={true} className={item.classNane} button key={item.label} onClick={item.eventHandler}>
+              <ListItemIcon>{item.icon}</ListItemIcon>
+              <ListItemText primary={item.label} />
+            </ListItem>
+          ))}
+          <Divider />
         </div>
       </Drawer>
       <main className={classes.content}>

src/Components/MarriageViewComponent.js

@@ -144,4 +144,4 @@ const MarriageViewComponent = (props) => {
 }
 
 export default MarriageViewComponent
- //onClick={() => viewMarriage(contract)} 
+//onClick={() => viewMarriage(contract)} 

src/Components/OfficialComponent.js

@@ -0,0 +1,8 @@
+import React, { useState, useEffect } from 'react'
+
+const OfficialComponent = (props) => {
+  return (<div />)
+
+}
+
+export default OfficialComponent

src/util/Util.js

@@ -9,6 +9,7 @@ import RequestsViewerComponent from '../Components/RequestsViewerComponent'
 import HelpComponent from '../Components/HelpComponent'
 import MarriageRequestComponent from '../Components/MarriageRequestComponent'
 import MarriageViewComponent from '../Components/MarriageViewComponent'
+import OfficialComponent from '../Components/OfficialComponent'
 import { getFile } from './FileUtil'
 
 import PersonIcon from '@material-ui/icons/Person';
@@ -17,6 +18,7 @@ import HelpIcon from '@material-ui/icons/Help';
 import InsertDriveFileIcon from '@material-ui/icons/InsertDriveFile';
 import CardMembershipIcon from '@material-ui/icons/CardMembership';
 import ListIcon from '@material-ui/icons/List';
+import GavelIcon from '@material-ui/icons/Gavel';
 
 import createnamespaces from "../util/NameSpaces"
 const ns = createnamespaces()
@@ -39,6 +41,7 @@ export const availableViews = {
   certificates:   {id:"certificates",     label:'Certificates',     generation:(props) => <CertificatesViewerComponent {...props}></CertificatesViewerComponent>, icon: <CardMembershipIcon />},
   notifications:  {id:"notifications",    label:'Notifications',    generation:(props) => <NotificationsViewerComponent {...props}></NotificationsViewerComponent>, icon: <NotificationsIcon />},
   help:           {id:"help",             label:'Help',             generation:(props) => <HelpComponent {...props}></HelpComponent>, icon: <HelpIcon />},
+  official:       {id:"official",         label:'Offical',          generation:(props) => <OfficialComponent {...props}></OfficialComponent>, icon: <GavelIcon />},
 }
 
 export async function getStore(URI){