use application layout with side navigation, apply consistent loading…

…, add favicon
canonical · Oct 20, 2023 · 382b4ab · 382b4ab
1 parent 6dd5d9f
commit 382b4ab
Show file tree

Hide file tree

Showing 9 changed files with 411 additions and 108 deletions.
diff --git a/app/_pattern_navigation.scss b/app/_pattern_navigation.scss
@@ -0,0 +1,115 @@
+@mixin lxdui-icon-sidebar-collapse() {
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' width='16px' height='16px' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 0 7.743 L 6.742 14.485 L 7.899 13.329 L 2.311 7.743 L 7.899 2.157 L 6.742 1 L 0 7.743 Z M 7.899 7.743 L 14.642 14.485 L 15.797 13.329 L 10.21 7.743 L 15.797 2.157 L 14.642 1 L 7.899 7.743 Z' fill='%23FFF' style=''/%3E%3C/svg%3E");
+}
+
+@mixin navbar-collapse-icon {
+  .p-icon--sidebar-toggle {
+    @extend %icon;
+    @include lxdui-icon-sidebar-collapse;
+  }
+}
+
+@include navbar-collapse-icon;
+
+.logo {
+  .logo-tag {
+      background-color: #e95420;
+      height: 2.2rem;
+      position: absolute;
+      top: 0;
+      width: 1.313rem;
+  }
+
+  .logo-image {
+      bottom: 0.125rem;
+      height: 1rem;
+      left: 50%;
+      position: absolute;
+      transform: translate(-50%, 0);
+      width: 1rem;
+  }
+
+  .logo-text {
+    color: #fff;
+    display: inline-block;
+    font-size: 1.3rem;
+    font-weight: 300;
+    line-height: 1rem;
+    margin-top: 0.5rem;
+    padding-left: 1.5rem;
+  }
+}
+
+@media screen and (min-width: $breakpoint-small) {
+  .l-navigation.is-collapsed .logo-text {
+    color: $colors--dark-theme--background-default;
+  }
+}
+
+@media screen and (max-width: $breakpoint-small) {
+  .l-navigation {
+    transition-duration: 0s !important;
+  }
+}
+
+@media screen and (min-width: $breakpoint-x-small) and (max-width: $breakpoint-small - 1px) {
+  .l-navigation__drawer {
+    width: 17rem;
+  }
+}
+
+.l-navigation.is-collapsed:focus-within {
+  transform: translateX(-100%);
+}
+
+@media screen and (min-width: $breakpoint-small) {
+  .l-navigation.is-collapsed,
+  .l-navigation.is-collapsed:focus-within,
+  .l-navigation.is-collapsed:hover {
+    transform: translateX(0);
+    width: 4rem;
+  }
+}
+
+.l-navigation .p-panel__content {
+  padding-bottom: 0;
+}
+
+.l-navigation .p-panel__header {
+  z-index: 1001;
+}
+
+.sidenav-top-ul::after {
+  display: none;
+}
+
+.sidenav-bottom-ul {
+  bottom: $spv--x-large;
+  position: absolute;
+  width: 15rem;
+}
+
+.sidenav-toggle-wrapper {
+  background: $colors--dark-theme--background-default;
+  bottom: 0;
+  padding: $spv--small $sph--x-large $spv--large $sph--large;
+  position: absolute;
+  text-align: right;
+  width: 100%;
+
+  .sidenav-toggle {
+    background-color: #444 !important;
+  }
+}
+
+.l-navigation.is-collapsed .sidenav-toggle-wrapper {
+  text-align: left;
+
+  .sidenav-toggle {
+    rotate: 180deg;
+  }
+}
+
+.p-side-navigation__item--title {
+  white-space: nowrap;
+}
diff --git a/app/globals.scss b/app/globals.scss
@@ -9,3 +9,13 @@ body {
 
 @import "node_modules/vanilla-framework";
 @include vanilla;
+
+@include vf-p-icon-close;
+@include vf-p-icon-connected;
+@include vf-p-icon-profile;
+
+@import "pattern_navigation";
+
+.l-main .p-panel__header {
+  padding: 0;
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,17 +1,17 @@
 "use client";
 import "./globals.scss";
 import { Inter } from "next/font/google";
-import React, { useState, useEffect, Suspense } from "react";
-import { usePathname } from 'next/navigation'
+import React, { useState, useEffect } from "react";
 import { checkBackendAvailable } from "@/utils/checkBackendAvailable";
 import {
-  Notification,
-  Theme,
   List,
-  Navigation,
+  Notification,
   Row,
 } from "@canonical/react-components";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import Navigation from "@/components/Navigation";
+import PageContent from "@/components/PageContent";
+import Loader from "@/components/Loader";
 
 const inter = Inter({ subsets: ["latin"] });
 const queryClient = new QueryClient();
@@ -24,7 +24,6 @@ export default function RootLayout({
   const [backendAvailable, setBackendAvailable] = useState<null | boolean>(
     null,
   );
-  const pathname = usePathname()
 
   useEffect(() => {
     const fetchData = async () => {
@@ -39,75 +38,47 @@ export default function RootLayout({
     <html lang="en">
       <head>
         <title>SD Core</title>
+        <link rel="shortcut icon" href="https://assets.ubuntu.com/v1/49a1a858-favicon-32x32.png" type="image/x-icon" />
       </head>
       <body className={inter.className}>
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "column",
-            minHeight: "100vh",
-          }}
-        >
-          <Navigation
-            theme={Theme.DARK}
-            logo={{
-              src: "https://assets.ubuntu.com/v1/82818827-CoF_white.svg",
-              title: "5G NMS",
-              url: "/",
-            }}
-            items={[
-              {
-                label: "Network Configuration",
-                url: "/network-configuration",
-                isSelected: pathname === "/network-configuration",
-              },
-              {
-                label: "Subscribers",
-                url: "/subscribers",
-                isSelected: pathname === "/subscribers",
-              },
-            ]}
-          />
-          {backendAvailable === false && (
-            <Notification severity="negative" title="Error">
-              {"Backend not available"}
-            </Notification>
-          )}
-          {backendAvailable === true && (
-            <QueryClientProvider client={queryClient}>
-                {children}
-            </QueryClientProvider>
-          )}
-          <div style={{ flex: 1 }}></div>
-          <footer className="l-footer--sticky p-strip--light">
-            <Row>
-              <p>
-                © 2023 Canonical Ltd. <a href="#">Ubuntu</a> and{" "}
-                <a href="#">Canonical</a> are registered trademarks of Canonical
-                Ltd.
-              </p>
-              <List
-                items={[
-                  <a key="Legal information" href="https://ubuntu.com/legal">
-                    Legal information
-                  </a>,
-                  <a
-                    key="Documentation"
-                    href="https://canonical-charmed-5g.readthedocs-hosted.com/en/latest/"
-                  >
-                    Documentation
-                  </a>,
-                  <a
-                    key="Report a bug"
-                    href="https://github.com/canonical/charmed-5g/issues/new/choose"
-                  >
-                    Report a bug
-                  </a>,
-                ]}
-                middot
-              />
-            </Row>
-          </footer>
+        <div className="l-application" role="presentation">
+          <Navigation />
+          <main className="l-main">
+            <div className="p-panel">
+                {backendAvailable === null && (
+                  <Loader text="Loading..." />
+                )}
+                {backendAvailable === false && (
+                  <PageContent>
+                    <Notification severity="negative" title="Error">
+                      {"Backend not available"}
+                    </Notification>
+                  </PageContent>
+                )}
+                {backendAvailable === true && (
+                  <QueryClientProvider client={queryClient}>
+                      {children}
+                  </QueryClientProvider>
+                )}
+            </div>
+            <footer className="l-footer--sticky p-strip--light">
+              <Row>
+                <p>
+                  © 2023 Canonical Ltd. <a href="#">Ubuntu</a> and{" "}
+                  <a href="#">Canonical</a> are registered trademarks of Canonical
+                  Ltd.
+                </p>
+                <List
+                  items={[
+                    <a key="Legal information" href="https://ubuntu.com/legal">
+                      Legal information
+                    </a>,
+                  ]}
+                  middot
+                />
+              </Row>
+            </footer>
+          </main>
         </div>
       </body>
     </html>

diff --git a/app/network-configuration/page.tsx b/app/network-configuration/page.tsx
@@ -1,8 +1,6 @@
 "use client";
 import React, { useState } from "react";
 import {
-  Row,
-  Col,
   Button,
   Card,
   ConfirmationButton,
@@ -15,6 +13,8 @@ import { NetworkSliceTable } from "@/components/NetworkSliceTable";
 import Loader from "@/components/Loader";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { queryKeys } from "@/utils/queryKeys";
+import PageHeader from "@/components/PageHeader";
+import PageContent from "@/components/PageContent";
 
 const NetworkConfiguration = () => {
   const queryClient = useQueryClient();
@@ -38,21 +38,18 @@ const NetworkConfiguration = () => {
   }
 
   return (
-    <div>
-      <Row>
-        <Col size={6}>
-          <h1 className="p-heading--4">Network Slices ({networkSlices.length})</h1>
-          {networkSlices.length === 0 && <NetworkSliceEmptyState />}
-          {networkSlices.length > 0 && (
-            <>
-              <div className="u-align--right">
-                <Button
-                  appearance="positive"
-                  onClick={toggleCreateNetworkSliceModal}
-                >
-                  Create
-                </Button>
-              </div>
+    <>
+      {networkSlices.length > 0 && (
+        <PageHeader title={`Network slices (${networkSlices.length})`}>
+            <Button appearance="positive" onClick={toggleCreateNetworkSliceModal}>
+              Create
+            </Button>
+        </PageHeader>
+      )}
+      <PageContent>
+        {networkSlices.length === 0 && <NetworkSliceEmptyState />}
+        {networkSlices.length > 0 && (
+          <>
               {networkSlices.map((slice) => (
                 <Card key={slice.SliceName}>
                   <h2 className="p-heading--5">{slice.SliceName}</h2>
@@ -82,14 +79,13 @@ const NetworkConfiguration = () => {
               ))}
             </>
           )}
-        </Col>
-      </Row>
+      </PageContent>
       {isModalVisible && (
         <CreateNetworkSliceModal
           toggleModal={toggleCreateNetworkSliceModal}
         />
       )}
-    </div>
+    </>
   );
 };
 export default NetworkConfiguration;