WIP

public/Mesh_Logo_Black.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 100 55" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(0.802386,0,0,0.460028,-421.748,-122.127)">
+        <g transform="matrix(0.579082,0,0,1.01004,460.975,-39.6867)">
+            <path d="M250.908,330.267L193.126,415.005L180.938,406.694L244.802,313.037C246.174,311.024 248.453,309.819 250.889,309.816C253.326,309.814 255.606,311.015 256.982,313.026L320.994,406.536L308.821,414.869L250.908,330.267Z"/>
+        </g>
+        <g transform="matrix(0.582378,0,0,1.01579,485.019,-211.182)">
+            <path d="M87.642,581.398L154.757,482.977L142.638,474.713L75.523,573.134L87.642,581.398Z"/>
+        </g>
+    </g>
+</svg>

public/Mesh_Logo_White.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 100 55" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(0.802386,0,0,0.460028,-421.748,-122.127)">
+        <g transform="matrix(0.579082,0,0,1.01004,460.975,-39.6867)">
+            <path d="M250.908,330.267L193.126,415.005L180.938,406.694L244.802,313.037C246.174,311.024 248.453,309.819 250.889,309.816C253.326,309.814 255.606,311.015 256.982,313.026L320.994,406.536L308.821,414.869L250.908,330.267Z" style="fill:white;"/>
+        </g>
+        <g transform="matrix(0.582378,0,0,1.01579,485.019,-211.182)">
+            <path d="M87.642,581.398L154.757,482.977L142.638,474.713L75.523,573.134L87.642,581.398Z" style="fill:white;"/>
+        </g>
+    </g>
+</svg>

public/fonts/inter/inter.css

@@ -0,0 +1,17 @@
+@font-face {
+    font-family: 'Inter var';
+    font-weight: 100 900;
+    font-display: swap;
+    font-style: normal;
+    font-named-instance: 'Regular';
+    src: url("Inter-roman.var.woff2?v=3.18") format("woff2");
+}
+
+@font-face {
+    font-family: 'Inter var';
+    font-weight: 100 900;
+    font-display: swap;
+    font-style: italic;
+    font-named-instance: 'Italic';
+    src: url("Inter-italic.var.woff2?v=3.18") format("woff2");
+}

public/index.html

@@ -8,6 +8,13 @@
     <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
     <link rel="manifest" href="site.webmanifest" />
     <link rel="mask-icon" href="safari-pinned-tab.svg" color="#67ea94" />
+    <link href="fonts/inter/inter.css" rel="stylesheet" />
+
+    <link href="https://fonts.gstatic.com" rel="preconnect" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&display=swap"
+      rel="stylesheet"
+    />
     <meta name="theme-color" content="#67ea94" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta

src/App.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 
+import { HomeIcon, MenuIcon, MoonIcon } from '@heroicons/react/outline';
 import { Protobuf, SettingsManager, Types } from '@meshtastic/meshtasticjs';
 
-import { Header } from './components/Header';
+import { NavItem } from './components/nav/NavItem';
 import { connection } from './connection';
 import { useAppDispatch } from './hooks/redux';
