Update sidebar styles

tapis-project · Jun 27, 2024 · 77cf6c5 · 77cf6c5
1 parent dd0a999
commit 77cf6c5
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 27 deletions.
diff --git a/lib/icicle-tapisui-extension/src/index.ts b/lib/icicle-tapisui-extension/src/index.ts
@@ -23,12 +23,12 @@ const extension = createExtension({
   removeServices: [EnumTapisCoreService.Apps],
   mainSidebarServices: [
     'workflows',
-    'ml-hub',
     'pods',
+    'ml-hub',
     'ml-edge',
-    'smart-scheduler',
-    'jupyter-lab',
     'open-web-ui',
+    'jupyter-lab',
+    'smart-scheduler',
   ],
   authMethods: ['implicit', 'password'],
   logo: {
@@ -48,14 +48,14 @@ const extension = createExtension({
 extension.registerService({
   id: 'ml-edge',
   sidebarDisplayName: 'ML Edge',
-  iconName: 'globe',
+  iconName: 'simulation',
   component: MLEdgePage,
 });
 
 extension.registerService({
   id: 'smart-scheduler',
   sidebarDisplayName: 'Smart Scheduler',
-  iconName: 'globe',
+  iconName: 'bar-graph',
   component: SmartSchedulerPage,
 });
 
@@ -69,7 +69,7 @@ extension.registerService({
 extension.registerService({
   id: 'open-web-ui',
   sidebarDisplayName: 'Open WebUI',
-  iconName: 'globe',
+  iconName: 'multiple-coversation',
   component: OpenWebUIPage,
 });
 

diff --git a/lib/icicle-tapisui-extension/src/pages/index.tsx b/lib/icicle-tapisui-extension/src/pages/index.tsx
@@ -40,7 +40,6 @@ export const OpenWebUIPage: React.FC = () => {
         overflow: 'hidden',
       }}
     >
-      <SectionHeader>Open Web UI</SectionHeader>
       <iframe
         style={{ flexGrow: 1, border: 'none' }}
         src="https://openwebui.pods.tacc.develop.tapis.io/"

diff --git a/src/app/_components/Sidebar/Sidebar.module.scss b/src/app/_components/Sidebar/Sidebar.module.scss
@@ -2,7 +2,8 @@ $width: 240px;
 
 .root {
   overflow-y: auto;
-  background: #f4f4f4;
+  // background: #f4f4f4;
+  // background: url("public/tapislogo.png");
   border-right: 1px solid rgba(112, 112, 112, 0.25);
 }
 

diff --git a/src/app/_components/Sidebar/Sidebar.tsx b/src/app/_components/Sidebar/Sidebar.tsx
@@ -13,29 +13,37 @@ type SidebarItems = {
 const Sidebar: React.FC = () => {
   const { accessToken } = useTapisConfig();
   const { extension } = useExtension();
-  const [ expanded, setExpanded ] = useState(true)
+  const [expanded, setExpanded] = useState(true);
 
-  const renderSidebarItem = (to: string, icon: string | undefined, text: string) => {
+  const renderSidebarItem = (
+    to: string,
+    icon: string | undefined,
+    text: string
+  ) => {
     return (
       <NavItem to={to} icon={icon}>
-        {expanded === true ? text : ""}
+        {expanded === true ? text : ''}
       </NavItem>
-    )
-  }
+    );
+  };
 
   const sidebarItems: SidebarItems = {
-    systems: renderSidebarItem("/systems", "data-files", "Systems"),
-    files: renderSidebarItem("/files", "folder", "Files"),
-    apps: renderSidebarItem("/apps", "applications", "Apps"),
-    jobs: renderSidebarItem("/jobs", "jobs", "Jobs"),
-    workflows: renderSidebarItem("/workflows", "publications", "Workflows"),
-    'ml-hub': renderSidebarItem("/ml-hub", "share", "ML Hub"),
-    pods: renderSidebarItem("/pods", "visualization", "Pods"),
+    systems: renderSidebarItem('/systems', 'data-files', 'Systems'),
+    files: renderSidebarItem('/files', 'folder', 'Files'),
+    apps: renderSidebarItem('/apps', 'applications', 'Apps'),
+    jobs: renderSidebarItem('/jobs', 'jobs', 'Jobs'),
+    workflows: renderSidebarItem('/workflows', 'publications', 'Workflows'),
+    pods: renderSidebarItem('/pods', 'visualization', 'Pods'),
+    'ml-hub': renderSidebarItem('/ml-hub', 'share', 'ML Hub'),
   };
 
   if (extension !== undefined) {
     for (const [id, service] of Object.entries(extension.serviceMap)) {
-      sidebarItems[id] = renderSidebarItem(service.route, service.iconName, service.sidebarDisplayName)
+      sidebarItems[id] = renderSidebarItem(
+        service.route,
+        service.iconName,
+        service.sidebarDisplayName
+      );
     }
   }
 
@@ -58,17 +66,17 @@ const Sidebar: React.FC = () => {
 
   return (
     <div className={styles.root}>
-      <div className={styles["collapse-icon"]}>
+      <div className={styles['collapse-icon']}>
         <Menu
           color="action"
-          onClick={() => { setExpanded(!expanded) }}
+          onClick={() => {
+            setExpanded(!expanded);
+          }}
         />
       </div>
       <Navbar>
-        {renderSidebarItem("/", "dashboard", "Dashboard")}
-        {!accessToken && (
-          renderSidebarItem("/login", "user", "Login")
-        )}
+        {renderSidebarItem('/', 'dashboard', 'Dashboard')}
+        {!accessToken && renderSidebarItem('/login', 'user', 'Login')}
         {accessToken && (
           <>
             {mainSidebarItems.map((item: any) => {