From 35ac70b62b2aabc848f6a54c34c8e5d31b8ee320 Mon Sep 17 00:00:00 2001
From: andrzej <andrzejjamesstepien@gmail.com>
Date: Sat, 21 Sep 2024 17:23:31 +0200
Subject: [PATCH] add responsiveness

---
 prisma/dev.db           | Bin 69632 -> 69632 bytes
 src/app/layout.tsx      |   9 ++++-----
 src/app/tailwind.css    |  40 ++++++++++++++++++++++++++++++++++++++++
 src/app/ui/navLinks.tsx |  16 ++++++++++------
 4 files changed, 54 insertions(+), 11 deletions(-)

diff --git a/prisma/dev.db b/prisma/dev.db
index 12b04ebd9e257f067167f3e608f78407bc4ef9e6..403cac693f53040f004b7a783a90a31b0b8027f9 100644
GIT binary patch
delta 686
zcmXAlPe>GD7{<SM=9}Hwb)Bcu)O2Q?bT`WgR+n9gqOcCKMMw!jmuQHoEyOW*Evkd2
z2eD{Z8%jEe5*;dpMYi$~orDf`NV`afSP(i$L4R)D`ex*T_u+Zpm-qYejW6=?MLyF)
z#aaC%6_+pN`kUjih-}a~CqL{C<(=9{Om3usf;)0MRoU!sOX^W=eGew_SzAXhfK}}u
z+VLCbeO0XShZ;vKi+jt(4tnK%E%s5)+gnQ4*Q7X;8kKK_YlT6_cA1pL3-5aA7-x(%
zcuS@D6+<i>rkOJ%R$tD|7py+l$y){28W^@OJBPySTDMp*<gMXB$8l_dhMTM&Hem+S
zc!D*2#6L{nF8<;NT;%W_FYyeku<;&mQ5G&#*_k{D&tBNgG0zn5&O-YbHkd+6w@f4%
zyi1Odq4bErO(i2tHhEg~OeN(9gSUu~P@4Ua5bPRBk}wt`iFb;TrF8fsUD+p0(iL48
zPefr0)-2&F=J6Vv_#{~W;4!9fs~KB(hb4^REV6hmfG-IAKmxW7UbfuCQDPy_DR)Zv
z;?0)pj)Xb+ggt@FW+ucVL}q$B8maAZLJ!)B7QweeaJKrO;YzjKW`!{&fJP-xTiYMP
zBVXdN<M2kSyErz*&pfCmyLuEsZ)Sp;_N$TdYr<eGa6PF0`B-o~RQXwLvh-N^1CLz9
zjp$KzEjq1Es+sUs<QL-FhIaprMGb27RIADu-K%9Z*Q?Trl?j!eN;I;f*U*q0I~`XU
R1yfU-OM-e=HZ(dw{{ii$l%W6s

delta 678
zcmXAlPe>GD7{<Tvn{V0~SLdO$c5`QDCv~%obX5$ZsH}r55mG_WB^q#S3vtZRqB^K~
z5Q$u6D7%Of9g31gmhw>0LFiD2w2M@S1tDlD=+7x{ecyWdJ-qMp!u!1M=mH;I;L`~@
zF=L*h6HAw~-L>_Vx?<6DUNGSI2VRw4sl@2{A%E~zTVbQSE^S7Q#W+6VDaMUOV-1}E
zR*X&5<2Sw(oYDIRud_G_m!=wNP561Li(Ux#<T`4QB?jBAl!6|&CvbhjGK7TJa>sZL
z6Voqp4ZV~Tc364UmGy%mr?c;>*B>~3uXDy744jUGku{@D3|LBOpwII>S46`ciNR%<
z#v~qM74NZ$yC`BEH*g1k@dG}x_=Y!li9DX+F;?Ifwx<submw<+r9sid+w=7!gb<ag
zZ3?B#;;o8KEuI#%)fUlGY_(ZBw%RT$izkGYQfp<AQj^kRgxjLYc$1)`HcHD>_e#rD
zO(8s0ft<*iVQ}#kS1^Ys*uV#o_Y?lq;sFYnz)h6!8qYC;v&e|37vYPr)d(~BI9Iu@
zhhDykiLcG%tB-8sI;D0x!l{hdQdVX+Z`D?NS$WDVkEIe@HcJv&7mE2hr%D_h!!Q$j
zzhfiRR`-cr#}N(}cW^Gw2=5ist!Y(+w_D0=mbBU>Q<iv`RI|*4Buh#beiq}78I8PC
z^h>y2aa3EanAFC#Ly?mH3k}9P;x8S#ON*XPYJ}3UDni-p35}jy9@pq2M&B-*QQEKY
SvC5b}`!7l}%j*W+PyYi5ijwRA

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index fde9763..aed44d6 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -6,12 +6,11 @@ import "./globals.css";
 import Navlinks from "./ui/navLinks";
 import { ModeToggle } from "./ui/modeToggle";
 import { inter } from "./ui/fonts";
-import { LogOutIcon } from "lucide-react";
-import { Button } from "@/components/ui/button";
 import LogoutButton from "./ui/logoutButton";
 
 
 
+
 export const metadata: Metadata = {
   title: "Subman",
   description: "A self-hosted literary submission tracker."
@@ -33,10 +32,10 @@ export default function RootLayout({
           disableTransitionOnChange
         >
           <div id="layout-container" className="p-4 w-screen h-screen mt-6 flex justify-center">
-            <div className="w-5/6 flex">
+            <div className="w-5/6 flex flex-col md:flex-row">
               <div id="sidebar" className="h-5/6 flex flex-col"> <header className="">
-                <h1 className="font-black text-4xl text-primary-foreground bg-primary antialiased w-full p-2 rounded-tl-3xl pl-6 pr-4">SubMan</h1>
-                <p className="mt-2 mx-1 text-sm antialiased w-40">The self-hosted literary submission tracker.</p>
+                <h1 className="font-black text-4xl text-primary-foreground bg-primary antialiased w-full p-2 rounded-tl-3xl pl-6 pr-4 hidden md:block">SubMan</h1>
+                <p className="mt-2 mx-1 text-sm antialiased w-40 hidden md:block">The self-hosted literary submission tracker.</p>
               </header>
                 <Navlinks className="mt-6" />
                 <footer className="mt-auto flex justify-center"><ModeToggle /><LogoutButton />
diff --git a/src/app/tailwind.css b/src/app/tailwind.css
index df53417..31df274 100644
--- a/src/app/tailwind.css
+++ b/src/app/tailwind.css
@@ -768,6 +768,10 @@ body {
   margin-top: auto;
 }
 
+.block {
+  display: block;
+}
+
 .flex {
   display: flex;
 }
@@ -788,6 +792,10 @@ body {
   display: grid;
 }
 
+.hidden {
+  display: none;
+}
+
 .size-full {
   width: 100%;
   height: 100%;
@@ -984,6 +992,10 @@ body {
   max-width: 20rem;
 }
 
+.flex-none {
+  flex: none;
+}
+
 .shrink-0 {
   flex-shrink: 0;
 }
@@ -2299,6 +2311,10 @@ body {
     top: auto;
   }
 
+  .sm\:hidden {
+    display: none;
+  }
+
   .sm\:flex-row {
     flex-direction: row;
   }
@@ -2343,9 +2359,33 @@ body {
 }
 
 @media (min-width: 768px) {
+  .md\:block {
+    display: block;
+  }
+
+  .md\:flex {
+    display: flex;
+  }
+
+  .md\:hidden {
+    display: none;
+  }
+
+  .md\:w-32 {
+    width: 8rem;
+  }
+
   .md\:max-w-\[420px\] {
     max-width: 420px;
   }
+
+  .md\:flex-row {
+    flex-direction: row;
+  }
+
+  .md\:flex-col {
+    flex-direction: column;
+  }
 }
 
 .\[\&\:has\(\[aria-selected\]\)\]\:bg-accent:has([aria-selected]) {
diff --git a/src/app/ui/navLinks.tsx b/src/app/ui/navLinks.tsx
index 3f736fd..2cf7cf9 100644
--- a/src/app/ui/navLinks.tsx
+++ b/src/app/ui/navLinks.tsx
@@ -4,6 +4,7 @@ import { usePathname } from "next/navigation";
 import { ComponentProps } from "react";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
+import { ArrowUpNarrowWide, BookOpen, BookOpenText } from "lucide-react";
 
 
 function NavLink(props: ComponentProps<"div"> & { href: string }) {
@@ -14,21 +15,24 @@ function NavLink(props: ComponentProps<"div"> & { href: string }) {
 export default function Navlinks(props: ComponentProps<"div">) {
   const pathname = usePathname()
   const links = [
-    { link: "/story", label: "STORIES" },
-    { link: "/publication", label: "PUBLICATIONS" },
-    { link: "/submission", label: "SUBMISSIONS" },
+    { link: "/story", label: "STORIES", icon: <BookOpenText /> },
+    { link: "/publication", label: "PUBLICATIONS", icon: <BookOpen /> },
+    { link: "/submission", label: "SUBMISSIONS", icon: <ArrowUpNarrowWide /> },
   ]
   return (
     <div className={props.className}>
-      <div className="text-secondary-foreground" >
+      <div className="text-secondary-foreground flex flex-row md:flex-col" >
         {
           links.map(e => (<NavLink key={e.link} href={e.link}
-            className={twMerge(clsx("text-xl drop-shadow  font-black my-2 w-full p-2 pl-6 antialiased text-secondary-foreground bg-secondary rounded-l-3xl",
+            className={twMerge(clsx("text-xl drop-shadow  font-black my-2 w-full p-2 pl-6 antialiased text-secondary-foreground bg-secondary rounded-l-3xl ",
               {
                 "text-primary-foreground bg-primary": pathname.includes(e.link)
               }
             ))}
-          ><p className="drop-shadow-sm">{e.label}</p></NavLink >))
+          >
+            <p className="drop-shadow-sm hidden md:block">{e.label}</p>
+            <span className="block md:hidden">{e.icon}</span>
+          </NavLink >))
         }
       </ div>
     </div>