add responsiveness

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>
+                <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">The self-hosted literary submission tracker.</p>
+                <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 />

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]) {

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,13 +15,13 @@ function NavLink(props: ComponentProps<"div"> & { href: string }) {
 export default function Navlinks(props: ComponentProps<"div">) {
   const pathname = usePathname()
   const links = [
-    { link: "/story", label: "STORIES" },
+    { link: "/story", label: "STORIES", icon: <BookOpenText /> },
-    { link: "/publication", label: "PUBLICATIONS" },
+    { link: "/publication", label: "PUBLICATIONS", icon: <BookOpen /> },
-    { link: "/submission", label: "SUBMISSIONS" },
+    { 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 ",
@@ -28,7 +29,10 @@ export default function Navlinks(props: ComponentProps<"div">) {
                 "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>