Added the MediumSIzedContainer widget

inpus_touch/lib/MediumSizedContainer.dart

@@ -0,0 +1,40 @@
+import 'package:flutter/material.dart';
+
+class MediumSizedContainer extends StatefulWidget {
+  @override
+  State<StatefulWidget> createState() => MediumSizedContainerState();
+}
+
+class MediumSizedContainerState extends State<StatefulWidget> {
+  int _selectedIndex = 0;
+
+  @override
+  Widget build(BuildContext context) {
+    return NavigationRail(
+        selectedIndex: 0,
+        destinations: getDestinations<NavigationRailDestination>(
+            (selectedIcon, regularIcon, label) => NavigationRailDestination(
+                selectedIcon: selectedIcon,
+                icon: regularIcon,
+                label: Text(label))),
+                extended: true,);
+  }
+}
+
+typedef ItemCreator<T> = T Function(Icon selectedIcon, Icon icon, String label);
+
+List<T> getDestinations<T>(ItemCreator<T> creator) {
+  T overview = creator(
+      const Icon(Icons.timer), const Icon(Icons.timer_outlined), 'Timers');
+
+  T triggers = creator(const Icon(Icons.alarm_add),
+      const Icon(Icons.alarm_add_outlined), 'Triggers');
+
+  T logs = creator(const Icon(Icons.assignment),
+      const Icon(Icons.assignment_outlined), 'Logs');
+
+  T settings = creator(const Icon(Icons.settings),
+      const Icon(Icons.settings_outlined), 'Settings');
+
+  return [overview, triggers, logs, settings];
+}

inpus_touch/lib/main.dart

@@ -3,6 +3,8 @@ import 'package:flutter/material.dart';
 import 'package:dynamic_color/dynamic_color.dart';
 import 'package:flutter/scheduler.dart';
 
+import 'MediumSizedContainer.dart';
+
 void main() {
   runApp(const MainApp());
 }
@@ -33,12 +35,18 @@ class MainApp extends StatelessWidget {
               backgroundColor: secondaryColor,
               foregroundColor: isDark ? Colors.white : Colors.black),
           backgroundColor: accentColor,
-          body: Container(
-              decoration: BoxDecoration(
-                  image: DecorationImage(
-                      image: AssetImage(isDark
-                          ? 'assets/clock icon dark.png'
-                          : 'assets/clock icon light.png')))));
+          body: LayoutBuilder(builder: (context, constraints) {
+            if (constraints.maxWidth > 600) {
+              return MediumSizedContainer();
+            }
+            
+            return Container(
+                decoration: BoxDecoration(
+                    image: DecorationImage(
+                        image: AssetImage(isDark
+                            ? 'assets/clock icon dark.png'
+                            : 'assets/clock icon light.png'))));
+          }));
     }));
   }
 }