-import { Main } from './Main';
 import {
   addChannel,
   addNode,
@@ -73,9 +73,76 @@ const App = (): JSX.Element => {
   }, [dispatch]);
 
   return (
-    <div className="flex flex-col h-screen w-screen">
-      <Header />
-      <Main />
+    // <div className="flex flex-col h-screen w-screen">
+    //   <Header />
+    //   <Main />
+    // </div>
+    <div className="h-screen flex flex-col flex-auto items-center w-full min-w-0 bg-gray-200 ">
+      <div className="relative flex justify-center w-full overflow-hidden z-50 bg-primary">
+        <div className="max-w-360 w-full sm:py-3 sm:m-8 sm:mb-0 md:mt-12 md:mx-8 md:pt-4 md:pb-3 sm:rounded-t-xl border-b sm:shadow-2xl overflow-hidden bg-white">
+          <div className="relative flex flex-auto flex-0 items-center h-16 px-4 md:px-6">
+            {/* NORMAL NAV ICON */}
+            <div className="hidden md:flex items-center mx-2">
+              <img
+                className="w-16 dark:hidden"
+                src="Mesh_Logo_Black.svg"
+                alt="Logo image"
+              />
+              <img
+                className="hidden dark:flexw-16"
+                src="Mesh_Logo_White.svg"
+                alt="Logo image"
+              />
+            </div>
+            {/* END NORMAL NAV ICON */}
+            {/* MOBILE NAV BUTTON */}
+            <button className="md:hidden w-10 h-10 rounded-full hover:bg-gray-200 hover:shadow-inner text-gray-500">
+              <span className="flex justify-center ">
+                <MenuIcon className="h-6 w-6" />
+              </span>
+            </button>
+            {/* END MOBILE NAV BUTTON */}
+            <div className="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
+              {/* HEADER BUTTON */}
+              <button className="w-10 h-10 rounded-full hover:bg-gray-200 hover:shadow-inner">
+                <span className="flex justify-center ">
+                  <span className="w-6 shadow rounded-sm">
+                    <img
+                      className="w-full"
+                      src="assets/images/flags/US.svg"
+                      alt="Flag image for en"
+                    />
+                  </span>
+                </span>
+              </button>
+              {/* END HEADER BUTTON */}
+              {/* THEME BUTTON */}
+              <button className="w-10 h-10 rounded-full hover:bg-gray-200 hover:shadow-inner text-gray-500">
+                <span className="flex justify-center ">
+                  <MoonIcon className="h-6 w-6" />
+                </span>
+              </button>
+              {/* END THEME BUTTON */}
+            </div>
+          </div>
+          <div className="hidden md:flex flex-auto flex-0 relative items-center h-16 px-4 ">
+            <div className="flex items-center">
+              {/* NAV ITEM */}
+              <NavItem
+                icon={<HomeIcon className="h-6 w-6 mr-3 text-gray-500" />}
+                text={'Dashboard'}
+              />
+              {/* END NAV ITEM */}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex flex-auto justify-center w-full sm:px-8 sm:mb-8">
+        <div className="flex flex-col flex-auto w-full sm:max-w-360 sm:shadow-xl sm:overflow-hidden bg-gray-100 sm:rounded-b-xl">
+          <div className="flex flex-col flex-auto min-w-0 ">content</div>
+        </div>
+      </div>
     </div>
   );
 };

src/components/Tmp.tsx

