feat: Introduce a footer

Introduce a footer with the external links from the sidebar as they mixed in-app and external links. Also added GitHub links to Dashboard and Service.
packit · Nov 12, 2024 · 0500de9 · 0500de9
1 parent 649234b
commit 0500de9
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 24 deletions.
diff --git a/frontend/src/main.css b/frontend/src/main.css
@@ -0,0 +1,9 @@
+.packit-footer {
+  color: var(--pf-t--global--text--color--regular);
+  background-color: var(--pf-t--global--background--color--secondary--default);
+  z-index: 1;
+}
+
+.packit-footer-header {
+  margin-bottom: var(--pf-t--global--spacer--md)
+}
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
@@ -13,6 +13,7 @@ import { ErrorApp } from "./components/errors/ErrorApp";
 import { NotFoundCard } from "./components/errors/NotFoundCard";
 import { Preloader } from "./components/shared/Preloader";
 import { routeTree } from "./routeTree.gen";
+import "./main.css";
 
 const queryClient = new QueryClient();
 

diff --git a/frontend/src/routes/__root.tsx b/frontend/src/routes/__root.tsx
@@ -4,6 +4,10 @@
 import {
   Button,
   Content,
+  Grid,
+  GridItem,
+  List,
+  ListItem,
   Masthead,
   MastheadBrand,
   MastheadContent,
@@ -15,11 +19,14 @@ import {
   NavItem,
   NavList,
   Page,
+  PageBody,
+  PageSection,
   PageSidebar,
   PageSidebarBody,
   PageToggleButton,
   Popover,
   SkipToContent,
+  Title,
   ToggleGroup,
   ToggleGroupItem,
   Toolbar,
@@ -29,13 +36,13 @@ import {
 } from "@patternfly/react-core";
 import {
   BarsIcon,
+  BookOpenIcon,
   CodeBranchIcon,
-  CopyIcon,
+  DesktopIcon,
   ExternalLinkAltIcon,
+  KeyIcon,
   MoonIcon,
-  ShareSquareIcon,
   SunIcon,
-  UndoIcon,
 } from "@patternfly/react-icons";
 import { QueryClient } from "@tanstack/react-query";
 import {
@@ -205,27 +212,6 @@ export const Route = createRootRouteWithContext<RouterContext>()({
           <NavItem isActive={!!matchRoute({ to: "/usage" })}>
             <Link to={"/usage"}>Usage</Link>
           </NavItem>
-          <NavExpandable
-            title="External links"
-            groupId="nav-expandable-group-external"
-            isExpanded
-          >
-            <NavItem key="status" id="status">
-              <a href="https://status.packit.dev">Status</a>
-            </NavItem>
-            <NavItem key="blog-posts" id="blog-posts">
-              <a href="https://packit.dev/posts">Blog posts</a>
-            </NavItem>
-            <NavItem key="faq-page" id="faq-page">
-              <a
-                target="_blank"
-                href="https://packit.dev/docs/faq"
-                rel="noreferrer"
-              >
-                FAQ
-              </a>
-            </NavItem>
-          </NavExpandable>
         </NavList>
       </Nav>
     );
@@ -248,6 +234,69 @@ export const Route = createRootRouteWithContext<RouterContext>()({
         skipToContent={PageSkipToContent}
       >
         <Outlet />
+        <PageSection component="footer" variant="secondary">
+          <Grid hasGutter className="pf-v6-u-py-xl">
+            <GridItem md={4} mdOffset={1} sm={12}>
+              <Title headingLevel="h3" className="packit-footer-header">
+                Packit
+              </Title>
+              <List isPlain>
+                <ListItem>
+                  <a
+                    target="_blank"
+                    rel="noreferrer"
+                    href="https://status.packit.dev"
+                  >
+                    Status
+                  </a>
+                </ListItem>
+                <ListItem>
+                  <a
+                    target="_blank"
+                    rel="noreferrer"
+                    href="https://packit.dev/posts"
+                  >
+                    Blog posts
+                  </a>
+                </ListItem>
+                <ListItem>
+                  <a
+                    target="_blank"
+                    href="https://packit.dev/docs/faq"
+                    rel="noreferrer"
+                  >
+                    FAQ
+                  </a>
+                </ListItem>
+              </List>
+            </GridItem>
+            <GridItem md={3} sm={12}>
+              <Title headingLevel="h3" className="packit-footer-header">
+                GitHub
+              </Title>
+              <List isPlain>
+                <ListItem>
+                  <a
+                    target="_blank"
+                    rel="noreferrer"
+                    href="https://github.com/packit/dashboard"
+                  >
+                    Dashboard
+                  </a>
+                </ListItem>
+                <ListItem>
+                  <a
+                    target="_blank"
+                    rel="noreferrer"
+                    href="https://github.com/packit/dashboard"
+                  >
+                    Service
+                  </a>
+                </ListItem>
+              </List>
+            </GridItem>
+          </Grid>
+        </PageSection>
       </Page>
     );
   },