AppMenu and layout refactorings + first mobile layout version

Author: derwebcoder

src/common/components/IconButton/IconButton.tsx

@@ -2,7 +2,7 @@ import classNames from "classnames";
 import { forwardRef } from "react";
 
 export type IconButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
-	relevancy?: "primary" | "secondary";
+	relevancy?: "primary" | "secondary" | 'ghost';
 };
 
 export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
@@ -14,10 +14,11 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
 				{...buttonProps}
 				ref={ref}
 				className={classNames(
-					"size-8 rounded-full stroke-white text-white hover:bg-blue-500 active:bg-blue-600 place-content-center place-items-center flex outline-offset-2 shadow-md shadow-blue-400",
+					"size-8 rounded-full hover:bg-blue-500 active:bg-blue-600 place-content-center place-items-center flex outline-offset-2 shadow-md shadow-blue-400",
 					{
-						"bg-blue-400": relevancy === "primary",
-						"bg-stone-400": relevancy === "secondary",
+						"bg-blue-400 stroke-white text-white shadow-md": relevancy === "primary",
+						"bg-stone-200 stroke-blue-500 text-blue-500 shadow-md hover:stroke-white hover:text-white": relevancy === "secondary",
+						"bg-transparent stroke-stone-500 text-stone-500 hover:stroke-white hover:text-white shadow-sm": relevancy === 'ghost',
 					},
 				)}
 			>

src/container/AppMenu/AppMenu.tsx

@@ -0,0 +1,36 @@
+import logo from "@/assets/images/logo.png";
+import { IconButton } from "@/common/components/IconButton/IconButton";
+import { HomeIcon } from "@/assets/icons/HomeIcon";
+import { ListTodoIcon } from "@/assets/icons/ListTodoIcon";
+import { GraduationCapIcon } from "@/assets/icons/GraduationCapIcon";
+
+export const AppMenu = () => {
+	return (
+		<div className="flex flex-row gap-4 place-items-center h-10">
+			<IconButton
+				type="button"
+				onClick={() => console.log('yeah')}
+				title="home"
+				relevancy="secondary"
+			>
+				<HomeIcon />
+			</IconButton>
+			<IconButton
+				type="button"
+				onClick={() => console.log('yeah')}
+				title="home"
+				relevancy="secondary"
+			>
+				<ListTodoIcon />
+			</IconButton>
+			<IconButton
+				type="button"
+				onClick={() => console.log('yeah')}
+				title="home"
+				relevancy="secondary"
+			>
+				<GraduationCapIcon />
+			</IconButton>
+		</div>
+	);
+};

src/container/PipInput/PipInput.tsx

@@ -71,7 +71,7 @@ export const PipInput = () => {
 					type="button"
 					onClick={renderPIP}
 					title="detach"
-					relevancy="secondary"
+					relevancy="ghost"
 				>
 					<ArrowRightStartOnBox />
 				</IconButton>

src/container/Settings/Settings.tsx

@@ -189,7 +189,7 @@ export const Settings = () => {
 				<IconButton
 					type="button"
 					aria-label="Open the settings"
-					relevancy="secondary"
+					relevancy="ghost"
 				>
 					<CogIcon />
 				</IconButton>

src/container/TagEditor/TagEditor.tsx

@@ -47,7 +47,7 @@ export const TagEditor = () => {
 					<IconButton
 						type="button"
 						aria-label="Open the tag editor"
-						relevancy="secondary"
+						relevancy="ghost"
 					>
 						<TagIcon />
 					</IconButton>

src/layouts/BaseLayout.astro

@@ -51,10 +51,8 @@ const { title } = Astro.props;
     (await isAuthenticated())
   ) {
     document.body.classList.remove("hidden");
+    document.body.classList.add("grid");
   } else {
     window.location.href = authUrl;
   }
 </script>
-<script>
-  import "preline/dist/preline.js";
-</script>

src/pages/index.astro

@@ -1,4 +1,5 @@
 ---
+import { AppMenu } from "@/container/AppMenu/AppMenu";
 import { MainMenu } from "../container/MainMenu/MainMenu";
 import { SearchInput } from "../container/SearchInput/SearchInput";
 import { SparkInput } from "../container/SparkInput/SparkInput";
@@ -10,9 +11,9 @@ import Layout from "../layouts/BaseLayout.astro";
 <script src="../scripts/store/queryStore.ts"></script>
 <script src="../scripts/theme/initTheme.ts"></script>
 <Layout title="Sparktags">
-  <main class="grid lg:grid-cols-[1fr_400px_600px_1fr] gap-6 h-full relative">
+  <main class="px-2 md:px-0 grid md:grid-cols-[max-content_minmax(300px,_400px)_minmax(350px,_600px)] grid-cols-[min-content_minmax(auto,_600px)] md:grid-rows-[1fr] grid-rows-[max-content_max-content_max-content] md:gap-6 gap-2 h-full relative place-self-center">
     <div>
-      <div class="py-10 flex flex-col place-items-end sticky top-0">
+      <div class="md:py-10 pt-1 flex flex-col place-items-end sticky top-0">
         <!-- We need an h1 for accessibility reasons -->
         <h1 class="sr-only">Dashboard</h1>
         <MainMenu client:only="react" />
@@ -21,20 +22,25 @@ import Layout from "../layouts/BaseLayout.astro";
     <!-- the following div is needed for the sticky aside to work -->
     <div>
       <aside
-        class="py-10 grid grid-rows-[200px_1fr_100px] max-h-screen h-screen sticky top-0"
+        class="md:py-10 pt-1 grid grid-rows-[max-content_max-content_max-content_0px] md:grid-rows-[max-content_200px_1fr_max-content] gap-4 md:max-h-screen md:h-screen sticky top-0"
       >
+        <div>
+          <AppMenu />
+        </div>
         <SparkInput client:only="react" />
         <div>
           <SearchInput client:only="react" />
         </div>
-        <div>
+        <div class="hidden md:block">
           <p>[email protected]</p>
         </div>
       </aside>
     </div>
-    <section>
+    <section class="col-span-2 md:col-span-1">
       <SparkList client:only="react" />
     </section>
-    <div></div>
+    <div class="block md:hidden col-span-2 md:col-span-1">
+      <p>[email protected]</p>
+    </div>
   </main>
 </Layout>