@@ -0,0 +1,123 @@
+import React from 'react';
+
+import { HomeIcon, MenuIcon } from '@heroicons/react/outline';
+
+export const Tmp = () => {
+  return (
+    <div className="h-screen flex flex-col flex-auto items-center w-full min-w-0 bg-gray-200 ">
+      <div className="relative flex justify-center w-full overflow-hidden z-50 bg-primary">
+        <div className="max-w-360 w-full sm:py-3 sm:m-8 sm:mb-0 md:mt-12 md:mx-8 md:pt-4 md:pb-3 sm:rounded-t-xl border-b sm:shadow-2xl overflow-hidden bg-white">
+          <div className="relative flex flex-auto flex-0 items-center h-16 px-4 md:px-6">
+            {/* NORMAL NAV ICON */}
+            <div className="hidden md:flex items-center mx-2">
+              <img
+                className="w-16 dark:hidden"
+                src="Mesh_Logo_Black.svg"
+                alt="Logo image"
+              />
+              <img
+                className="hidden dark:flexw-16"
+                src="Mesh_Logo_White.svg"
+                alt="Logo image"
+              />
+            </div>
+            {/* END NORMAL NAV ICON */}
+            {/* MOBILE NAV BUTTON */}
+            <button className="md:hidden w-10 h-10 rounded-full hover:bg-gray-200 hover:shadow-inner text-gray-500">
+              <span className="flex justify-center ">
+                <MenuIcon className="h-6 w-6" />
+              </span>
+            </button>
+            {/* END MOBILE NAV BUTTON */}
+            <div className="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
+              {/* HEADER BUTTON */}
+              <button className="w-10 h-10 rounded-full hover:bg-gray-200 hover:shadow-inner">
+                <span className="flex justify-center ">
+                  <span className="w-6 shadow rounded-sm">
+                    <img
+                      className="w-full"
+                      src="assets/images/flags/US.svg"
+                      alt="Flag image for en"
+                    />
+                  </span>
+                </span>
+              </button>
+              {/* END HEADER BUTTON */}
+            </div>
+          </div>
+          <div className="hidden md:flex flex-auto flex-0 relative items-center h-16 px-4 ">
+            <div className="flex items-center">
+              {/* NAV ITEM */}
+              <div className="flex h-12 items-center hover:bg-gray-100 rounded-md cursor-pointer px-3 select-none">
+                <HomeIcon className="h-5 w-5 mr-3" />
+                <span>Dashboard</span>
+              </div>
+              {/* END NAV ITEM */}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex flex-auto justify-center w-full sm:px-8 sm:mb-8">
+        <div className="flex flex-col flex-auto w-full sm:max-w-360 sm:shadow-xl sm:overflow-hidden bg-gray-100 sm:rounded-b-xl">
+          <div className="flex flex-col flex-auto min-w-0 ">
+            <div className="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b  bg-white">
+              <div className="flex-1 min-w-0">
+                <div className="flex flex-wrap items-center font-medium">
+                  <div>
+                    <a className="whitespace-nowrap text-purple-500">
+                      User Interface
+                    </a>
+                  </div>
+                </div>
+                <div className="mt-2">
+                  <h2 className="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
+                    {' '}
+                    Confirmation Dialog{' '}
+                  </h2>
+                </div>
+              </div>
+            </div>
+            <div className="flex-auto p-6 sm:p-10 ">
+              <div className="max-w-3xl">
+                <div className="max-w-3xl prose prose-sm">
+                  <p>
+                    {' '}
+                    One of the repetitive and tedious jobs in Angular is to
+                    create confirmation dialogs. Since dialogs require their own
+                    component you have to either create a separate component
+                    every time you need a confirmation dialog or you have to
+                    create your own confirmation dialog system that can be
+                    configured.{' '}
+                  </p>
+                  <p>
+                    {' '}
+                    In order for you to save time while developing with Fuse, we
+                    have created a simple yet powerful{' '}
+                    <code>FuseConfirmationService</code> to create customized
+                    confirmation dialogs on-the-fly.{' '}
+                  </p>
+                  <p>
+                    {' '}
+                    Below you can configure and preview the confirmation dialog.
+                    You can use the generated configuration object within your
+                    code to have the exact same dialog.{' '}
+                  </p>
+                  <p>
+                    {' '}
+                    For more detailed information and API documentation, check
+                    the{' '}
+                    <a href="/ui/fuse-components/services/confirmation">
+                      documentation
+                    </a>{' '}
+                    page.{' '}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

src/components/nav/NavItem.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+interface NavItemProps {
+  icon: JSX.Element;
+  text: string;
+}
+
+export const NavItem = ({ icon, text }: NavItemProps) => {
+  return (
+    <div className="flex h-12 items-center hover:bg-gray-100 rounded-md cursor-pointer px-3 select-none">
+      {icon}
+      <span className="">{text}</span>
+    </div>
+  );
+};

src/index.tsx

@@ -7,12 +7,14 @@ import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 
 import App from './App';
+// import { Tmp } from './components/Tmp';
 import { store } from './store';
 
 ReactDOM.render(
   <React.StrictMode>
     <Provider store={store}>
       <App />
+      {/* <Tmp /> */}
     </Provider>
   </React.StrictMode>,
   document.getElementById('root'),

tailwind.config.js

@@ -3,10 +3,16 @@ module.exports = {
   purge: ['./public/**/*.html', './src/**/*.tsx'],
   darkMode: false, // or 'media' or 'class'
   theme: {
-    extend: {},
-  },
-  variants: {
-    extend: {},
+    fontFamily: {
+      sans: 'Inter var',
+      mono: 'IBM Plex Mono',
+    },
+    extend: {
+      colors: {
+        primary: '#67ea94',
+      },
+    },
   },
+  variants: {},
   plugins: [],
 };