feat: some location optimization

src/app.tsx

@@ -5,8 +5,8 @@ import LoginPage from "./pages/login";
 import { AppProvider } from "./providers/AuthProvider";
 
 const HomePage: FunctionComponent = () => {
-  const location = useLocation();
+  const { route } = useLocation();
-  location.route("/login");
+  route("/login");
   return <div>Redirecting to login...</div>;
 };
 

src/components/menu.module.scss

@@ -1,7 +1,7 @@
 @reference "../index.scss";
 
 .menu_container {
-  @apply fixed bottom-0 flex min-h-8 min-w-screen flex-row items-center gap-1 border-t border-t-gray-500 bg-white px-1 py-5 md:relative md:min-h-screen md:min-w-[300px] md:flex-col md:gap-4 md:border-t-0 md:border-l md:border-l-gray-500 md:px-5;
+  @apply fixed right-0 bottom-0 left-0 flex min-h-auto flex-row items-center gap-1 border-t border-t-gray-500 bg-white px-1 py-5 md:sticky md:top-0 md:right-0 md:bottom-auto md:left-auto md:min-h-screen md:w-auto md:flex-col md:gap-4 md:border-t-0 md:border-l md:border-l-gray-500 md:px-5 md:py-5;
 }
 
 .menu_item {

src/components/menu.tsx

@@ -9,8 +9,8 @@ interface MenuItemProps {
 }
 
 const MenuItem: FunctionComponent<MenuItemProps> = ({ title, link }: MenuItemProps) => {
-  const location = useLocation();
+  const { route, path } = useLocation();
-  const active = location.path === link;
+  const active = path === link;
   const menuItemClasses = tv({
     base: classes.menu_item,
     variants: {
@@ -24,7 +24,7 @@ const MenuItem: FunctionComponent<MenuItemProps> = ({ title, link }: MenuItemPro
     },
   });
   return (
-    <div class={menuItemClasses({ activity: active ? "active" : "inactive" })} onClick={() => location.route(link)}>
+    <div class={menuItemClasses({ activity: active ? "active" : "inactive" })} onClick={() => route(link, true)}>
       {title}
     </div>
   );

src/components/ui/Button.tsx

@@ -11,10 +11,15 @@ const button = tv({
   },
 });
 
-const Button: FunctionComponent<{ onClick: () => void }> = (props) => {
+interface ButtonProps {
+  color?: "primary" | "secondary";
+  onClick: () => void;
+}
+
+const Button: FunctionComponent<ButtonProps> = ({ children, onClick, color = "primary" }) => {
   return (
-    <button type="button" class={button({ color: "primary" })} onClick={props.onClick}>
+    <button type="button" class={button({ color: color })} onClick={onClick}>
-      {props.children}
+      {children}
     </button>
   );
 };

src/pages/login.module.scss

@@ -7,3 +7,7 @@
 .login_card {
   @apply flex w-[95%] min-w-[300px] flex-col justify-center gap-2 rounded-md border-gray-400 p-5 shadow-md md:w-[350px];
 }
+
+.login_card_name {
+  @apply text-center text-2xl font-semibold;
+}

src/pages/login.tsx

@@ -6,16 +6,17 @@ import { useLocation } from "preact-iso";
 import classes from "./login.module.scss";
 const LoginPage: FunctionComponent = () => {
   const { isLoggedIn } = useAppContext();
-  const location = useLocation();
+  const { route } = useLocation();
   return (
     <div class={classes.login_container}>
       <div class={classes.login_card}>
+        <p class={classes.login_card_name}>Антихвост</p>
         <Input placeholder="Login" textAlign="center" />
         <Input isPassword placeholder="Password" textAlign="center" />
         <Button
           onClick={() => {
             isLoggedIn.value = true;
-            location.route("/profile/settings");
+            route("/profile/settings", true);
           }}
         >
           Login

src/pages/profile.tsx

@@ -5,8 +5,8 @@ import { Route, Router, useLocation } from "preact-iso";
 const ProfilePage: FunctionComponent = () => {
   const { route } = useLocation();
   return (
-    <div class="flex min-w-screen flex-row justify-between">
+    <div class="flex h-screen flex-col md:flex-row">
-      <div class="w-full overflow-x-hidden overflow-y-auto px-3 pb-20 break-all md:pb-0">
+      <div class="flex-1 overflow-y-auto px-3 pb-20 break-all md:pb-0">
         <Router>
           <Route
             path="/settings"
@@ -92,8 +92,10 @@ const ProfilePage: FunctionComponent = () => {
           />
         </Router>
       </div>
+      <div className="md:sticky md:top-0 md:h-screen">
         <Menu />
       </div>
+    </div>
   );
 };