refactor: add nif to navigation

apps/client/src/common/components/app-link/AppLink.module.scss

@@ -8,5 +8,5 @@
 .linkIcon {
   margin-left: $element-inner-spacing;
   display: inline-block;
-  transform: rotate(45deg);
+  @include rotate-fourty-five;
 }

apps/client/src/common/components/navigation-menu/NavigationMenu.module.scss

@@ -72,9 +72,33 @@ $button-size: 3rem;
 
 .linkIcon {
   margin-left: auto;
-  transform: rotate(45deg);
+  @include rotate-fourty-five;
 }
 
 .separator {
   border-color: $border-color-ondark;
 }
+
+.sectionHeader {
+  font-size: calc(1rem - 2px);
+  margin-left: 1rem;
+  color: $gray-700;
+}
+
+.bottom {
+  margin-top: auto;
+  margin-bottom: 1rem;
+}
+
+.interfaces {
+  padding: 0.5rem 1rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.goIcon {
+  @include rotate-fourty-five;
+  margin-left: 0.25rem;
+  margin-bottom: 0.25rem;
+}

apps/client/src/common/components/navigation-menu/NavigationMenu.tsx

@@ -18,14 +18,17 @@ import { IoLockClosedOutline } from '@react-icons/all-files/io5/IoLockClosedOutl
 import { IoSwapVertical } from '@react-icons/all-files/io5/IoSwapVertical';
 
 import { navigatorConstants } from '../../../viewerConfig';
+import { isLocalhost, serverPort } from '../../api/constants';
 import useClickOutside from '../../hooks/useClickOutside';
 import useElectronEvent from '../../hooks/useElectronEvent';
+import useInfo from '../../hooks-query/useInfo';
 import { useClientStore } from '../../stores/clientStore';
 import { useViewOptionsStore } from '../../stores/viewOptions';
 import { isKeyEnter } from '../../utils/keyEvent';
-import { handleLinks } from '../../utils/linkUtils';
+import { handleLinks, openLink } from '../../utils/linkUtils';
 import { cx } from '../../utils/styleUtils';
 import { RenameClientModal } from '../client-modal/RenameClientModal';
+import CopyTag from '../copy-tag/CopyTag';
 
 import style from './NavigationMenu.module.scss';
 
@@ -54,7 +57,7 @@ function NavigationMenu(props: NavigationMenuProps) {
       <RenameClientModal id={id} name={name} isOpen={isOpenRename} onClose={onCloseRename} />
       <Drawer placement='left' onClose={onClose} isOpen={isOpen} variant='ontime' data-testid='navigation__menu'>
         <DrawerOverlay />
-        <DrawerContent>
+        <DrawerContent maxWidth='21rem'>
           <DrawerHeader>
             <DrawerCloseButton size='lg' />
             Ontime
@@ -120,6 +123,7 @@ function NavigationMenu(props: NavigationMenuProps) {
                 {route.label}
               </ClientLink>
             ))}
+            {isLocalhost && <OtherAddresses currentLocation={location.pathname} />}
           </DrawerBody>
         </DrawerContent>
       </Drawer>
@@ -128,6 +132,45 @@ function NavigationMenu(props: NavigationMenuProps) {
   );
 }
 
+interface OtherAddressesProps {
+  currentLocation: string;
+}
+
+function OtherAddresses(props: OtherAddressesProps) {
+  const { currentLocation } = props;
+  const { data } = useInfo();
+
+  // there is no point showing this if we only have one interface
+  if (data.networkInterfaces.length < 2) {
+    return null;
+  }
+
+  return (
+    <div className={style.bottom}>
+      <div className={style.sectionHeader}>Accessible on external networks</div>
+      <div className={style.interfaces}>
+        {data?.networkInterfaces?.map((nif) => {
+          if (nif.name === 'localhost') {
+            return null;
+          }
+
+          const address = `http://${nif.address}:${serverPort}${currentLocation}`;
+          return (
+            <CopyTag
+              key={nif.name}
+              copyValue={address}
+              onClick={() => openLink(address)}
+              label='Copy IP or navigate to address'
+            >
+              {nif.address} <IoArrowUp className={style.goIcon} />
+            </CopyTag>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
 interface ClientLinkProps {
   current: boolean;
   to: string;

apps/client/src/features/app-settings/panel/network-panel/NetworkInterfaces.module.scss

@@ -6,6 +6,7 @@
 }
 
 .goIcon {
-  transform: rotate(45deg);
+  @include rotate-fourty-five;
   margin-left: 0.25rem;
+  margin-bottom: 0.25rem;
 }

apps/client/src/features/control/message/MessageControl.module.scss

@@ -22,7 +22,7 @@
 }
 
 .corner {
-  transform: rotate(45deg);
+  @include rotate-fourty-five;
 
   position: absolute;
   top: 0.5rem;

apps/client/src/theme/_mixins.scss

@@ -21,3 +21,11 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+@mixin rotate-fourty-five {
+  transform: rotate(45deg);
+} 
+
+.fourtyfive {
+  @include rotate-fourty-five;
+}

apps/client/src/theme/_viewerDefs.scss

@@ -30,4 +30,4 @@ $external-color: rgba(white, 85%); // --external-color-override
 
 // properties of other timers (clock and countdown)
 $timer-label-size: clamp(16px, 1.5vw, 24px);
-$timer-value-size: clamp(2rem, 3.5vw, 3.5rem);
+$timer-value-size: clamp(2rem, 3.5vw, 3.5rem);

apps/client/src/theme/ontimeDrawer.ts

@@ -4,6 +4,8 @@ export const ontimeDrawer = {
     backgroundColor: '#202020', // $gray-1250
   },
   body: {
+    display: 'flex',
+    flexDirection: 'column',
     color: '#fefefe', // $gray-50
     backgroundColor: '#202020', // $gray-1250
   },