Menu for shortcuts (#1006)

* init

* added shortcut navigations for external sites

* Changed icon and added logout button

CHANGELOG.md

@@ -11,6 +11,7 @@
 ### 🎨 - Designendringer
 
 ## Neste versjon
+- ✨ **Shortcuts**. La til meny med shortcuts.
 
 ## Versjon 2023.10.04
 - 🎨 **Footer**. La til NITO logo i footer under "samarbeid"

package.json

@@ -21,6 +21,7 @@
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
@@ -85,8 +86,8 @@
     "@typescript-eslint/eslint-plugin": "^5.22.0",
     "@typescript-eslint/parser": "^5.38.1",
     "@vitejs/plugin-react": "^4.2.0",
-    "eslint": "^8.56.0",
     "autoprefixer": "^10.4.18",
+    "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-import-helpers": "^1.3.1",
     "eslint-plugin-prettier": "^4.2.1",

src/URLS.tsx

@@ -60,7 +60,12 @@ const URLS = {
   jobpostsAdmin: '/admin/karriere/',
   newsAdmin: '/admin/nyheter/',
   bannerAdmin: '/admin/bannere/',
-  jubilee: 'jubileum.tihlde.org/',
+  jubilee: 'https://jubileum.tihlde.org/',
+  fondet: 'https://fondet.tihlde.org/',
+  kontRes: 'https://kontres.tihlde.org/',
+  github: 'https://github.com/TIHLDE',
+  pythons: 'https://pythons.tihlde.org/',
+  pythonsLadies: 'https://pythons-damer.tihlde.org/',
 };
 
 export default URLS;

src/components/miscellaneous/shortCutMenu/Admin.tsx

@@ -0,0 +1,61 @@
+import URLS from 'URLS';
+
+import { PermissionApp } from 'types/Enums';
+
+import { HavePermission } from 'hooks/User';
+
+import { ShortCutMenuProps } from '.';
+import ShortCutLink from './Item';
+import ShortCutSectionWrapper from './SectionWrapper';
+
+const ShortCutAdmin = ({ setOpen }: Pick<ShortCutMenuProps, 'setOpen'>) => {
+  const links = [
+    {
+      apps: [PermissionApp.EVENT],
+      title: 'Arrangementer',
+      path: URLS.eventAdmin,
+    },
+    {
+      apps: [PermissionApp.GROUP],
+      title: 'Grupper',
+      path: URLS.groups.index,
+    },
+    {
+      apps: [PermissionApp.JOBPOST],
+      title: 'Jobbannonser',
+      path: URLS.jobpostsAdmin,
+    },
+    {
+      apps: [PermissionApp.USER],
+      title: 'Medlemmer',
+      path: URLS.userAdmin,
+    },
+    {
+      apps: [PermissionApp.NEWS],
+      title: 'Nyheter',
+      path: URLS.newsAdmin,
+    },
+    {
+      apps: [PermissionApp.STRIKE],
+      title: 'Prikker',
+      path: URLS.strikeAdmin,
+    },
+    {
+      apps: [PermissionApp.BANNERS],
+      title: 'Bannere',
+      path: URLS.bannerAdmin,
+    },
+  ];
+
+  return (
+    <ShortCutSectionWrapper title='Admin'>
+      {links.map((link, index) => (
+        <HavePermission apps={link.apps} key={index}>
+          <ShortCutLink setOpen={setOpen} {...link} />
+        </HavePermission>
+      ))}
+    </ShortCutSectionWrapper>
+  );
+};
+
+export default ShortCutAdmin;

src/components/miscellaneous/shortCutMenu/HotKey.tsx

@@ -0,0 +1,42 @@
+import { ArrowBigUp, Command, Option } from 'lucide-react';
+import { ReactNode } from 'react';
+
+type HotKeyProps = {
+  modifiers: Array<'shift' | 'alt' | 'ctrl' | undefined>;
+  letter: string;
+};
+
+const HotKey = ({ modifiers, letter }: HotKeyProps) => {
+  const getModifierKey = (modifier: 'shift' | 'alt' | 'ctrl' | undefined): ReactNode | undefined => {
+    switch (modifier) {
+      case 'shift':
+        return <ArrowBigUp className='w-4 h-4 stroke-[1.5px]' />;
+      case 'alt':
+        return <Option className='w-4 h-4 stroke-[1.5px]' />;
+      case 'ctrl':
+        return <Command className='w-4 h-4 stroke-[1.5px]' />;
+      default:
+        return undefined;
+    }
+  };
+
+  const getModifierKeys = (): ReactNode | undefined => {
+    if (modifiers.length === 0) {
+      return undefined;
+    }
+    return modifiers.map((modifier, index) => (
+      <span className='mr-1 p-1 border border-primary/30 rounded-md' key={index}>
+        {getModifierKey(modifier)}
+      </span>
+    ));
+  };
+
+  return (
+    <div className='flex items-center'>
+      {getModifierKeys()}
+      <span className='font-medium p-1 px-2 text-xs border border-primary/30 rounded-md'>{letter.toUpperCase()}</span>
+    </div>
+  );
+};
+
+export default HotKey;

src/components/miscellaneous/shortCutMenu/Item.tsx

@@ -0,0 +1,29 @@
+import { Link as LinkIcon, SquareArrowOutUpRight } from 'lucide-react';
+import { Dispatch, ReactNode, SetStateAction } from 'react';
+import { Link } from 'react-router-dom';
+
+type MenuItemProps = {
+  title: string;
+  path: string;
+  setOpen: Dispatch<SetStateAction<boolean>>;
+  external?: boolean;
+  hotKey?: ReactNode;
+};
+
+const ShortCutLink = ({ title, path, setOpen, external, hotKey }: MenuItemProps) => {
+  return (
+    <Link
+      className='flex items-center justify-between text-sm p-2 rounded-md hover:bg-secondary'
+      onClick={() => setOpen(false)}
+      rel={external ? 'noreferrer' : ''}
+      target={external ? '_blank' : ''}
+      to={path}>
+      <div className='flex items-center'>
+        {!external ? <LinkIcon className='mr-2 w-4 h-4 stroke-[1.5px]' /> : <SquareArrowOutUpRight className='mr-2 w-4 h-4 stroke-[1.5px]' />} {title}
+      </div>
+      {hotKey && hotKey}
+    </Link>
+  );
+};
+
+export default ShortCutLink;