add ability to close admin panel for desktop (#878)

Co-authored-by: magsyg <[email protected]>
Samfundet · Dec 22, 2023 · de9309a · de9309a
1 parent 31d7247
commit de9309a
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 18 deletions.
diff --git a/frontend/src/PagesAdmin/AdminLayout/AdminLayout.module.scss b/frontend/src/PagesAdmin/AdminLayout/AdminLayout.module.scss
@@ -171,3 +171,37 @@ $panel-dark-bg: #333333;
     margin-left: 0;
   }
 }
+
+.closed_panel_content_wrapper {
+  margin-left: 0;
+  max-width: 100%;
+  width: 100%;
+}
+
+.open_panel_desktop {
+  height: 100%;
+  padding : 0.5em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &:hover {
+    background-color: $black-t10;
+    -webkit-transition: background-color 200ms linear;
+    -ms-transition: background-color 200ms linear;
+    transition: background-color 200ms linear;
+  }
+  &:active {
+    background-color: $black-t25;
+    -webkit-transition: background-color 1ms linear;
+    -ms-transition: background-color 1ms linear;
+    transition: background-color 1ms linear;
+  }
+}
+
+.arrow {
+  color: $grey-2;
+  background-color: transparent;
+  @include theme-dark {
+    background-color: $grey-4;
+  }
+}
diff --git a/frontend/src/PagesAdmin/AdminLayout/AdminLayout.tsx b/frontend/src/PagesAdmin/AdminLayout/AdminLayout.tsx
@@ -19,7 +19,7 @@ import { useMobile } from '~/hooks';
  */
 export function AdminLayout() {
   const { t } = useTranslation();
-  const [mobilePanelOpen, setMobilePanelOpen] = useState(false);
+  const [panelOpen, setPanelOpen] = useState(false);
   const isMobile = useMobile();
 
   function makeAppletShortcut(applet: Applet, index: number) {
@@ -33,7 +33,7 @@ export function AdminLayout() {
         key={index}
         className={classNames(styles.panel_item, selected && styles.selected)}
         url={applet.url}
-        onAfterClick={() => mobilePanelOpen && setMobilePanelOpen(false)}
+        onAfterClick={() => isMobile && panelOpen && setPanelOpen(false)}
         plain={true}
       >
         <Icon icon={applet.icon} />
@@ -46,25 +46,23 @@ export function AdminLayout() {
 
   useEffect(() => {
     if (!isMobile) {
-      setMobilePanelOpen(false);
+      setPanelOpen(true);
     }
   }, [isMobile]);
 
   const panel = (
-    <div className={classNames(styles.panel, isMobile && !mobilePanelOpen && styles.mobile_panel_closed)}>
-      {isMobile && (
-        <button className={styles.mobile_panel_close_btn} onClick={() => setMobilePanelOpen(false)}>
-          <Icon icon="mdi:close" width={24} />
-        </button>
-      )}
+    <div className={classNames(styles.panel, !panelOpen && styles.mobile_panel_closed)}>
+      <button className={styles.mobile_panel_close_btn} onClick={() => setPanelOpen(false)}>
+        <Icon icon="mdi:close" width={24} />
+      </button>
 
       {/* Header */}
       <div className={styles.panel_header}>{t(KEY.control_panel_title)}</div>
       {/* Index */}
       <Link
         className={classNames(styles.panel_item, selectedIndex && styles.selected)}
         url={ROUTES_FRONTEND.admin}
-        onAfterClick={() => mobilePanelOpen && setMobilePanelOpen(false)}
+        onAfterClick={() => panelOpen && setPanelOpen(false)}
       >
         <Icon icon="mdi:person" />
         {t(KEY.common_profile)}
@@ -88,28 +86,30 @@ export function AdminLayout() {
     </div>
   );
 
-  const mobileHeader = (
+  const mobileOpen = (
     <>
       <div className={styles.mobile_header}>
-        <Button theme="samf" onClick={() => setMobilePanelOpen(!mobilePanelOpen)}>
+        <Button theme="samf" onClick={() => setPanelOpen(!panelOpen)}>
           <Icon icon="ci:hamburger-md" /> {t(KEY.common_open)} {t(KEY.control_panel_title)}
         </Button>
       </div>
-      <div
-        className={classNames(styles.mobile_backdrop, mobilePanelOpen && styles.mobile_backdrop_open)}
-        onClick={() => setMobilePanelOpen(false)}
-      ></div>
     </>
   );
 
+  const desktopOpen = (
+    <div className={styles.open_panel_desktop} onClick={() => setPanelOpen(true)}>
+      <Icon icon="mdi:arrow-right-bold" width={32} className={styles.arrow} />
+    </div>
+  );
+
   return (
     <div>
       <Navbar />
       <div className={styles.wrapper}>
-        {isMobile && mobileHeader}
         {panel}
+        {!panelOpen && (isMobile ? mobileOpen : desktopOpen)}
         {/* Content */}
-        <div className={styles.content_wrapper}>
+        <div className={classNames(styles.content_wrapper, !panelOpen && styles.closed_panel_content_wrapper)}>
           <Outlet />
         </div>
       </div>