add managed projects, update navbar layout, fix small issues

web/frontend/src/Header.svelte

@@ -40,13 +40,17 @@
   usersTitle.set(3, "Managed Users");
   usersTitle.set(4, "Users");
   usersTitle.set(5, "Users");
+  const projectsTitle = new Map();
+  projectsTitle.set(3, "Managed Projects");
+  projectsTitle.set(4, "Projects");
+  projectsTitle.set(5, "Projects");
 
   const views = [
     {
       title: "My Jobs",
       requiredRole: roles.user,
       href: `/monitoring/user/${username}`,
-      icon: "bar-chart-line-fill",
+      icon: "bar-chart-line",
       perCluster: false,
       listOptions: false,
       menu: "none",
@@ -58,25 +62,7 @@
       icon: "card-list",
       perCluster: false,
       listOptions: false,
-      menu: "none",
+      menu: "Jobs",
-    },
-    {
-      title: usersTitle.get(authlevel),
-      requiredRole: roles.manager,
-      href: "/monitoring/users/",
-      icon: "people-fill",
-      perCluster: true,
-      listOptions: true,
-      menu: "Groups",
-    },
-    {
-      title: "Projects",
-      requiredRole: roles.support,
-      href: "/monitoring/projects/",
-      icon: "folder",
-      perCluster: true,
-      listOptions: true,
-      menu: "Groups",
     },
     {
       title: "Tags",
@@ -85,8 +71,44 @@
       icon: "tags",
       perCluster: false,
       listOptions: false,
+      menu: "Jobs",
+    },
+    {
+      title: usersTitle.get(authlevel),
+      requiredRole: roles.manager,
+      href: "/monitoring/users/",
+      icon: "people",
+      perCluster: true,
+      listOptions: true,
       menu: "Groups",
     },
+    {
+      title: projectsTitle.get(authlevel),
+      requiredRole: roles.manager,
+      href: "/monitoring/projects/",
+      icon: "journals",
+      perCluster: true,
+      listOptions: true,
+      menu: "Groups",
+    },
+    {
+      title: "Nodes",
+      requiredRole: roles.admin,
+      href: "/monitoring/systems/",
+      icon: "hdd-rack",
+      perCluster: true,
+      listOptions: false,
+      menu: "Info",
+    },
+    {
+      title: "Status",
+      requiredRole: roles.admin,
+      href: "/monitoring/status/",
+      icon: "clipboard-data",
+      perCluster: true,
+      listOptions: false,
+      menu: "Info",
+    },
     {
       title: "Analysis",
       requiredRole: roles.support,
@@ -94,25 +116,7 @@
       icon: "graph-up",
       perCluster: true,
       listOptions: false,
-      menu: "Stats",
+      menu: "Info",
-    },
-    {
-      title: "Nodes",
-      requiredRole: roles.admin,
-      href: "/monitoring/systems/",
-      icon: "cpu",
-      perCluster: true,
-      listOptions: false,
-      menu: "Groups",
-    },
-    {
-      title: "Status",
-      requiredRole: roles.admin,
-      href: "/monitoring/status/",
-      icon: "cpu",
-      perCluster: true,
-      listOptions: false,
-      menu: "Stats",
     },
   ];
 </script>
@@ -140,24 +144,27 @@
         <NavbarLinks
           {clusters}
           links={views.filter(
-            (item) => item.requiredRole <= authlevel && item.menu != "Stats",
+            (item) => item.requiredRole <= authlevel && item.menu != "Info",
           )}
         />
-        <Dropdown nav>
+        {#if authlevel >= 4} <!-- Support+ Info Menu-->
-          <DropdownToggle nav caret>
+          <Dropdown nav>
-            <Icon name="graph-up" />
+            <DropdownToggle nav caret>
-            Stats
+              <Icon name="graph-up" />
-          </DropdownToggle>
+              Info
-          <DropdownMenu class="dropdown-menu-lg-end">
+            </DropdownToggle>
-            <NavbarLinks
+            <DropdownMenu class="dropdown-menu-lg-end">
-              {clusters}
+              <NavbarLinks
-              links={views.filter(
+                {clusters}
-                (item) =>
+                direction="right"
-                  item.requiredRole <= authlevel && item.menu == "Stats",
+                links={views.filter(
-              )}
+                  (item) =>
-            />
+                    item.requiredRole <= authlevel && item.menu == "Info",
-          </DropdownMenu>
+                )}
-        </Dropdown>
+              />
+            </DropdownMenu>
+          </Dropdown>
+        {/if}
       {:else}
         <NavbarLinks
           {clusters}
@@ -165,21 +172,54 @@
             (item) => item.requiredRole <= authlevel && item.menu == "none",
           )}
         />
-        {#each Array("Groups", "Stats") as menu}
+        {#if authlevel >= 2} <!-- User+ Job Menu -->
           <Dropdown nav>
             <DropdownToggle nav caret>
-              {menu}
+              Jobs
             </DropdownToggle>
             <DropdownMenu class="dropdown-menu-lg-end">
               <NavbarLinks
                 {clusters}
+                direction="right"
                 links={views.filter(
-                  (item) => item.requiredRole <= authlevel && item.menu == menu,
+                  (item) => item.requiredRole <= authlevel && item.menu == 'Jobs',
                 )}
               />
             </DropdownMenu>
           </Dropdown>
-        {/each}
+        {/if}
+        {#if authlevel >= 3} <!-- Manager+ Group Lists Menu-->
+          <Dropdown nav>
+            <DropdownToggle nav caret>
+              Groups
+            </DropdownToggle>
+            <DropdownMenu class="dropdown-menu-lg-end">
+              <NavbarLinks
+                {clusters}
+                direction="right"
+                links={views.filter(
+                  (item) => item.requiredRole <= authlevel && item.menu == 'Groups',
+                )}
+              />
+            </DropdownMenu>
+          </Dropdown>
+        {/if}
+        {#if authlevel >= 4} <!-- Support+ Info Menu-->
+          <Dropdown nav>
+            <DropdownToggle nav caret>
+              Info
+            </DropdownToggle>
+            <DropdownMenu class="dropdown-menu-lg-end">
+              <NavbarLinks
+                {clusters}
+                direction="right"
+                links={views.filter(
+                  (item) => item.requiredRole <= authlevel && item.menu == 'Info',
+                )}
+              />
+            </DropdownMenu>
+          </Dropdown>
+        {/if}
       {/if}
     </Nav>
     <NavbarTools {username} {authlevel} {roles} {screenSize} />

web/frontend/src/header/NavbarLinks.svelte

@@ -4,6 +4,7 @@
     Properties:
     - `clusters [String]`: List of cluster names
     - `links [Object]`: Pre-filtered link objects based on user auth
+    - `direction String?`: The direcion of the drop-down menue [default: down]
  -->
 
 <script>
@@ -18,11 +19,12 @@
 
   export let clusters;
   export let links;
+  export let direction = "down";
 </script>
 
 {#each links as item}
   {#if item.listOptions}
-    <Dropdown nav inNavbar>
+    <Dropdown nav inNavbar {direction}>
       <DropdownToggle nav caret>
         <Icon name={item.icon} />
         {item.title}
@@ -60,7 +62,7 @@
       ><Icon name={item.icon} /> {item.title}</NavLink
     >
   {:else}
-    <Dropdown nav inNavbar>
+    <Dropdown nav inNavbar {direction}>
       <DropdownToggle nav caret>
         <Icon name={item.icon} />
         {item.title}